/*
Theme Name: See Fate
Theme URI: https://www.seefatephotography.com/
Description: Photography theme for See Fate Photography, rebuilt from the original Wix design. Child of Twenty Twenty-Five.
Author: See Fate Photography
Template: twentytwentyfive
Version: 1.0.7
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seefate
*/

/* ------------------------------------------------------------------
   1. Page shell
------------------------------------------------------------------ */

:root {
	--sf-ink: #292929;
	--sf-line: #dedede;
	--sf-magenta: #9c037b;
	--sf-pink: #f8a7e6;
	--sf-dark: #0e0e0e;
	--sf-header-h: 62px;
	--sf-track: 0.38em;
}

body {
	background: #fff;
	color: var(--sf-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* The original site runs its galleries edge to edge, so the page itself
   never adds side padding — individual blocks opt in instead. */
.wp-site-blocks {
	padding-left: 0;
	padding-right: 0;
	overflow-x: clip;
}

/* ------------------------------------------------------------------
   2. Header
------------------------------------------------------------------ */

.sf-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid #f0f0f0;
	min-height: var(--sf-header-h);
	padding: 0 clamp(16px, 4vw, 48px);
}

.sf-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: clamp(15px, 1.35vw, 23px);
	letter-spacing: 0.01em;
}

.sf-header .wp-block-navigation__container {
	gap: clamp(18px, 5vw, 90px);
}

.sf-header .wp-block-navigation-item__content {
	color: #000;
	text-decoration: none;
	padding: 18px 0;
	transition: color 0.18s ease;
}

.sf-header .wp-block-navigation-item__content:hover,
.sf-header .wp-block-navigation-item__content:focus-visible {
	color: var(--sf-magenta);
	text-decoration: none;
}

/* Wix marks the page you are on in magenta. */
.sf-header .current-menu-item > .wp-block-navigation-item__content,
.sf-header .current_page_item > .wp-block-navigation-item__content,
.sf-header .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--sf-magenta);
}

.sf-header .wp-block-navigation__responsive-container.is-menu-open {
	background: #fff;
	padding: 32px;
}

.sf-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	color: #000;
	font-size: 22px;
}

/* ------------------------------------------------------------------
   3. Display type
------------------------------------------------------------------ */

.sf-display,
.sf-page-title,
.sf-hero__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--sf-track);
	line-height: 1.12;
	/* The tracking is applied to the right of every glyph, including the
	   last one, so pull it back to keep the line optically centred. */
	margin-right: calc(var(--sf-track) * -1);
}

.sf-page-title {
	font-size: clamp(22px, 4.2vw, 52px);
	color: #000;
	text-align: center;
	margin: clamp(40px, 7vw, 92px) auto clamp(28px, 4vw, 52px);
	padding: 0 24px;
	max-width: 1400px;
	overflow-wrap: break-word;
}

.sf-eyebrow {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--sf-track);
	margin-right: calc(var(--sf-track) * -1);
	font-size: clamp(12px, 1.6vw, 22px);
	color: var(--sf-pink);
}

/* Album pages are written as: h1 + gallery. Style that h1 without
   needing every page to carry a class. */
.sf-page-content > h1:first-child,
.entry-content > h1:first-child {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--sf-track);
	margin-right: calc(var(--sf-track) * -1);
	font-size: clamp(22px, 4.2vw, 52px);
	line-height: 1.12;
	color: #000;
	text-align: center;
	margin-top: clamp(40px, 7vw, 92px);
	margin-bottom: clamp(28px, 4vw, 52px);
	padding: 0 24px;
	overflow-wrap: break-word;
}

.sf-page-content {
	width: 100%;
	max-width: none;
}

/* ------------------------------------------------------------------
   4. Body copy
------------------------------------------------------------------ */

.sf-page-content p,
.entry-content p {
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
	padding: 0 24px;
	font-size: clamp(16px, 1.3vw, 20px);
	line-height: 1.72;
	color: var(--sf-ink);
}

