/* Paula Mastra widgets. Loaded only on pages that use them. Sizes use the
   design-pixel unit --pm-u from theme.css. */

/* Shared button reset (Hello Elementor styles buttons pink by default). Kept at
   single-class specificity so component rules below (.pm-more, .pm-filter__btn…) win;
   this file loads after Hello's, which settles the tie with its [type=button] rules. */
.pm-reset {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	color: inherit;
	font: inherit;
	text-transform: inherit;
	white-space: normal;
	cursor: pointer;
	box-shadow: none;
}
.pm-reset:hover, .pm-reset:focus { background: none; color: inherit; box-shadow: none; }

.pm-media { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Beat Elementor's ".elementor img { height: auto }" so pictures fill their frames. */
:is(.pm-strip__media, .pm-card__media, .pm-post__media) .pm-media { height: 100%; max-width: none; }
.pm-media--empty { background: #eee; }

/* ---------- Menu ---------- */
.pm-nav__list { display: flex; gap: calc(80 * var(--pm-u)); margin: 0; padding: 0; list-style: none; }
.pm-nav__list a {
	display: block;
	text-decoration: none;
	font-size: calc(21 * var(--pm-u));
	line-height: calc(26 / 21);
	text-transform: uppercase;
	letter-spacing: .02em;
}
.pm-nav__list a.is-current { font-weight: 700; }
.pm-nav__list a:hover { opacity: .55; }
.pm-nav__toggle, .pm-nav__overlay { display: none; }

@media (max-width: 767px) {
	.pm-nav__list { display: none; }
	.pm-nav__toggle {
		display: block;
		position: relative;
		width: calc(31 * var(--pm-u));
		height: calc(23 * var(--pm-u));
	}
	.pm-nav__bars, .pm-nav__bars::before, .pm-nav__bars::after {
		position: absolute;
		left: 0;
		width: 100%;
		height: calc(2.8 * var(--pm-u));
		background: var(--pm-ink);
		content: "";
	}
	.pm-nav__bars { top: 50%; transform: translateY(-50%); }
	.pm-nav__bars::before { top: calc(-10 * var(--pm-u)); }
	.pm-nav__bars::after { top: calc(10 * var(--pm-u)); }

	.pm-nav__overlay:not([hidden]) {
		display: flex;
		position: fixed;
		inset: 0;
		z-index: 9999;
		flex-direction: column;
		align-items: center;
		padding-top: calc(113 * var(--pm-u));
		background: #000;
		color: #fff;
		overflow-y: auto;
		animation: pm-overlay .35s var(--pm-ease) both;
	}
	.pm-nav__logo { display: block; width: calc(306 * var(--pm-u)); }
	.pm-nav__logo img { display: block; width: 100%; filter: invert(1); }
	.pm-nav__menu { margin: calc(98 * var(--pm-u)) 0 0; padding: 0; list-style: none; text-align: center; }
	.pm-nav__menu li + li { margin-top: calc(47 * var(--pm-u)); }
	.pm-nav__menu a {
		color: #fff;
		text-decoration: none;
		font-size: calc(24 * var(--pm-u));
		line-height: calc(30 / 24);
		text-transform: uppercase;
		letter-spacing: .04em;
	}
	.pm-nav__close {
		position: absolute;
		top: calc(23 * var(--pm-u));
		right: calc(22 * var(--pm-u));
		width: calc(26 * var(--pm-u));
		height: calc(26 * var(--pm-u));
	}
	.pm-nav__close span[aria-hidden]::before, .pm-nav__close span[aria-hidden]::after {
		position: absolute;
		top: 50%;
		left: -15%;
		width: 130%;
		height: calc(2.4 * var(--pm-u));
		background: #fff;
		content: "";
		transform: rotate(45deg);
	}
	.pm-nav__close span[aria-hidden]::after { transform: rotate(-45deg); }
}
@keyframes pm-overlay { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Project carousel ---------- */
.pm-strip { --s: calc(100vw / 1920); overflow: hidden; }
@media (max-width: 1024px) { .pm-strip { --s: calc(100vw / 1366); } }
@media (max-width: 767px)  { .pm-strip { --s: calc(.75 * 100vw / 374); } } /* mobile slides are 75% of desktop */
.pm-strip__track {
	display: flex;
	width: max-content;
	animation: pm-marquee var(--pm-duration, 45s) linear infinite;
	will-change: transform;
}
.pm-strip--reverse .pm-strip__track { animation-direction: reverse; }
.pm-strip--pause:hover .pm-strip__track { animation-play-state: paused; }
.pm-strip__group { display: flex; align-items: flex-end; }
.pm-strip__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding-right: calc(var(--pm-gap, 12) * var(--s));
}
.pm-strip__label {
	margin: 0 0 calc(32 * var(--pm-u));
	font-style: normal; /* Hello's reset makes every figcaption italic and grey */
	font-weight: 400;
	color: var(--pm-ink);
	font-family: "Kranto Normal", "Kranto Text", sans-serif;
	font-size: calc(24 * var(--pm-u));
	line-height: calc(26 / 24);
	text-align: center;
	white-space: nowrap;
}
.pm-strip__media { display: block; width: calc(var(--w) * var(--s)); height: calc(var(--h) * var(--s)); overflow: hidden; }
.pm-strip__media .pm-media { transition: transform .8s var(--pm-ease); }
a.pm-strip__media:hover .pm-media { transform: scale(1.03); }
@keyframes pm-marquee { to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 767px) { .pm-strip__label { margin-bottom: calc(17 * var(--pm-u)); } }
@media (prefers-reduced-motion: reduce) {
	.pm-strip { overflow-x: auto; }
	.pm-strip__track { animation: none; }
	.pm-strip__group[aria-hidden] { display: none; }
}

/* ---------- Work grid ---------- */
.pm-filter { display: flex; flex-wrap: wrap; column-gap: calc(64 * var(--pm-u)); row-gap: .3em; margin-bottom: calc(55 * var(--pm-u)); }
.pm-filter__btn {
	font-size: calc(28 * var(--pm-u));
	line-height: calc(42 / 28);
	transition: color .25s ease;
}
button.pm-filter__btn { color: var(--pm-muted); }
button.pm-filter__btn.is-active, button.pm-filter__btn:hover { color: var(--pm-ink); }
@media (max-width: 767px) {
	.pm-filter--hide-m { display: none; }
	.pm-filter__btn { font-size: calc(20 * var(--pm-u)); }
}

.pm-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: calc(8 * var(--pm-u));
	row-gap: calc(65 * var(--pm-u));
}
@media (max-width: 1024px) { .pm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .pm-grid { grid-template-columns: minmax(0, 1fr); row-gap: calc(32 * var(--pm-u)); } }
.pm-card.is-hidden { display: none; }
.pm-card.pm-reveal { animation: pm-fade-up .7s var(--pm-ease) both; }
.pm-card__link { display: block; text-decoration: none; }
.pm-card__media { position: relative; aspect-ratio: 605 / 547; overflow: hidden; background: #f1eeee; }
@media (max-width: 767px) { .pm-card__media { aspect-ratio: 343 / 331; } }
.pm-card__media .pm-media { position: absolute; inset: 0; transition: transform .9s var(--pm-ease); }
.pm-card__link:hover .pm-media { transform: scale(1.025); }
/* Project types on hover: a light label so it reads on any photo. */
.pm-card__tags {
	position: absolute;
	z-index: 1;
	top: calc(16 * var(--pm-u));
	left: calc(16 * var(--pm-u));
	max-width: calc(100% - 32 * var(--pm-u));
	padding: calc(7 * var(--pm-u)) calc(14 * var(--pm-u));
	background: rgba(253, 252, 250, .92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: calc(20 * var(--pm-u));
	line-height: 1.2;
	color: var(--pm-ink);
	opacity: 0;
	transform: translateY(calc(-6 * var(--pm-u)));
	transition: opacity .35s ease, transform .35s var(--pm-ease);
	pointer-events: none;
}
.pm-card__link:hover .pm-card__tags, .pm-card__link:focus-visible .pm-card__tags { opacity: 1; transform: none; }
.pm-card__title, .pm-card__sub {
	margin: 0;
	font-family: inherit;
	font-size: calc(28 * var(--pm-u));
	line-height: calc(35 / 28);
	color: var(--pm-ink);
}
.pm-card__title { margin-top: calc(12 * var(--pm-u)); font-weight: 700; }
.pm-card__sub { font-weight: 400; }
@media (max-width: 767px) {
	.pm-card__title, .pm-card__sub { font-size: calc(20 * var(--pm-u)); line-height: calc(24 / 20); }
	.pm-card__title { margin-top: calc(11 * var(--pm-u)); }
	.pm-card__tags { display: none; }
}

/* "See more work" / "Load more" */
.pm-more {
	display: table;
	margin: calc(120 * var(--pm-u)) auto 0;
	font-size: calc(28 * var(--pm-u));
	line-height: calc(38 / 28);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--pm-ink);
	transition: opacity .25s ease;
}
.pm-more:hover { opacity: .55; }
.pm-more[hidden] { display: none; }
@media (max-width: 767px) { .pm-more { margin-top: calc(80 * var(--pm-u)); font-size: calc(24 * var(--pm-u)); } }

/* ---------- Journal list ---------- */
.pm-journal__list { display: grid; row-gap: calc(64 * var(--pm-u)); }
.pm-post {
	display: grid;
	grid-template-columns: calc(547 * var(--pm-u)) minmax(0, calc(913 * var(--pm-u)));
	column-gap: calc(73 * var(--pm-u));
	align-items: start;
}
.pm-post.pm-reveal { animation: pm-fade-up .7s var(--pm-ease) both; }
.pm-post__media { display: block; aspect-ratio: 547 / 422; overflow: hidden; background: #f1eeee; }
.pm-post__media .pm-media { transition: transform .9s var(--pm-ease); }
.pm-post:hover .pm-post__media .pm-media { transform: scale(1.025); }
.pm-post__title {
	margin: 0 0 calc(10 * var(--pm-u));
	font-family: inherit;
	font-weight: 700;
	font-size: calc(42 * var(--pm-u));
	line-height: 1;
	color: var(--pm-ink);
}
.pm-post__title a { text-decoration: none; }
.pm-post__date {
	display: block;
	font-style: italic;
	font-size: calc(20 * var(--pm-u));
	line-height: calc(37 / 20);
	color: #242323;
}
.pm-post__excerpt { font-size: calc(28 * var(--pm-u)); line-height: calc(38 / 28); }
.pm-post__excerpt p { margin: 0 0 .4em; }
.pm-post__more {
	display: inline-block;
	font-weight: 700;
	font-size: calc(28 * var(--pm-u));
	line-height: calc(38 / 28);
	text-decoration: underline;
	text-underline-offset: .12em;
	text-decoration-thickness: 1px;
}
.pm-post__title a:hover, .pm-post__more:hover { opacity: .55; }
.pm-journal__next { margin: calc(80 * var(--pm-u)) 0 0 calc(620 * var(--pm-u)); }
.pm-journal__next[aria-busy] { opacity: .4; pointer-events: none; }
@media (max-width: 767px) {
	.pm-journal__list { row-gap: calc(60 * var(--pm-u)); }
	.pm-post { grid-template-columns: minmax(0, 1fr); }
	.pm-post__media { aspect-ratio: 344 / 265; margin-bottom: calc(16 * var(--pm-u)); }
	.pm-post__title { font-size: calc(28 * var(--pm-u)); line-height: calc(32 / 28); margin-bottom: calc(2 * var(--pm-u)); }
	.pm-post__date { font-size: calc(15 * var(--pm-u)); line-height: calc(23 / 15); }
	.pm-post__excerpt, .pm-post__more { font-size: calc(20 * var(--pm-u)); line-height: calc(24 / 20); }
	.pm-journal__next { margin: calc(100 * var(--pm-u)) auto 0; }
}

/* ---------- Newsletter ---------- */
/* Footer: the newsletter column starts on the first text line, as in the design. */
@media (min-width: 768px) {
	.pm-site-footer .e-con:has(> .elementor-widget-pm-newsletter) { padding-top: calc(79 * var(--pm-u)); }
}
.elementor-widget-pm-newsletter { margin-bottom: calc(18 * var(--pm-u)); }
.pm-news { position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--pm-ink); }
.pm-news input[type=email] {
	flex: 1;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-family: inherit;
	font-size: calc(28 * var(--pm-u));
	line-height: calc(38 / 28);
	color: var(--pm-ink);
	outline-offset: 2px;
}
.pm-news input[type=email]:focus { border: 0; box-shadow: none; }
/* Browser autofill would paint the field light blue. */
.pm-news input[type=email]:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--pm-bg) inset; -webkit-text-fill-color: var(--pm-ink); transition: background-color 9999s; }
.pm-news input::placeholder { color: var(--pm-placeholder); opacity: 1; }
.pm-news__submit { font-size: calc(35 * var(--pm-u)); line-height: 1; padding: 0 0 0 .3em; }
button.pm-news__submit:hover { opacity: .55; }
.pm-news__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pm-news__msg { margin: calc(10 * var(--pm-u)) 0 0; font-size: calc(20 * var(--pm-u)); line-height: 1.3; color: var(--pm-ink); }
.pm-news__msg.is-error { color: #b3261e; }
.pm-news__msg:empty { display: none; }
@media (max-width: 767px) {
	.pm-news input[type=email] { font-size: calc(24 * var(--pm-u)); }
	.pm-news__submit { font-size: calc(24 * var(--pm-u)); }
	.pm-news__msg { font-size: calc(16 * var(--pm-u)); }
}

/* Elementor resets link underlines; the design underlines "Read article". */
.pm-journal a.pm-post__more { text-decoration: underline; }

/* Chrome under-measures a flex item whose grid holds aspect-ratio cards unless its width is definite;
   without this the footer overlaps the project list on phones. */
.e-con > .elementor-widget-pm-work-grid { width: 100%; }