/*
 * Page styles (Marcia Fernandes), used by the Elementor pages through CSS classes set in
 * tools/build_*.py. Brand guide: main #50463E, secondary #AA9E94 and #9E5909, Bodoni italic.
 *
 * CTA hierarchy from her copy document:
 *   .mf-cta--primary  outlined button, conversion only (WORK WITH ME, BEGIN YOUR ENQUIRY,
 *                     LET'S TALK, SEND ENQUIRY); same type, height, padding, border and hover everywhere.
 *   .mf-cta--link     editorial text link with a small arrow and a fine underline, for discovery
 *                     (EXPLORE THE LOOKBOOK, MORE ABOUT MARCIA, EXPLORE THE SERVICES, ...).
 *   Neither ever wraps onto two lines; both keep a comfortable tap area and a visible focus state.
 *
 * Sliders are delicate (operator, 2026-10-01: all slides on the site): no dots, no default or boxed
 * buttons; only fine arrows in her browns, beside a quote where there is room (the testimonials) or
 * centred under the slides (.mf-carousel-nav); each slider moves by itself and carries on after an
 * arrow or a swipe. tools/test-sliders.cjs checks every page.
 */

:root {
	--mf-brown-2: #6e6259;
}

/* Body text in the body font of her Figma draft: Raleway Regular, 14px on a 28px line, no extra
   letter spacing (operator, 2026-10-02). The Elementor kit's Body typography says the same on the
   Elementor pages (tools/body-font.php); this rule replaces the parent theme's own body font
   (Cormorant Garamond 20px) where the kit's styles are not loaded: the Journal articles. */
body {
	font-family: var(--mf-body);
	font-size: 14px;
	line-height: 28px;
	letter-spacing: 0;
}

/* Only the body text changed. These set their own font but took their letter spacing (0.5px) or
   their line (29px) from the old body text, so they keep them here, exactly as they were. */
.mf-pullquote blockquote p,
.mf-body .mf-question,
.mf-instagram__handle,
.mf-footer__place,
.mf-article__excerpt,
.elementor-widget.morgan-font-smoothing {
	letter-spacing: 0.5px;
}

.mf-body .mf-question,
.mf-jnav a,
.mf-article__cat a,
.mf-article__place,
.mf-article__byline,
.mf-small-caps p,
.mf-meta dt {
	line-height: 29px;
}

.mf-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* CTAs */
.mf-cta .elementor-button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--mf-brown);
	font-family: var(--mf-sans);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	white-space: nowrap;
	fill: currentColor;
	transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.mf-cta--primary .elementor-button {
	padding: 0 36px;
	border: 1px solid var(--mf-brown);
}

.mf-cta--primary .elementor-button:hover,
.mf-cta--primary .elementor-button:focus-visible {
	background: var(--mf-brown);
	color: var(--mf-ivory);
}