.sf-page-content h2,
.entry-content h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: clamp(17px, 2.1vw, 26px);
	text-align: center;
	color: #000;
	margin: clamp(48px, 6vw, 84px) auto clamp(20px, 2.5vw, 32px);
	padding: 0 24px;
}

a {
	color: var(--sf-magenta);
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------
   5. Galleries — edge to edge, no gutters, like the original
------------------------------------------------------------------ */

.wp-block-gallery.has-nested-images,
.wp-block-gallery.has-nested-images.columns-2,
.wp-block-gallery.has-nested-images.columns-3,
.wp-block-gallery.has-nested-images.columns-4 {
	/* Core derives the gutter from this variable, so zero it at the source
	   rather than fighting the gap it writes out. */
	--wp--style--unstable-gallery-gap: 0px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 0;
	width: 100%;
	max-width: none;
	margin: 0;
}

@media (min-width: 1400px) {
	.wp-block-gallery.has-nested-images,
	.wp-block-gallery.has-nested-images.columns-3 {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}
}

/* Core sizes each tile with
   `.wp-block-gallery.has-nested-images.columns-N figure.wp-block-image:not(#individual-image)`
   — the :not(#id) is core's own specificity boost. The selectors below repeat
   a class and reuse that same guard so one grid cell holds one whole photo. */
.wp-block-gallery.wp-block-gallery.has-nested-images.has-nested-images
	figure.wp-block-image:not(#individual-image) {
	margin: 0;
	width: 100%;
	max-width: none;
	flex: none;
	position: relative;
	overflow: hidden;
	background: #f4f4f4;
}

.wp-block-gallery.wp-block-gallery.has-nested-images.has-nested-images
	figure.wp-block-image:not(#individual-image) img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	flex: none;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
		filter 0.4s ease;
}

@media (hover: hover) {
	.wp-block-gallery.has-nested-images figure.wp-block-image:hover img {
		transform: scale(1.045);
	}
}

/* Captions are used on the Projects index as album labels. They cover the
   whole tile, so they must not swallow the click meant for the link under
   them. */
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: absolute;
	inset: 0;
	margin: 0;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 18px;
	background: rgba(0, 0, 0, 0.52);
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: clamp(11px, 1vw, 14px);
	line-height: 1.5;
	opacity: 0;
	transition: opacity 0.3s ease;
	overflow: hidden;
}

@media (hover: hover) {
	.wp-block-gallery.has-nested-images
		figure.wp-block-image:hover
		figcaption {
		opacity: 1;
	}
}

/* Touch devices get no hover, so keep the label permanently readable. */
@media (hover: none) {
	.wp-block-gallery.has-nested-images
		figure.wp-block-image
		figcaption {
		opacity: 1;
		inset: auto 0 0 0;
		background: linear-gradient(
			to top,
			rgba(0, 0, 0, 0.75),
			rgba(0, 0, 0, 0)
		);
		align-items: flex-end;
		padding: 28px 12px 12px;
	}
}

/* Make the link fill its tile so the whole photo is the click target. */
.wp-block-gallery.wp-block-gallery.has-nested-images.has-nested-images
	figure.wp-block-image:not(#individual-image) > a {
	display: block;
	width: 100%;
	height: 100%;
}

/* ------------------------------------------------------------------
   6. Buttons — thin outline, square corners
------------------------------------------------------------------ */

.wp-block-button__link,
.sf-button {
	display: inline-block;
	background: transparent;
	border: 1px solid var(--sf-line);
	border-radius: 0;
	color: #ededed;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: 15px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 13px 44px;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.wp-block-button__link:hover,
.sf-button:hover {
	background: #fff;
	color: #000;
}

/* On white sections the outline needs darker ink. */
.sf-on-light .wp-block-button__link,
.sf-button--dark {
	border-color: #b9b9b9;
	color: #000;
}

.sf-on-light .wp-block-button__link:hover,
.sf-button--dark:hover {
	background: #000;
	color: #fff;
}

/* ------------------------------------------------------------------
   7. Full-bleed photo hero
------------------------------------------------------------------ */

.sf-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	min-height: min(88vh, 820px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(18px, 3vw, 34px);
	padding: clamp(60px, 10vh, 120px) 24px;
	background: var(--sf-dark) center / cover no-repeat;
	text-align: center;
	overflow: hidden;
}

.sf-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.34);
}

