/*
 * Global site edits. Colours and type are Elementor Global Colours / Global Fonts (Site Settings);
 * these aliases let theme CSS use the same values, with the design-direction hex as fallback.
 */

body {
	--sn-walnut: var(--e-global-color-walnut, #16120f);
	--sn-umber: var(--e-global-color-umber, #211b17);
	--sn-plaster: var(--e-global-color-primary, #ede6da);
	--sn-stone: var(--e-global-color-secondary, #a69d90);
	--sn-body: var(--e-global-color-text, #d5c9b8);
	--sn-brass: var(--e-global-color-accent, #b89a63);
	--sn-hairline: var(--e-global-color-hairline, #ede6da24);

	/* Page gutter; matches the header and footer padding set in Elementor (72 / 40 / 20). */
	--sn-gutter: 72px;
	--sn-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media (max-width: 1024px) {
	body { --sn-gutter: 40px; }
}

@media (max-width: 767px) {
	body { --sn-gutter: 20px; }
}

::selection {
	background: var(--sn-brass);
	color: var(--sn-walnut);
}

:focus-visible {
	outline: 2px solid var(--sn-brass);
	outline-offset: 3px;
}

/* sn-reveal (site.js): the frame clips the photograph while it zooms and drifts. */
.sn-reveal .elementor-widget-container,
.sn-reveal:not(:has(.elementor-widget-container)) {
	overflow: hidden;
}

.sn-reveal img {
	display: block;
	will-change: transform;
	/* `scale` composes with the transform GSAP drives, so hover and scroll never fight. */
	transition: scale 0.7s cubic-bezier(0, 0, 0.2, 1);
}

.sn-reveal:hover img {
	scale: 1.03;
}

/* Opening sentence: balanced lines so no single word is left hanging. */
.sn-scrub .elementor-heading-title {
	text-wrap: balance;
}

/* Logo (inline SVG from inc/logo.php) */

.sn-logo {
	display: block;
	width: auto;
	height: 44px;
	overflow: visible;
}

.sn-logo__monogram {
	fill: var(--sn-logo-monogram, currentColor);
}

.sn-logo-wrap {
	display: inline-flex;
	color: inherit;
}

/* Header: solid walnut by default; transparent and fixed over a hero photograph until it scrolls away. */

.elementor-location-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background-color: var(--sn-walnut);
	transition: background-color 0.5s var(--sn-ease-out), box-shadow 0.5s var(--sn-ease-out), transform 0.7s var(--sn-ease-out);
}

.elementor-location-header.is-hidden:not(:focus-within) {
	transform: translateY(-100%);
}

.elementor-location-header.is-scrolled {
	box-shadow: inset 0 -1px 0 var(--sn-hairline);
}

body:has(.sn-hero) .elementor-location-header {
	position: fixed;
	inset-inline: 0;
}

body:has(.sn-hero) .elementor-location-header:not(.is-scrolled) {
	background-color: transparent;
}

/* Text link (add class sn-link to a Heading widget with a link): a hairline drawn on hover. */

.sn-link .elementor-heading-title a {
	position: relative;
	display: inline-block;
	padding-block: 10px;
	color: inherit;
}

.sn-link .elementor-heading-title a::after {
	content: "";
	position: absolute;
	inset: auto 0 6px;
	height: 1px;
	background: currentColor;
	opacity: 0.4;
	transform-origin: 100% 50%;
	transition: transform 0.6s var(--sn-ease-out), opacity 0.6s var(--sn-ease-out), background-color 0.3s;
}

.sn-link .elementor-heading-title a:hover::after,
.sn-link .elementor-heading-title a:focus-visible::after {
	background: var(--sn-brass);
	opacity: 1;
	animation: sn-link-draw 0.7s var(--sn-ease-out);
}

@keyframes sn-link-draw {
	from { transform: scaleX(0); transform-origin: 0 50%; }
	to { transform: scaleX(1); transform-origin: 0 50%; }
}

/* Contact form (Elementor Pro Form with class sn-form): ruled fields on the dark ground,
   no boxes; small tracked labels; the send button matches the call to action. */

.sn-form .elementor-field-group {
	margin-bottom: 28px;
}

.sn-form .elementor-field-label {
	margin-bottom: 10px;
	color: var(--sn-stone);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.sn-form .elementor-field-group .elementor-field-textual {
	min-height: 48px;
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid color-mix(in oklch, var(--sn-plaster) 32%, transparent);
	border-radius: 0;
	background: transparent;
	color: var(--sn-plaster);
	font-family: var(--e-global-typography-text-font-family, "Hanken Grotesk"), sans-serif;
	font-size: 17px;
	transition: border-color 0.4s var(--sn-ease-out);
}

.sn-form .elementor-field-group .elementor-field-textual:focus {
	border-bottom-color: var(--sn-brass);
	outline: none;
	box-shadow: none;
}

.sn-form .elementor-field-group .elementor-field-textual:focus-visible {
	outline: 2px solid var(--sn-brass);
	outline-offset: 6px;
}

.sn-form textarea.elementor-field-textual {
	resize: vertical;
}

.sn-form .elementor-button {
	min-height: 56px;
	padding: 20px 44px;
	border: 0;
	border-radius: 999px;
	background: var(--sn-plaster);
	color: var(--sn-walnut);
	font-family: var(--e-global-typography-accent-font-family, "Hanken Grotesk"), sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	transition: background-color 0.4s var(--sn-ease-out);
}

.sn-form .elementor-button:hover,
.sn-form .elementor-button:focus-visible {
	background: var(--sn-brass);
	color: var(--sn-walnut);
}

.sn-form .elementor-field-type-submit {
	margin-top: 12px;
}

.sn-form .elementor-message {
	color: var(--sn-plaster);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Menu: Work | About | Bio | Contact — a short hairline between items. Elementor splits the item
   spacing evenly either side of each item's edge, so the edge is the middle of the gap. */

.sn-header .elementor-nav-menu--main .elementor-nav-menu > li + li {
	position: relative;
}

.sn-header .elementor-nav-menu--main .elementor-nav-menu > li + li::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 0.95em;
	background: color-mix(in oklch, currentColor 45%, transparent);
	color: var(--sn-plaster);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* Home page on desktop: the slideshow is the whole page — no scrolling, no footer. Its other
   sections are set to "Hide on Desktop" in Elementor and make up the mobile home page. */

@media (min-width: 1025px) {
	html:has(body.home),
	body.home {
		overflow: hidden;
	}

	body.home .elementor-location-footer {
		display: none;
	}
}

/* Sections the menu jumps to land just below the top edge (the header hides while scrolling down). */
.sn-anchor {
	scroll-margin-top: 24px;
}

/* Photo viewer (Elementor lightbox): the arrows' positioning lives in Elementor's carousel styles,
   which these pages don't load, so it is set here. Full-height tap zones at each side. */
.elementor-lightbox .swiper .elementor-swiper-button {
	position: absolute;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	height: 100%;
	cursor: pointer;
}

.elementor-lightbox .swiper .elementor-swiper-button-prev {
	left: 0;
	justify-content: flex-start;
	padding-left: clamp(12px, 2vw, 32px);
}

.elementor-lightbox .swiper .elementor-swiper-button-next {
	right: 0;
	justify-content: flex-end;
	padding-right: clamp(12px, 2vw, 32px);
}

.elementor-lightbox .elementor-swiper-button svg {
	width: 28px;
	height: 28px;
}

/* Looping film on Work (Video widget with class sn-loop): same soft corners as the galleries,
   and a small text control in the corner that site.js adds. */
.sn-loop .elementor-widget-container,
.sn-loop.elementor-widget {
	position: relative;
}

.sn-loop video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 5px;
	background: var(--sn-umber, #211b17);
}

.sn-loop .elementor-wrapper {
	border-radius: 5px;
	overflow: hidden;
}

.sn-loop .sn-loop__toggle {
	position: absolute;
	right: 12px;
	bottom: 12px;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 0;
	border-radius: 999px;
	background: color-mix(in oklch, var(--sn-walnut, #14100d) 55%, transparent);
	color: var(--sn-plaster, #efe6d8);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.3s;
}

.sn-loop .sn-loop__toggle:hover,
.sn-loop .sn-loop__toggle:focus-visible {
	background: color-mix(in oklch, var(--sn-walnut, #14100d) 85%, transparent);
	color: var(--sn-plaster, #efe6d8);
}

/* Line masks from SplitText (linesClass sn-line): display type sits at a line-height under 1, so
   descenders (g, y, p) fall outside the line box. The mask reaches below and above the line without
   moving it, so nothing is clipped once the line has risen into place. */
.sn-line-mask {
	padding: 0.08em 0 0.22em;
	margin: -0.08em 0 -0.22em;
}