.mf-cta--light .elementor-button {
	border-color: var(--mf-white, #fff);
	color: var(--mf-white, #fff);
}

.mf-cta--light .elementor-button:hover,
.mf-cta--light .elementor-button:focus-visible {
	background: var(--mf-white, #fff);
	color: var(--mf-brown);
}

.mf-cta--link .elementor-button {
	padding: 0;
	border: 0;
}

.mf-cta--link .elementor-button-text {
	padding: 6px 0 5px;
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
	transition: background-size 0.4s ease;
}

.mf-cta--link .elementor-button-text::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.7em;
	letter-spacing: 0;
	transition: transform 0.35s ease;
}

.mf-cta--link .elementor-button:hover,
.mf-cta--link .elementor-button:focus-visible {
	background: transparent;
	color: var(--mf-amber);
}

.mf-cta--link.mf-cta--light .elementor-button:hover,
.mf-cta--link.mf-cta--light .elementor-button:focus-visible {
	background: transparent;
	color: var(--mf-mist);
}

/* Text links on her stone (#E3E2DB): the amber hover reads 4.2:1 there, below the 4.5:1 small text
   needs, so the label keeps its brown (7:1) and the arrow's nudge shows the hover. Reusable: add
   mf-on-stone to a section on the stone. (The satin backgrounds and their mf-on-satin rules are gone:
   operator, 2026-10-17, no satin effect on any page.) */
.mf-on-stone .mf-cta--link .elementor-button:hover,
.mf-on-stone .mf-cta--link .elementor-button:focus-visible {
	color: var(--mf-brown);
}

/* Text on a dark photo band. */
.mf-on-dark,
.mf-on-dark p {
	color: var(--mf-white, #fff);
}

.mf-cta--link .elementor-button:hover .elementor-button-text::after,
.mf-cta--link .elementor-button:focus-visible .elementor-button-text::after {
	transform: translateX(4px);
}

.mf-cta .elementor-button:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

/* Headings break into lines of similar length, so no single word is left alone on the last line
   ("WELCOME TO MARCIA FERNANDES & / CO." on phones), where browsers support it. */
.elementor-widget-heading .elementor-heading-title {
	text-wrap: balance;
}

/* Display title: a large statement heading (the Home hero's "Curating elevated and intimate
   celebrations of love"). The theme's Large Hero Text is 63px on desktop and 43px on phones, too
   big for a sentence; this scales with the screen, from 46px on a wide desktop down to 26px on
   phones. Reusable: give a Heading widget the class mf-display and no typography of its own. */
.elementor-widget-heading.mf-display .elementor-heading-title {
	font-family: var(--mf-serif);
	font-size: clamp(26px, 3.2vw, 46px);
	font-weight: 300;
	line-height: 1.18;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-wrap: balance;
}

/* A small heading with more presence (her revision 01: the Home's WEDDING PLANNING, CREATIVE
   DIRECTION & DESIGN): the kit's subheading typography, in bold. Raleway is self-hosted as a variable
   font (100-900), so this is its real bold, not a synthesised one. !important: Elementor prints the
   kit typography on the widget's own id, which outranks a class. */
.elementor-widget-heading.mf-strong .elementor-heading-title {
	font-weight: 700 !important;
}

/* A section title in the hero title's font, smaller than the statements (her revision 02: the Home's
   WEDDING PLANNING, / CREATIVE DIRECTION & DESIGN "na tipografia do título hero", as the template's
   section titles): capitals, its two lines kept by the <br> in the copy. Reusable: give a Heading
   widget the class mf-title-sm and no typography of its own (colour stays its own). */
.elementor-widget-heading.mf-title-sm .elementor-heading-title {
	font-family: var(--mf-serif);
	font-size: clamp(21px, 1.95vw, 28px);
	font-weight: 300;
	line-height: 1.25;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* The Creative Direction page's two timeline titles (Why Creative Direction?, The Creative Process):
   in the body copy's font (her revision 01; they were in handwriting), in capitals spaced as the
   site's subheadings, a step above the timeline's own item titles (16px) so each still leads its
   section. tools/build_creative_direction.py. */
.elementor-widget.mf-timeline-title .elementor-heading-title {
	font-family: var(--mf-sans);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.4;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	.elementor-widget.mf-timeline-title .elementor-heading-title {
		font-size: 18px;
	}
}

/* Handwriting accent, as in the theme demo: a short line in script over a photo collage, or a
   script title, in the demo's own California Palms Script (her revision 01, bought 2026-10-07; it
   replaced August, a free look-alike). Its letters are about 0.64 of August's width at the same size,
   so every size here is August's x 1.5625 (75/48: the demo set it at 75px where August had 48px): the
   lines keep the width and the places they were measured in, and the demo's own look. Line height
   0.7 as the demo. Reusable: give a Text Editor or Heading widget the class mf-script and no
   typography of its own (colour stays its own). */
.elementor-widget.mf-script,
.elementor-widget.mf-script p,
.elementor-widget.mf-script .elementor-heading-title {
	font-family: 'California Palms Script', 'Mrs Saint Delafield', cursive;
	font-size: clamp(53px, 4.84vw, 75px);
	font-style: normal;
	font-weight: 400;
	line-height: 0.7;
	letter-spacing: 0;
	text-transform: none;
	/* Lines of similar length: no single word alone on the last line. */
	text-wrap: balance;
}

/* Her capital L is a single hairline stroke (the font's own design), which a standard-density
   computer screen draws so pale that it looks erased (her revision 03: "O 'L' do lookbook ... está
   apagado, no desk ... no IPad e tel está perfeito"; measured at 1x: the L a faint grey beside the
   other letters). On those screens only, a hairline outline in the line's own colour brings it back;
   the font, its size and colour are unchanged, and retina screens, iPads and phones draw it as before. */
@media (max-resolution: 1.49dppx) {
	.elementor-widget.mf-script,
	.elementor-widget.mf-script p,
	.elementor-widget.mf-script .elementor-heading-title {
		-webkit-text-stroke: 0.35px currentColor;
	}
}

/* A script title with a heading ("Dream. Explore. Discover." under SERVICES, on the Home and the
   Services page, her revision 02 order; the Lookbook's script titles over their cards): her revision
   01 found the two fonts fighting at the same size, so it is two-thirds of a handwriting line, an
   accent with the title rather than a second title. A long line takes the
   same size (mf-script--long: the About hero's two lines, her revision 01), so its longer line fits
   its photo on phones and tablets and sits under the oval portrait rather than across it. */
.elementor-widget.mf-script.mf-script--title,
.elementor-widget.mf-script.mf-script--title p,
.elementor-widget.mf-script.mf-script--long,
.elementor-widget.mf-script.mf-script--long p {
	font-size: clamp(36px, 3.23vw, 50px);
}

/* On tablets the About hero's long line ("through Portugal, to the UK") is 360px wide at 36px, more
   than its photo leaves it: at 768px its box began 11px off the screen (tools/test-script.cjs,
   2026-10-17). 33px there (330px), in a 340px box (tools/build_about.py). */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-widget.mf-script.mf-script--long,
	.elementor-widget.mf-script.mf-script--long p {
		font-size: 33px;
	}
}

/* A gallery's longer story, folded under its short one (her revision 01): BEHIND THE DESIGN in the
   site's text-link style (small capitals, fine underline) with a plus that turns to a minus when it
   opens; the story keeps the body text's look, its title in the serif. tools/build_gallery.py. */
.mf-story-more summary {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	min-height: 44px;
	cursor: pointer;
	list-style: none;
	color: var(--mf-brown);
	font-family: var(--mf-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.mf-story-more summary::-webkit-details-marker {
	display: none;
}

.mf-story-more summary::after {
	content: "+";
	font-size: 16px;
	letter-spacing: 0;
	line-height: 1;
	transition: transform 0.35s ease;
}

.mf-story-more[open] summary::after {
	content: "\2212";
}

.mf-story-more summary:hover,
.mf-story-more summary:focus-visible {
	color: var(--mf-amber);
}

.mf-story-more summary:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

.mf-story-more summary {
	padding: 6px 0 5px;
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
}

.mf-story-more__body {
	padding-top: 18px;
}

.mf-story-more__title {
	margin: 0 0 14px;
	color: var(--mf-brown);
	font-family: var(--mf-serif);
	font-size: 26px;
	font-weight: 300;
	line-height: 1.25;
	text-transform: none;
}

/* Two balanced columns on tablets and desktops, its title across both (operator, 2026-10-07);
   phones keep one column, so the two halves read one under the other. */
@media (min-width: 768px) {
	.mf-story-more__body {
		column-count: 2;
		column-gap: clamp(36px, 4vw, 64px);
	}

	.mf-story-more__title {
		column-span: all;
	}
}

/* Her name as a signature at the foot of a photo band (the Home's Creative Direction band, as the
   demo's MORGAN IVY): the theme's Extra Large Text in the theme's heading font. The widget is not a
   heading (a div), so the font the theme gives h1-h6 is given here. */
.elementor-widget.mf-signature .elementor-heading-title {
	font-family: var(--mf-serif);
	font-weight: 400;
}

/* Black-and-white photo: a colour photo shown in black and white to sit with the site's black-and-
   white images (the file itself is unchanged). Reusable: add mf-bw to an Image widget. */
.elementor-widget.mf-bw img {
	filter: grayscale(1);
}

/* A handwriting line over light, busy photos (florals, a gown): a soft, diffuse dark glow behind
   the white strokes keeps them readable without a visible shadow edge. */
.elementor-widget.mf-script--glow p {
	text-shadow: 0 0 16px rgba(38, 31, 26, 0.65), 0 0 4px rgba(38, 31, 26, 0.45);
}

/* The theme's tall side words (INTIMATE, DISTINCTIVE, a gallery's country) keep their serif: the
   kit's Extra Large Text names no font, so they took the body font, which is Raleway since
   2026-10-02. */
.elementor-widget.morgan-rotated-text,
.elementor-widget.morgan-rotated-text p {
	font-family: 'Cormorant Garamond', Georgia, serif;
}

/* A side word on a section's right edge (the theme's tall words turned on their side), placed from
   its top like the word on the left edge. The theme's morgan-mirror-text places it from its far end,
   so its top moves with the word's length: a short word rose past the section's top (the Lookbook
   galleries' Italy, cut by 143px on tablets). Its right edge stays where the theme's offset from the
   right puts it. Reusable: add mf-side-word-top to a morgan-mirror-text widget and give it top
   offsets (Elementor's vertical orientation "start"). */
.elementor-widget.morgan-rotated-text.mf-side-word-top {
	transform-origin: top right;
	transform: rotate(-90deg) translateY(-100%);
}

/* The Home intro collage's handwriting line, under the arch photo and beside the salon photo
   (tools/build_home.py). The room beside the salon photo shrinks with the screen, so on tablets and
   phones the line shrinks with it and keeps its two lines: 34px at 1024px wide down to 28px at 768;
   on phones it fills 65% of the screen less 40px (24px at 320, 30px at 390, 34px from 430). */
@media (max-width: 1024px) {
	.elementor-widget.mf-script.mf-script--collage,
	.elementor-widget.mf-script.mf-script--collage p {
		font-size: clamp(44px, 5.19vw, 53px); /* August's clamp(28px, 3.32vw, 34px) x 1.5625 */
	}
}

@media (max-width: 767px) {
	.elementor-widget.mf-script.mf-script--collage,
	.elementor-widget.mf-script.mf-script--collage p {
		font-size: clamp(37.5px, calc(14.94vw - 10.6px), 53px); /* August's clamp(24px, calc(9.56vw - 6.8px), 34px) x 1.5625 */
	}
}

/* Accented letters in a handwriting line (assets/js/mf-script-accents.js): California Palms draws
   an accented letter as the plain one, so the font's own accent mark is laid over it (under it for
   the cedilla) at the offsets the script gives each letter. The mark's line is the font's ascent
   plus descent (0.914em), so at top 0 it sits on the letter's baseline. It takes the line's colour
   and glow (text-shadow is inherited) and is decoration for screen readers: the letter is read. */
.mf-script .mf-acc {
	position: relative;
}

.mf-script .mf-acc::after {
	content: attr(data-mark);
	content: attr(data-mark) / "";
	position: absolute;
	top: var(--mf-ay, 0);
	left: var(--mf-ax, 0);
	line-height: 0.914;
	white-space: nowrap;
	pointer-events: none;
	/* A mark is a short stroke: a little weight keeps it as clear as the letters' long ones. */
	-webkit-text-stroke: 0.012em currentColor;
}

/* Accented capitals in the title font (assets/js/mf-title-accents.js, her revision 05: "Corrigir
   Colaboração Versão PT - (~)"). Butler sets its capital marks 109-192 font units above the cap
   height, where a hairline no longer reads as part of the word. The letter's own glyph is hidden
   (its width still holds the place: Butler's accented capitals are as wide as the plain ones) and
   drawn twice: ::before shows it below 0.76em above the baseline (the letter: cap height 0.704em,
   0.713em for round letters), ::after above that line (the mark: none starts below 0.813em), moved
   down by --mf-cap-drop. Both boxes are 1.6em tall with the baseline at 1.035em (Butler's ascent
   0.735em plus half of the 0.6em of leading), so top -0.3em puts their baseline on the letter's; the
   0.76em line is 0.275em from their top. 0.1em of room either side keeps a mark wider than its letter
   (the circumflex of Î) whole. */
.mf-cap {
	position: relative;
	-webkit-text-fill-color: transparent;
	text-shadow: none;
}

.mf-cap::before,
.mf-cap::after {
	content: attr(data-ch);
	content: attr(data-ch) / "";
	position: absolute;
	top: -0.3em;
	left: -0.1em;
	padding: 0 0.1em;
	line-height: 1.6;
	letter-spacing: 0;
	white-space: nowrap;
	pointer-events: none;
	-webkit-text-fill-color: currentColor;
	text-shadow: var(--mf-cap-shadow, none);
}

.mf-cap::before {
	clip-path: inset(0.275em 0 0 0);
}

.mf-cap::after {
	clip-path: inset(0 0 1.325em 0);
	transform: translateY(var(--mf-cap-drop, 0.07em));
}

/* Over a light photo the letters read by their glow; a mark is too short for that wide halo, so it
   takes a tighter one (the white circumflex of "tendencias" was lost on a white plate). */
.elementor-widget.mf-script--glow .mf-acc::after {
	text-shadow: 0 0 5px rgba(38, 31, 26, 0.8), 0 0 2px rgba(38, 31, 26, 0.65);
}

/* Light text over a bright photo (the Home hero's titles over the white veil): a soft dark glow
   behind the letters keeps them apart from the white of the photo, with no visible shadow edge.
   Wide for titles; tighter and denser for small lines (a subheading), whose thin strokes a wide halo
   barely darkens. Never on buttons (below). Reusable: add mf-on-photo to the container of the
   texts, or to one widget (tools/test-band-text.cjs measures the result). */
.mf-on-photo .elementor-heading-title,
.mf-on-photo .elementor-widget-text-editor p {
	text-shadow: 0 0 30px rgba(28, 22, 18, 0.6), 0 0 12px rgba(28, 22, 18, 0.45), 0 0 3px rgba(28, 22, 18, 0.35);
}

.mf-on-photo h6.elementor-heading-title {
	text-shadow: 0 0 2px rgba(28, 22, 18, 0.7), 0 0 8px rgba(28, 22, 18, 0.55), 0 0 20px rgba(28, 22, 18, 0.45);
}

/* Button labels never take a glow (operator, 2026-10-01): on the solid hover fill it blurred the
   letters. A button over a photo reads by its own outline and fill, measured by test-band-text. */
.mf-cta .elementor-button,
.mf-cta .elementor-button-text {
	text-shadow: none;
}

/* Lookbook gallery pages: the five metadata lines under the title (celebration, venue, location,
   her role, photography), each a small spaced label and its value, centred like the story below. */
.mf-meta {
	margin: 0;
	text-align: center;
}

.mf-meta__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 4px 14px;
	padding: 7px 0;
}

.mf-meta dt {
	color: var(--mf-brown-2);
	font-family: var(--mf-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.mf-meta dd {
	margin: 0;
	color: var(--mf-brown);
	font-family: var(--mf-body);
	font-size: 14px;
	line-height: 1.4;
}

.mf-meta dd a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(158, 89, 9, 0.45);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: text-decoration-color 0.3s ease;
}

.mf-meta dd a:hover,
.mf-meta dd a:focus-visible {
	text-decoration-color: var(--mf-amber);
}

/* Lookbook cards and the gallery thumbnails: the photo is the link, a soft lift on hover. */
.mf-card-link img,
.elementor-image-gallery .gallery-item img {
	transition: opacity 0.35s ease;
}

.mf-card-link a:hover img,
.mf-card-link a:focus-visible img,
.elementor-image-gallery .gallery-item a:hover img,
.elementor-image-gallery .gallery-item a:focus-visible img {
	opacity: 0.86;
}

/* The uneven gallery (her revision 03, a test on gallery 9 first): every photo whole, in its own shape,
   in columns of different heights, with the same 15px between photos as the even grid; four columns,
   three on tablets, two on phones, as the grid. The photos run down each column in her order; the
   lightbox keeps her order. tools/build_gallery.py sets the class and the uncropped copies. */
.mf-gallery-uneven .elementor-image-gallery .gallery {
	display: block;
	column-count: 4;
	column-gap: 15px;
}

/* WordPress prints the gallery's own style with an id (#gallery-1 .gallery-item { float: left;
   margin-top: 10px; text-align: center; width: 25% }), which no class rule outweighs: the four
   properties it sets are overridden with !important, nothing else; .gallery in the selector outranks
   Elementor's own quarter width from 768px (.elementor-image-gallery .gallery-columns-4 .gallery-item
   { max-width: 25% }). On phones the theme's 5px/10px spacing stays, as in the even grid. */
.mf-gallery-uneven .elementor-image-gallery .gallery .gallery-item {
	display: block;
	float: none !important;
	width: 100% !important;
	max-width: none;
	margin: 0 !important;
	padding: 0 0 15px;
	text-align: left !important;
	break-inside: avoid;
}

/* WordPress closes each row of the even grid with <br style="clear: both">: in columns each one is an
   empty line that pushed the photos down (columns 2-4 began 260px lower than the first). */
.mf-gallery-uneven .elementor-image-gallery .gallery br {
	display: none;
}

.mf-gallery-uneven .elementor-image-gallery .gallery-item img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 1024px) {
	.mf-gallery-uneven .elementor-image-gallery .gallery {
		column-count: 3;
	}
}

@media (max-width: 767px) {
	.mf-gallery-uneven .elementor-image-gallery .gallery {
		column-count: 2;
	}
}

/* A wedding's gallery in the order of its parts (inc/mf-moments.php): one gallery, no titles between the
   parts (her review, 2026-10-27), its photos laid across the columns in their order by
   assets/js/mf-day-gallery.js, each into the shortest column, so the Hero opens the gallery and the day
   reads from the top down (in CSS columns the photos run down each column, and later parts would head
   columns 2 to 4). The uneven gallery's columns and its 15px between photos: the script sets the column
   width (--mf-day-width) and each photo's place; without the script the gallery keeps its columns. */
.mf-gallery-uneven .elementor-image-gallery .gallery.mf-day {
	--mf-day-columns: 4;
}

/* On tablets and phones the gallery's container centres its widgets (align-items: center), so a widget
   is as wide as its content; with every photo placed by the script it has none, and the gallery shrank
   to nothing (measured at 390: 0px). The widget takes the container's width, as it did in columns. */
.mf-gallery-uneven:has(.gallery.mf-day) {
	align-self: stretch;
}

.mf-gallery-uneven .elementor-image-gallery .gallery.mf-day-ready {
	position: relative;
	column-count: auto;
}

.mf-gallery-uneven .elementor-image-gallery .gallery.mf-day-ready .gallery-item {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--mf-day-width) !important;
}

@media (max-width: 1024px) {
	.mf-gallery-uneven .elementor-image-gallery .gallery.mf-day {
		--mf-day-columns: 3;
	}
}

@media (max-width: 767px) {
	.mf-gallery-uneven .elementor-image-gallery .gallery.mf-day {
		--mf-day-columns: 2;
	}
}

/* A Lookbook row of fewer than three cards (Website Editor re-flows the cards three to a row when a
   gallery is added, hidden or moved, and marks every row mf-card-row): centred, each card the width
   of one in a full row, so a short last row never stretches its photos. In a full row each card
   takes a third of the row less its own side margins (Elementor's --margin-left/right, 30px; the
   rows have no gap): measured 348px of 1224 at 1440 wide. Phones stack the cards. */
@media (min-width: 768px) {
	.e-con.mf-card-row:has(> .e-con:nth-child(-n+2):last-child) {
		justify-content: center;
	}

	.e-con.mf-card-row:has(> .e-con:nth-child(-n+2):last-child) > .e-con {
		--mf-card-width: calc(100% / 3 - var(--margin-left, 0px) - var(--margin-right, 0px));
		flex: 0 0 var(--mf-card-width);
		width: var(--mf-card-width);
		max-width: var(--mf-card-width);
	}
}

/* A larger lead paragraph (the Journal introduction): the body font at its own, larger size
   (operator, 2026-10-02). */
.mf-lead p {
	font-size: 22px;
	line-height: 1.55;
}

@media (max-width: 767px) {
	.mf-lead p {
		font-size: 19px;
	}
}

/* A lead sentence in the hero title's font (her revision 02: the Lookbook introduction "fonte hero",
   on two lines instead of three; the body font stays for small text). In sentence case: a whole
   sentence in capitals reads as a shout. Its box gives the two lines: 860px holds the English and
   the longer Portuguese on two lines from 1024px wide (tools/build_lookbook.py); phones take more.
   Reusable: give a Text Editor widget the class mf-lead-serif and no typography of its own. */
.elementor-widget.mf-lead-serif p {
	font-family: var(--mf-serif);
	font-size: clamp(20px, 1.67vw, 24px);
	font-weight: 300;
	line-height: 1.45;
	letter-spacing: 0.02em;
	text-wrap: balance;
}

/* The Lookbook cards' titles on her two lines, the couple and then the place (her revision 02). The
   demo's 30px broke a long place over two more lines; this size follows the card, so each line stays
   whole from 1440px wide (at Chateau de la Couronne, the longest, too) and all but that one on
   narrower screens. The demo's font, line and spacing stay (the widget's own settings).
   tools/build_lookbook.py. */
.elementor-widget-heading.mf-card-title .elementor-heading-title {
	font-size: clamp(19px, 1.36vw, 26px);
}

@media (max-width: 767px) {
	.elementor-widget-heading.mf-card-title .elementor-heading-title {
		font-size: 22px;
	}
}

/* A small spaced line (the Privacy Policy's date). */
.mf-small-caps p {
	margin: 0;
	color: var(--mf-brown-2);
	font-family: var(--mf-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/* Body copy blocks */
.mf-body p {
	margin: 0 0 1.05em;
}

/* Links inside her text (the FAQ answers, for instance): the theme's pale link colour is too
   faint on the stone backgrounds, so text colour with a fine amber underline. */
.mf-body a {
	color: var(--mf-brown);
	text-decoration: underline;
	text-decoration-color: var(--mf-amber);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.3s ease;
}

.mf-body a:hover,
.mf-body a:focus-visible {
	color: var(--mf-amber);
}

/* No single word left alone on a paragraph's or a quote's last line (where browsers support it). */
.mf-body p,
.mf-testimonial blockquote p,
.mf-pullquote blockquote p {
	text-wrap: pretty;
}

.mf-body p:last-child {
	margin-bottom: 0;
}

/* Its size in px: 1.05em of the body text, which is smaller since 2026-10-02. */
.mf-body .mf-question {
	margin: 1.4em 0 0.35em;
	font-family: var(--mf-italic);
	font-size: 21px;
	font-style: italic;
}

/* List items (the theme's icon lists: the Services INCLUDES lists, Creative Direction's points, and
   any list added later): a fine dash in the text's own brown on the first line of each item (her
   revision 02: "( - ) tracinho para ainda mais discreto", no accent colour; it was a small open
   circle in her amber, and the theme's solid check before that). The text keeps its place, 18px in. */
.elementor-widget.elementor-widget-icon-list .elementor-icon-list-icon > svg,
.elementor-widget.elementor-widget-icon-list .elementor-icon-list-icon > i {
	display: none;
}

.elementor-widget.elementor-widget-icon-list .elementor-icon-list-icon {
	align-self: flex-start;
	align-items: center;
	justify-content: flex-start;
	width: 18px;
	min-width: 18px;
	height: 28px;
	height: 1lh;
}

.elementor-widget.elementor-widget-icon-list .elementor-icon-list-icon::before {
	content: "";
	width: 8px;
	height: 1px;
	background-color: var(--mf-brown);
}

/* A list in a centred text, on computers (her revision 02: the Creative Direction page's "What is
   Creative Direction?" centred as a whole on desktops, where its centred paragraphs over a list at
   the left read as misaligned): the list as one block in the middle, its lines starting together
   after their dashes. Tablets and phones keep it at the left, as she likes them there. Reusable: give
   an Icon List widget the class mf-list-centred. tools/build_creative_direction.py. */
@media (min-width: 1025px) {
	.elementor-widget.mf-list-centred {
		text-align: center;
	}

	.elementor-widget.mf-list-centred .elementor-icon-list-items {
		display: inline-block;
		text-align: left;
	}
}

/* "INTIMATE. INTENTIONAL. DISTINCTIVE.": a standalone typographic line, not a heading;
   whitespace above and below, one line wherever possible (mobile included), no heavy bold. */
.mf-statement {
	margin: 44px 0 38px !important;
}

.mf-statement p {
	margin: 0;
	color: var(--mf-brown);
	font-family: var(--mf-serif);
	font-size: clamp(14px, 1.3vw, 19px);
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Testimonials (quote + couple) */
.mf-testimonial blockquote {
	max-width: 860px;
	margin: 0 auto;
	padding: 0;
	border: 0;
	text-align: center;
}

.mf-testimonial blockquote p,
.mf-pullquote blockquote p {
	padding: 0;
}

/* The quotes in the site's title font, in capitals, as the theme's template sets them (her revision
   02, PT and EN: "fonte para letra de destaque hero (caixa alta) como no template original"). Her
   reviews run to five or six lines where the template's run to three, so they keep the delicate
   size the operator chose on 2026-10-02 (20px on a desktop, 17px on laptops and phones), the size of
   the INTIMATE. INTENTIONAL. DISTINCTIVE. line, with the spacing capitals need to read at length. */
.mf-testimonial blockquote p {
	margin: 0;
	color: var(--mf-brown);
	font-family: var(--mf-serif);
	font-size: clamp(17px, 1.4vw, 20px);
	font-weight: 300;
	line-height: 1.55;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.mf-testimonial footer {
	margin-top: 34px;
}

.mf-testimonial cite {
	display: inline-block;
	margin: 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--mf-amber);
	line-height: 1;
	color: var(--mf-brown);
	font-family: var(--mf-sans);
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

/* Over a photo band: white text. */
.mf-testimonial--light blockquote p,
.mf-testimonial--light cite {
	color: var(--mf-white, #fff);
}

.mf-testimonial--light cite {
	border-top-color: rgba(255, 255, 255, 0.7);
}

/* Where the wedding took place, under the couple's names. */
.mf-testimonial .mf-cite-place {
	display: block;
	margin-top: 10px;
	font-family: var(--mf-italic);
	font-size: 15px;
	font-style: italic;
	letter-spacing: 0.02em;
	text-transform: none;
}

/* Pull quote (her own words), brand italic */
.mf-pullquote blockquote {
	max-width: 470px;
	margin: 30px auto 28px;
	padding: 0;
	border: 0;
	text-align: center;
}

.mf-pullquote blockquote p {
	margin: 0;
	color: var(--mf-brown);
	font-family: var(--mf-italic);
	font-size: clamp(19px, 1.55vw, 23px);
	font-style: italic;
	line-height: 1.55;
}

/* VELT, her name for her way of working (her revision 05, 2026-10-26), in the Home's Meet block
   under her quote: "Set VELT as a small, understated heading. Place the subtitle beneath it in
   sentence case, with natural letter spacing and a restrained size." The heading (mf-velt) takes
   the block's own label style through the kit (as MEET and her role); the subtitle (mf-velt-line)
   is the title font in sentence case, at the size of a quiet lead line, so it reads as the
   heading's subtitle and not as a second quote. Two widgets of their own, so she can change each in
   Website Editor. */
.elementor-widget-heading.mf-velt .elementor-heading-title {
	line-height: 1.5;
}

.elementor-widget.mf-velt-line p {
	max-width: 400px;
	margin: 0 auto;
	color: var(--mf-brown);
	font-family: var(--mf-serif);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.01em;
	text-transform: none;
	text-wrap: balance;
}

@media (max-width: 767px) {
	.elementor-widget.mf-velt-line p {
		font-size: 16px;
	}
}

/* The parent theme styles blockquote cite as grey uppercase Raleway; her signature stays italic. */
.mf-pullquote cite {
	display: block;
	margin: 14px 0 0;
	padding: 0;
	color: var(--mf-amber);
	font-family: var(--mf-italic);
	font-size: 17px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-transform: none;
}

/* Enquiry form (Contact Form 7), styled like the theme's own contact form: small uppercase
   labels, underlined fields, a bordered message box. SEND ENQUIRY uses the primary CTA style. */
.mf-form {
	display: grid;
	gap: 30px;
}

.mf-form .mf-field {
	display: block;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Conditional groups: the plugin shows and hides them with an inline display, so the space
   between the fields inside a group comes from margins, not from the grid gap. After the
   rule above, which has the same weight. */
.mf-form [data-class="wpcf7cf_group"] > * + * {
	margin-top: 30px;
}

.mf-form .mf-field__label {
	display: block;
	margin: 0 0 10px;
	padding: 0;
	color: var(--mf-brown-2);
	font-family: var(--mf-sans);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.mf-form .mf-field__label::after {
	content: "*";
	margin-left: 2px;
}

/* Text sits 16px in from the edge of every field, as in the message box, so the lighter fill a
   field takes while in use (below) frames it. What is typed is spaced as the service names are
   (the parent theme spaces field text 2px apart, for its uppercase sans-serif). Every field's line
   is her stone, a soft beige, empty and filled in (her revision 04, after the test on two lines:
   "the second (Email address) in soft beige, para campo sem ação e tbm depois que casal preencher.
   Mantemos soft e calmo"); it was her brown. */
.mf-form input[type="text"],
.mf-form input[type="email"],
.mf-form select {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 8px 16px;
	border: 0;
	border-bottom: 1px solid var(--mf-stone);
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	color: var(--mf-brown);
	font-family: var(--mf-body);
	/* 16px: a phone zooms the page in on a field set smaller. */
	font-size: 16px;
	letter-spacing: 0.01em;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.mf-form select {
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2350463e' stroke-width='1.2'/%3E%3C/svg%3E");
	background-position: right 16px center;
	background-repeat: no-repeat;
	cursor: pointer;
}

.mf-form textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 160px;
	padding: 14px 16px;
	border: 1px solid var(--mf-stone);
	border-radius: 0;
	background-color: transparent;
	color: var(--mf-brown);
	font-family: var(--mf-body);
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.01em;
	resize: vertical;
	transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* The parent theme sets placeholders in uppercase spaced Raleway; hers read as a sentence, in her
   subheading brown (4.5:1 on the form's stone, 5.4:1 on the ivory of a field in use). The wedding
   date's example too (her revision 04: "pode clarear a escrita tbm pfvr, para ficar discreto"; it
   showed in black capitals). */
.mf-form input::placeholder,
.mf-form textarea::placeholder {
	color: var(--mf-brown-2);
	font-family: var(--mf-body);
	font-size: 15px;
	font-style: italic;
	letter-spacing: normal;
	text-transform: none;
}

/* Budget dropdowns (mf-select.js): the phone's own picker showed the ranges in small type
   (operator, 2026-10-01), so a button shaped like the other fields opens them right below it, in
   the site's type, after the PopHits.Co submission form's dropdowns. The select underneath stays
   hidden and keeps the answer. */
.mf-form select.mf-select__native {
	display: none;
}

.mf-form .mf-select {
	position: relative;
}

.mf-form .mf-select__button,
.mf-form .mf-select__button:hover {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 8px 16px;
	border: 0;
	border-bottom: 1px solid var(--mf-stone);
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	color: var(--mf-brown);
	font-family: var(--mf-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.01em;
	text-align: left;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Nothing chosen yet: the empty choice's words, as a hint like the message box's. */
.mf-form .mf-select__button.is-empty .mf-select__value {
	color: var(--mf-brown-2);
	font-size: 15px;
	font-style: italic;
}

.mf-form .mf-select__chevron {
	flex: 0 0 auto;
	transition: transform 0.3s ease;
}

.mf-form .mf-select.is-open .mf-select__chevron {
	transform: rotate(180deg);
}

/* 1px wider than the field on each side: on a fractional edge (phones) the next field's name would
   otherwise show a sliver beside the list. */
.mf-form .mf-select__list {
	position: absolute;
	top: 100%;
	right: -1px;
	left: -1px;
	z-index: 30;
	box-sizing: border-box;
	max-height: 70vh;
	margin: 0;
	padding: 6px 0;
	overflow-y: auto;
	border: 1px solid rgba(80, 70, 62, 0.18);
	border-top: 0;
	background-color: var(--mf-ivory);
	box-shadow: 0 18px 32px -14px rgba(80, 70, 62, 0.35);
	list-style: none;
}

.mf-form .mf-select__list[hidden] {
	display: none;
}

.mf-form .mf-select.is-open .mf-select__list {
	animation: mf-select-open 0.25s ease;
}

@keyframes mf-select-open {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.mf-form .mf-select__list:focus {
	outline: none;
}

.mf-form .mf-select__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 48px;
	margin: 0;
	padding: 10px 16px;
	color: var(--mf-brown);
	font-family: var(--mf-body);
	font-size: 16px;
	line-height: 1.35;
	letter-spacing: 0.01em;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

/* A shade of her stone under the pointer; moving with the keyboard (is-keyboard, set by the script),
   the range in focus also gets a fine accent line. Nothing is shaded on a tap: the list opens with
   the chosen range ticked only. */
@media (hover: hover) {
	.mf-form .mf-select__option:hover {
		background-color: rgba(170, 158, 148, 0.18);
	}
}

.mf-form .mf-select__list.is-keyboard .mf-select__option.is-active {
	background-color: rgba(170, 158, 148, 0.18);
	box-shadow: inset 2px 0 0 var(--mf-amber);
}

.mf-form .mf-select__tick {
	flex: 0 0 auto;
	visibility: hidden;
}

.mf-form .mf-select__option[aria-selected="true"] .mf-select__tick {
	visibility: visible;
}

.mf-form input:focus-visible,
.mf-form select:focus-visible,
.mf-form textarea:focus-visible {
	outline: 1px solid var(--mf-amber);
	outline-offset: 3px;
}

/* A field in use turns a lighter shade of her palette (operator, 2026-10-01): the form's stone
   gives way to her ivory, and its line takes a soft copper, her accent mixed with her ivory, at 1px
   (her revision 04: "ao clicar para preencher teria opção da linha copper mais claro, soft? ... Eu
   gosto d copper mas parece muito forte aqui nos forms"; it was her accent itself at 2px). 3.1:1 on
   the ivory, enough to mark the field for the keyboard too, so the outline above is left to the
   service choice and the button. Made from her accent, so it follows a change of her colours. */
.mf-form input[type="text"]:focus,
.mf-form input[type="email"]:focus,
.mf-form select:focus,
.mf-form .mf-select__button:focus,
.mf-form .mf-select.is-open .mf-select__button {
	border-bottom-color: #b48043;
	border-bottom-color: color-mix(in srgb, var(--mf-amber) 75%, var(--mf-ivory));
	outline: none;
	background-color: var(--mf-ivory);
	box-shadow: none;
}

.mf-form textarea:focus {
	border-color: #b48043;
	border-color: color-mix(in srgb, var(--mf-amber) 75%, var(--mf-ivory));
	outline: none;
	background-color: var(--mf-ivory);
}

@media (prefers-reduced-motion: reduce) {
	.mf-form input,
	.mf-form select,
	.mf-form textarea,
	.mf-form .mf-select__button,
	.mf-form .mf-select__chevron,
	.mf-form .mf-select__option {
		transition: none;
	}

	.mf-form .mf-select.is-open .mf-select__list {
		animation: none;
	}
}

.mf-form .wpcf7-radio {
	display: grid;
	gap: 10px;
}

.mf-form .wpcf7-list-item {
	margin: 0;
}

.mf-form .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 32px;
	color: var(--mf-brown);
	font-family: var(--mf-body);
	font-size: 16px;
	/* The parent theme uppercases labels; the services read as their names. */
	letter-spacing: 0.01em;
	text-transform: none;
	cursor: pointer;
}

/* The service choice: a small open circle with a fine line, filled with a dot when chosen, as the
   theme's own form draws it (her revision 02: the device's 16px radio looked large beside the
   template's, on the iPad and phones most of all). The whole name stays the place to tap. */
.mf-form input[type="radio"] {
	flex: none;
	box-sizing: border-box;
	width: 11px;
	height: 11px;
	min-height: 0;
	margin: 0;
	/* The parent theme pads every input; drawn by the site (appearance none), a radio would take it. */
	padding: 0;
	border: 1px solid var(--mf-brown);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.mf-form input[type="radio"]:checked {
	background: radial-gradient(circle, var(--mf-brown) 0 2.5px, transparent 3px);
}

.mf-form .wpcf7-not-valid-tip {
	margin-top: 8px;
	color: var(--mf-amber);
	font-family: var(--mf-sans);
	font-size: 12px;
	letter-spacing: 0.04em;
}

/* Under the button: what the details are used for, with the Privacy Policy. */
.mf-form .mf-form__privacy {
	margin: -8px 0 0;
	color: var(--mf-brown-2);
	font-family: var(--mf-body);
	font-size: 13px;
	font-style: italic;
	line-height: 1.5;
}

.mf-form .mf-form__privacy a {
	color: var(--mf-brown);
	text-decoration: underline;
	text-decoration-color: var(--mf-amber);
	text-underline-offset: 3px;
}

.mf-submit .wpcf7-submit {
	min-height: 48px;
	padding: 0 40px;
	border: 1px solid var(--mf-brown);
	border-radius: 0;
	background: transparent;
	color: var(--mf-brown);
	font-family: var(--mf-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.35s ease, color 0.35s ease;
}

.mf-submit .wpcf7-submit:hover,
.mf-submit .wpcf7-submit:focus-visible {
	background: var(--mf-brown);
	color: var(--mf-ivory);
}

.wpcf7 form .wpcf7-response-output {
	margin: 26px 0 0;
	padding: 14px 18px;
	border: 1px solid var(--mf-stone);
	color: var(--mf-brown);
	font-family: var(--mf-body);
	font-size: 14px;
}

.mf-enquiry-form .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--mf-brown);
}

/* Contact Form 7 colours these yellow, red and orange; the brand accent instead. */
.mf-enquiry-form .wpcf7 form.invalid .wpcf7-response-output,
.mf-enquiry-form .wpcf7 form.unaccepted .wpcf7-response-output,
.mf-enquiry-form .wpcf7 form.payment-required .wpcf7-response-output,
.mf-enquiry-form .wpcf7 form.failed .wpcf7-response-output,
.mf-enquiry-form .wpcf7 form.aborted .wpcf7-response-output,
.mf-enquiry-form .wpcf7 form.spam .wpcf7-response-output {
	border-color: var(--mf-amber);
}

/* A fine frame line inside a card, like her stationery (operator, 2026-10-01): the Studio Hours card
   (mf-card) and the text box over the Contact page's opening photo (mf-frame). The cards' colour and
   padding come from Elementor. */
.mf-card,
.mf-frame {
	outline: 1px solid rgba(80, 70, 62, 0.22);
	outline-offset: -12px;
}

/* Studio Hours sits on her light stone (the white satin behind it until her revision 02): a soft
   shadow lifts its card off it. */
.mf-card {
	box-shadow: 0 24px 48px -28px rgba(80, 70, 62, 0.3);
}

/* A title with one long word, kept whole on phones (her revision 05: "Texto está quebrando as
   palavras", INCONFUNDIVEL-MENTE on Sobre). At the kit's 36px the word is 418px wide and a phone
   gives it 272-366px, so its soft hyphen broke it; and the titles balance their lines, which took
   that break even where the word fits (the Home's, 26px). The hyphen is gone from the text, and on
   phones the size follows the screen, 7.4vw with 1px tracking at most the title's own size: the
   word is 0.785 of the screen plus 18px in a column 0.85 of it, so it stays whole from 320px up.
   Both languages carry the class, so their pages stay alike. */
@media (max-width: 767px) {
	.mf-fit-word {
		--e-global-typography-eaa4664-font-size: min(36px, 7.4vw);
		--e-global-typography-eaa4664-letter-spacing: 1px;
	}

	.elementor-widget-heading.mf-display.mf-fit-word .elementor-heading-title {
		font-size: min(26px, 7.4vw);
	}
}

/* Small tablets: below about 830px the opening title's longest line (CONVERSATION) is wider than its
   box's text area, so it ran off-centre into the padding and would touch the frame. There it scales
   with the screen (40.7px at 768px) up to her kit's 44px, through the kit's own size variable, so the
   title keeps its global style. */
@media (min-width: 768px) and (max-width: 1024px) {
	.mf-fit-title {
		--e-global-typography-eaa4664-font-size: min(44px, 5.3vw);
	}
}

@media (max-width: 767px) {
	.mf-card {
		outline-offset: -10px;
	}

	/* On phones the opening box is not a card: it is the page's own colour under the photo, edge to
	   edge, and the title comes within a few pixels of its sides. */
	.mf-frame {
		outline: none;
	}
}

/* Sections reached by an anchor stop below the fixed header: the Home service cards open
   /services/#..., a Lookbook card its gallery at #story and Back to Lookbook its card, the Journal's
   categories and pages the list (#stories). */
.e-con[id],
.mf-journal[id] {
	scroll-margin-top: 96px;
}

/* Pause button over the Home hero film (mf-hero-video.js): two thin bars, a small triangle when
   paused, in white and with no box around them (operator, 2026-10-01: the outlined square was too
   heavy for the site), like the logo band's button. A soft shadow keeps the
   bars clear over bright frames; the 40px square stays as the area to tap. Scoped to the film so the
   kit's button style cannot override it. */
.mf-hero-video .mf-video-toggle {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 3;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	opacity: 0.85;
	filter: drop-shadow(0 0 1px rgba(28, 22, 18, 0.55)) drop-shadow(0 0 5px rgba(28, 22, 18, 0.45));
	transition: opacity 0.3s ease;
}

.mf-hero-video .mf-video-toggle:hover,
.mf-hero-video .mf-video-toggle:focus-visible {
	background: transparent;
	opacity: 1;
}

.mf-hero-video .mf-video-toggle:focus-visible {
	outline: 1px solid #fff;
	outline-offset: -4px;
}

.mf-hero-video .mf-video-toggle::before,
.mf-hero-video .mf-video-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 2px;
	height: 12px;
	margin-top: -6px;
	background: currentColor;
}

.mf-hero-video .mf-video-toggle::before {
	left: 16px;
}

.mf-hero-video .mf-video-toggle::after {
	left: 22px;
}

.mf-hero-video .mf-video-toggle.is-paused::before {
	left: 16px;
	width: 0;
	height: 0;
	margin-top: -6px;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 10px solid currentColor;
	background: transparent;
}

.mf-hero-video .mf-video-toggle.is-paused::after {
	display: none;
}

/* Testimonials slider. The parent theme starts its own Slick slider (js/morgan.js: fade, a new
   quote every 8 seconds, arrows, dots) on .morgan-testimonials-container .morgan-testimonials-wrapper
   but ships no stylesheet for it: Slick's layout rules and the controls in the site's style are
   here. mf-testimonials.js names the arrows. No dots and no pause button (operator, 2026-10-01:
   useless beside the two arrows, which are the controls): the quotes change by themselves. */
/* Slick stacks its fading slides at z-index 998-999; isolation keeps that inside the slider, so a
   slide never paints over the open menu or the header (2026-10-02). */
.morgan-testimonials-wrapper.slick-slider {
	position: relative;
	isolation: isolate;
	display: block;
	box-sizing: border-box;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}

.morgan-testimonials-wrapper .slick-list {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

/* All quotes in one row; a shorter quote sits centred against the longest, so nothing jumps. */
.morgan-testimonials-wrapper .slick-track {
	position: relative;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
}

.morgan-testimonials-wrapper .slick-slide {
	flex-shrink: 0;
	min-height: 1px;
}

.morgan-testimonials-wrapper .slick-slide:focus {
	outline: none;
}

/* Until the slider starts, only the first quote shows. */
.morgan-testimonials-wrapper:not(.slick-initialized) > .mf-testimonial + .mf-testimonial {
	display: none;
}

.morgan-testimonials-wrapper .slick-arrow {
	position: absolute;
	top: calc(50% - 22px);
	z-index: 2;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--mf-brown);
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	transition: color 0.3s ease;
}

.morgan-testimonials-wrapper .slick-prev {
	left: -90px;
}

.morgan-testimonials-wrapper .slick-next {
	right: -90px;
}

.morgan-testimonials-wrapper .slick-arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	border-bottom: 1px solid currentColor;
	border-left: 1px solid currentColor;
}

.morgan-testimonials-wrapper .slick-prev::before {
	transform: translate(-30%, -50%) rotate(45deg);
}

.morgan-testimonials-wrapper .slick-next::before {
	transform: translate(-70%, -50%) rotate(-135deg);
}

/* Slick writes display: block on the dots itself, so only !important hides them. */
.morgan-testimonials-wrapper .slick-dots {
	display: none !important;
}

/* The logo band's pause button (mf-ticker.js). */
.mf-slider-toggle {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--mf-brown);
	font-size: 0;
	line-height: 0;
	cursor: pointer;
}

/* Pause: two bars; paused (play): a small triangle. */
.mf-slider-toggle::before,
.mf-slider-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 2px;
	height: 10px;
	margin-top: -5px;
	background: currentColor;
}

.mf-slider-toggle::before {
	left: 9px;
}

.mf-slider-toggle::after {
	left: 13px;
}

.mf-slider-toggle.is-paused::before {
	left: 9px;
	width: 0;
	height: 0;
	margin-top: -6px;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 9px solid currentColor;
	background: transparent;
}

.mf-slider-toggle.is-paused::after {
	display: none;
}

.morgan-testimonials-wrapper .slick-arrow:hover,
.morgan-testimonials-wrapper .slick-arrow:focus-visible,
.mf-slider-toggle:hover,
.mf-slider-toggle:focus-visible {
	color: var(--mf-amber);
}

.morgan-testimonials-wrapper .slick-arrow:focus-visible,
.mf-slider-toggle:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 2px;
}

/* Arrows under an image carousel, in place of its dots (mf-carousel.js; the Home's Lookbook covers,
   operator, 2026-10-01): two fine long arrows, like the one in the site's text links, in her
   subheading brown and her accent on hover, nudging the way they point; 44px to tap, centred under
   the covers where the dots were. */
.mf-carousel-nav {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 13px;
}

.mf-carousel-nav button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--mf-brown-2);
	line-height: 0;
	cursor: pointer;
	transition: color 0.3s ease;
}

.mf-carousel-nav svg {
	transition: transform 0.35s ease;
}

.mf-carousel-nav button:hover,
.mf-carousel-nav button:focus-visible {
	background: transparent;
	color: var(--mf-amber);
}

.mf-carousel-nav .mf-carousel-nav__prev:hover svg {
	transform: translateX(-3px);
}

.mf-carousel-nav .mf-carousel-nav__next:hover svg {
	transform: translateX(3px);
}

.mf-carousel-nav button:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
	.mf-carousel-nav svg {
		transition: none;
	}
}

/* Logo ticker ([mf_press_ticker]; on the Home between Services and the Lookbook, other pages to
   come): inside the theme demo's marquee band (its stone container, 20px above and below the line:
   tools/elementor_build.py ticker_band()), the publications' logos in her main brown (6.2:1 on the
   stone), moving right to left by themselves; mf-ticker.js fills the line and adds the pause
   button (.mf-slider-toggle) at the end of the band. Until the script runs, or without it,
   the four logos stand still where the moving line starts, on one line, so nothing jumps when it
   starts (a band placed high on a page would otherwise shift the layout). The line fades in and
   out at the edges, so no logo is cut against the button. */
.mf-ticker {
	display: flex;
	align-items: center;
	gap: 8px;
	/* The pause button's height from the start: the band does not grow when it appears. */
	min-height: 24px;
	color: var(--mf-brown);
}

.mf-ticker__viewport {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
	mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

.mf-ticker__track {
	display: flex;
	align-items: center;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mf-ticker .mf-press {
	flex: none;
	margin: 0;
	padding: 0 var(--mf-ticker-space, 36px);
	line-height: 0;
}

.mf-ticker.is-running .mf-ticker__track {
	animation: mf-ticker var(--mf-ticker-duration, 40s) linear infinite;
}

.mf-ticker.is-paused .mf-ticker__track {
	animation-play-state: paused;
}

@keyframes mf-ticker {
	to {
		transform: translateX(-50%);
	}
}

.mf-ticker__toggle {
	flex: none;
	margin-right: var(--mf-gutter);
}

@media (max-width: 599px) {
	.mf-ticker {
		--mf-ticker-space: 26px;
	}

	.mf-ticker .mf-press {
		--mf-press-scale: 0.85;
	}

	.mf-ticker__viewport {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
		mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
	}
}

@media (max-width: 1024px) {
	/* Tablets: the arrows in the margins beside the quote (each margin is 7.5% of the screen: the
	   arrow sits in its middle, 22px or more clear of the text). */
	.morgan-testimonials-wrapper .slick-prev {
		left: calc(-4.4% - 22px);
	}

	.morgan-testimonials-wrapper .slick-next {
		right: calc(-4.4% - 22px);
	}

	/* The fixed-image bands (the photo stays still while the page scrolls over it). Elementor sets
	   the fixed background for desktop only and phones do not support one (iPhones never do), so
	   here the same effect comes from a fixed layer clipped to the band. */
	.mf-parallax {
		clip-path: inset(0);
		background-size: 0 0 !important;
	}

	.mf-parallax::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: -1;
		background-image: inherit;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		pointer-events: none;
	}
}

/* Phones: no room beside the quote (28-34px), so the two arrows sit under the names, centred, where
   the dots were. */
@media (max-width: 767px) {
	.morgan-testimonials-wrapper.slick-slider {
		padding-bottom: 76px;
	}

	.morgan-testimonials-wrapper .slick-arrow {
		top: auto;
		bottom: 0;
	}

	.morgan-testimonials-wrapper .slick-prev {
		left: calc(50% - 52px);
	}

	.morgan-testimonials-wrapper .slick-next {
		right: calc(50% - 52px);
	}
}

@media (max-width: 480px) {
	.mf-statement p {
		letter-spacing: 0.06em;
		font-size: 3.55vw;
	}

	.mf-cta--primary .elementor-button {
		padding: 0 26px;
	}
}