.sf-hero > * {
	position: relative;
	z-index: 1;
}

.sf-hero__title {
	font-size: clamp(28px, 6.4vw, 66px);
	color: #fff;
	margin: 0 calc(var(--sf-track) * -1) 0 0;
}

.sf-hero__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	justify-content: center;
}

.sf-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--sf-line);
	border-radius: 50%;
	color: #ededed;
	text-decoration: none;
	font-size: 14px;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.sf-social:hover {
	background: #fff;
	color: #000;
}

/* The front page hero is a core Cover block, so lay its inner column out
   here and let it beat the generic heading rules above. */
.sf-hero-cover .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(14px, 2.4vw, 28px);
	text-align: center;
}

.sf-hero-cover .wp-block-cover__inner-container > * {
	margin: 0;
	max-width: 100%;
}

.sf-page-content .sf-hero-cover .sf-hero__title {
	margin-right: calc(var(--sf-track) * -1);
	color: #fff;
}

.sf-page-content .sf-hero-cover .sf-eyebrow {
	color: var(--sf-pink);
	letter-spacing: var(--sf-track);
	margin-right: calc(var(--sf-track) * -1);
	font-size: clamp(12px, 1.7vw, 22px);
	padding: 0;
}

.sf-hero-cover .wp-block-button__link {
	font-size: 15px;
}

/* ------------------------------------------------------------------
   8. Footer
------------------------------------------------------------------ */

.sf-footer {
	background: #fff;
	text-align: center;
	padding: clamp(56px, 8vw, 110px) 24px clamp(40px, 6vw, 72px);
	border-top: 1px solid #f0f0f0;
}

.sf-footer__brand {
	font-family: var(--wp--preset--font-family--brand);
	font-size: clamp(28px, 5vw, 59px);
	font-weight: 700;
	line-height: 1.1;
	color: #000;
	margin: 0 0 6px;
}

.sf-footer__tag {
	font-family: var(--wp--preset--font-family--brand);
	font-size: clamp(16px, 2.4vw, 35px);
	color: #000;
	margin: 0 0 24px;
}

.sf-footer__meta {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: 15px;
	color: #6b6b6b;
}

.sf-footer__meta a {
	color: #6b6b6b;
	text-decoration: none;
}

.sf-footer__meta a:hover {
	color: var(--sf-magenta);
}

/* ------------------------------------------------------------------
   9. Small screens
------------------------------------------------------------------ */

@media (max-width: 600px) {
	:root {
		--sf-track: 0.28em;
	}

	/* The .columns-N class core writes onto the block outranks a plain
	   .has-nested-images selector, so repeat it here as well. */
	.wp-block-gallery.has-nested-images,
	.wp-block-gallery.has-nested-images.columns-2,
	.wp-block-gallery.has-nested-images.columns-3,
	.wp-block-gallery.has-nested-images.columns-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

/* ------------------------------------------------------------------
   Header dropdown (Services- Samplers)
------------------------------------------------------------------ */

.sf-header .wp-block-navigation__submenu-container {
	background: #fff;
	border: 1px solid #f0f0f0;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.1);
	min-width: 280px;
	max-width: min(340px, calc(100vw - 32px));
	padding: 10px 0;
	left: 50%;
	transform: translateX(-50%);
}

.sf-header .wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 11px 26px;
	text-align: center;
	font-size: clamp(15px, 1.05vw, 18px);
	font-weight: 300;
	letter-spacing: 0.01em;
	color: #000;
}

.sf-header .wp-block-navigation__submenu-container
	.wp-block-navigation-item__content:hover,
.sf-header .wp-block-navigation__submenu-container
	.wp-block-navigation-item__content:focus-visible {
	color: var(--sf-magenta);
}

.sf-header .wp-block-navigation__submenu-icon {
	margin-left: 6px;
	opacity: 0.55;
}

/* "about services" is a heading inside the menu, not a destination. */
.sf-header .wp-block-navigation a[href$="#about-services"] {
	pointer-events: none;
	cursor: default;
	opacity: 0.5;
	font-size: clamp(12px, 0.8vw, 14px);
	letter-spacing: var(--sf-track);
	text-transform: uppercase;
	padding-top: 18px;
}

/* Inside the mobile overlay the dropdown is just an indented list. */
.sf-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container {
	background: transparent;
	border: 0;
	box-shadow: none;
	min-width: 0;
	max-width: none;
	left: auto;
	transform: none;
	padding: 4px 0 12px;
}

.sf-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	font-size: 17px;
	padding: 8px 0;
}
.sf-header .wp-block-navigation__submenu-container {
	max-height: calc(100vh - var(--sf-header-h) - 24px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.sf-header .wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	justify-content: center; /* dropdown */
	text-align: center;
}

/* ------------------------------------------------------------------
   Logo in the menu (it takes the slot the Welcome! link used to hold)
------------------------------------------------------------------ */

.sf-header .wp-block-navigation .wp-block-site-logo {
	display: flex;
	align-items: center;
	margin: 0;
}

.sf-header .wp-block-navigation .wp-block-site-logo a {
	display: block;
	line-height: 0;
	transition: opacity 0.18s ease;
}

.sf-header .wp-block-navigation .wp-block-site-logo a:hover,
.sf-header .wp-block-navigation .wp-block-site-logo a:focus-visible {
	opacity: 0.6;
}

.sf-header .wp-block-navigation .wp-block-site-logo img {
	display: block;
	width: auto;
	height: clamp(30px, 2.9vw, 42px);
	max-width: none;
}

/* In the mobile overlay the logo sits above the links, a little larger. */
.sf-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-site-logo img {
	height: 54px;
}
/* ------------------------------------------------------------------
   Phone header: burger on the left, logo in the middle

   Below 600px the block navigation collapses to its open button, so the
   button is lifted out of the flow and the second logo takes the centre.
------------------------------------------------------------------ */

.sf-header__logo-mobile {
	display: none;
}

@media (max-width: 599px) {
	.sf-header {
		position: relative;
	}

	.sf-header .wp-block-navigation {
		position: static;
	}

	.sf-header .wp-block-navigation__responsive-container-open {
		position: absolute;
		left: clamp(12px, 4vw, 20px);
		top: 50%;
		transform: translateY(-50%);
		margin: 0;
		color: #000;
	}

	.sf-header__logo-mobile {
		display: flex;
		align-items: center;
		margin: 0;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.sf-header__logo-mobile a {
		display: block;
		line-height: 0;
	}

	.sf-header__logo-mobile img {
		display: block;
		width: auto;
		height: 34px;
		max-width: none;
	}

	/* The overlay carries its own logo, so hide the bar one behind it. */
	body:has(.wp-block-navigation__responsive-container.is-menu-open)
		.sf-header__logo-mobile {
		visibility: hidden;
	}
}
/* ------------------------------------------------------------------
   Menu call to action
------------------------------------------------------------------ */

.sf-header .wp-block-navigation__container > li > a[href$="/contact/"] {
	padding: 9px 20px;
	border: 1px solid var(--sf-magenta);
	color: var(--sf-magenta);
	font-size: clamp(11px, 0.85vw, 13px);
	letter-spacing: var(--sf-track);
	text-transform: uppercase;
	transition: background 0.18s ease, color 0.18s ease;
}

.sf-header .wp-block-navigation__container > li > a[href$="/contact/"]:hover,
.sf-header .wp-block-navigation__container > li > a[href$="/contact/"]:focus-visible {
	background: var(--sf-magenta);
	color: #fff;
}

@media (max-width: 599px) {
	.sf-header .wp-block-navigation__container > li > a[href$="/contact/"] {
		font-size: 15px;
		padding: 11px 24px;
	}
}

/* ------------------------------------------------------------------
   Contact form
------------------------------------------------------------------ */

.sf-form {
	max-width: 560px;
}

.sf-form__row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 16px;
}

.sf-form__row label {
	font-size: 12px;
	letter-spacing: var(--sf-track);
	text-transform: uppercase;
	color: #6b6b6b;
}

.sf-form__row input,
.sf-form__row textarea {
	font: inherit;
	font-weight: 300;
	width: 100%;
	padding: 11px 13px;
	color: var(--sf-ink);
	background: #fff;
	border: 1px solid var(--sf-line);
	border-radius: 2px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.sf-form__row textarea {
	resize: vertical;
	min-height: 140px;
}

.sf-form__row input:focus,
.sf-form__row textarea:focus {
	outline: none;
	border-color: var(--sf-magenta);
	box-shadow: 0 0 0 3px rgba(156, 3, 123, 0.12);
}

/* Bait for bots — people never see it. */
.sf-form__pot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sf-form__actions {
	margin: 22px 0 0;
}

.sf-form__submit {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: 13px;
	letter-spacing: var(--sf-track);
	text-transform: uppercase;
	padding: 13px 34px;
	color: #fff;
	background: var(--sf-magenta);
	border: 1px solid var(--sf-magenta);
	border-radius: 2px;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
}

.sf-form__submit:hover,
.sf-form__submit:focus-visible {
	background: transparent;
	color: var(--sf-magenta);
}

.sf-form__note {
	margin: 0 0 22px;
	padding: 13px 16px;
	font-size: 15px;
	border-radius: 2px;
}

.sf-form__note p {
	margin: 0;
}

.sf-form__note--ok {
	background: #f3f7f3;
	border-left: 3px solid #3f7a46;
}

.sf-form__note--error {
	background: #fdf4f4;
	border-left: 3px solid #b3261e;
}

/* The brand display font has no Greek letters, so a Greek page (the contact
   page) would fall back to Arial Bold. Use the light body face instead. */
:lang(el) h1 {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
}

/* "Leave a phone or an email" line above the two contact fields. */
.sf-form__hint {
	margin: 4px 0 12px;
	font-size: 14px;
	color: #6b6b6b;
}

.sf-contact__name {
	font-weight: 500;
}

/* ------------------------------------------------------------------
   Footer
------------------------------------------------------------------ */

.sf-footer .sf-footer__social {
	justify-content: center;
	gap: 16px;
	margin: 6px 0 26px;
	padding: 0;
}

.sf-footer .sf-footer__social .wp-block-social-link {
	margin: 0;
	padding: 0;
}

.sf-footer .sf-footer__social .wp-social-link a {
	color: #6b6b6b;
	padding: 0;
	transition: color 0.18s ease, transform 0.18s ease;
}

.sf-footer .sf-footer__social .wp-social-link svg {
	fill: currentColor;
	width: 22px;
	height: 22px;
}

.sf-footer .sf-footer__social .wp-social-link a:hover,
.sf-footer .sf-footer__social .wp-social-link a:focus-visible {
	color: var(--sf-magenta);
	transform: translateY(-2px);
}

.sf-footer__links {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 16px;
}

.sf-footer__links a {
	color: #000;
	text-decoration: none;
	transition: color 0.18s ease;
}

.sf-footer__links a:hover {
	color: var(--sf-magenta);
}

.sf-footer__links span,
.sf-footer__meta span {
	color: #d2d2d2;
	margin: 0 8px;
}

.sf-footer__meta {
	margin: 0;
}

.sf-footer__legal {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: 12px;
	letter-spacing: 0.08em;
	color: #9a9a9a;
	margin: 20px 0 0;
}

@media (max-width: 599px) {
	.sf-footer__links span {
		display: block;
		height: 0;
		overflow: hidden;
		margin: 4px 0;
	}

	.sf-footer__meta span {
		display: block;
		height: 0;
		overflow: hidden;
		margin: 3px 0;
	}
}
/* A padded column for pages that are words rather than photographs. */
.sf-page-content .sf-prose {
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(40px, 6vw, 84px) clamp(20px, 5vw, 48px) clamp(56px, 8vw, 100px);
}

.sf-page-content .sf-prose > * {
	max-width: none;
}

.sf-page-content .sf-prose .wp-block-columns {
	gap: clamp(28px, 5vw, 70px);
	align-items: flex-start;
}
/* Core paints the social anchor with currentcolor, so colour the item. */
.sf-footer .sf-footer__social,
.sf-footer .sf-footer__social .wp-social-link,
.sf-page-content .wp-block-social-links,
.sf-page-content .wp-block-social-links .wp-social-link {
	color: #6b6b6b;
}

.sf-footer .sf-footer__social .wp-social-link:hover,
.sf-footer .sf-footer__social .wp-social-link:focus-within,
.sf-page-content .wp-block-social-links .wp-social-link:hover,
.sf-page-content .wp-block-social-links .wp-social-link:focus-within {
	color: var(--sf-magenta);
}

.sf-page-content .wp-block-social-links .wp-social-link svg {
	fill: currentColor;
	width: 22px;
	height: 22px;
}

/* Text pages read left to right, not as centred display type. */
.sf-page-content .sf-prose h1 {
	font-family: var(--wp--preset--font-family--brand);
	font-size: clamp(32px, 5vw, 58px);
	line-height: 1.08;
	letter-spacing: 0;
	text-align: left;
	color: #000;
	margin: 0 0 18px;
}

.sf-page-content .sf-prose h2 {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: clamp(14px, 1.3vw, 18px);
	letter-spacing: var(--sf-track);
	text-transform: uppercase;
	text-align: left;
	color: #000;
	margin: 0 0 20px;
}

.sf-page-content .sf-prose h3 {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: 12px;
	letter-spacing: var(--sf-track);
	text-transform: uppercase;
	text-align: left;
	color: #6b6b6b;
	margin: 34px 0 12px;
}

.sf-page-content .sf-prose p {
	text-align: left;
	line-height: 1.65;
}

.sf-page-content .sf-prose > p:first-of-type {
	max-width: 62ch;
	color: #4a4a4a;
	margin-bottom: clamp(34px, 4vw, 56px);
}

.sf-contact .wp-block-column p {
	margin: 0 0 9px;
}
/* sf-prose paragraphs start at the left edge, like the headings above them. */
.sf-page-content .sf-prose > p,
.sf-page-content .sf-prose .wp-block-column > p,
.sf-page-content .sf-prose .wp-block-column > h2,
.sf-page-content .sf-prose .wp-block-column > h3 {
	margin-left: 0;
	margin-right: auto;
}
/* ------------------------------------------------------------------
   Gallery grids keep each photo's own shape

   The tiles used to be forced into a 3:2 box and centre-cropped, which
   cut the heads off every portrait photograph. They now flow down
   columns at their own proportions, like a contact sheet. The strips
   (.sf-carousel) size themselves by height and are left alone.
------------------------------------------------------------------ */

.sf-page-content .wp-block-gallery.wp-block-gallery.has-nested-images:not(.sf-carousel) {
	display: block;
	columns: 4;
	column-gap: 6px;
	width: 100%;
	margin: 0;
}

@media (max-width: 1199px) {
	.sf-page-content .wp-block-gallery.wp-block-gallery.has-nested-images:not(.sf-carousel) {
		columns: 3;
	}
}

@media (max-width: 781px) {
	.sf-page-content .wp-block-gallery.wp-block-gallery.has-nested-images:not(.sf-carousel) {
		columns: 2;
	}
}

@media (max-width: 480px) {
	.sf-page-content .wp-block-gallery.wp-block-gallery.has-nested-images:not(.sf-carousel) {
		columns: 1;
	}
}

.sf-page-content .wp-block-gallery.wp-block-gallery.has-nested-images:not(.sf-carousel)
	figure.wp-block-image:not(#sf-tile) {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0 0 6px;
	break-inside: avoid;
	page-break-inside: avoid;
	position: relative;
	overflow: hidden;
	background: #f4f4f4;
}

.sf-page-content .wp-block-gallery.wp-block-gallery.has-nested-images:not(.sf-carousel)
	figure.wp-block-image:not(#sf-tile) img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	aspect-ratio: auto;
	object-fit: fill;
}