/* ---------------------------------------------------------------------------
   Patti Panue — styles added by the PHP conversion.
   Loaded after the theme stylesheet, so anything here wins.

   The theme dates from 2014 and sizes everything in fixed pixels: a 60px h1
   with 1.0 leading, 15px/22px body text. That is the bulk of what reads as
   old here, and most of this file is fixing it without touching the layout.
   --------------------------------------------------------------------------- */

:root {
	--pp-accent: #b69e59;
	--pp-ink: #1e2022;
	--pp-muted: #6b6b6b;
	--pp-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- hero -----------------------------------------------------------------
   Replaces the Slider Revolution module, which shipped ~507KB of JS and CSS
   to show one static image.

   Full height: the viewport, less the header, which sits in normal flow
   (.fixed-header-box is position:relative until the sticky script promotes it
   on scroll). --pp-header-h is the theme's own row heights added up — top nav
   ~34px, logo row ~60px, menu row ~49px — and is the one number to change if
   the header ever grows.

   svh rather than vh so mobile browser chrome does not push the bottom of the
   image off-screen; the plain vh line above it is the fallback. */
.pp-hero {
	--pp-header-h: 150px;

	position: relative;
	width: 100%;
	height: calc(100vh - var(--pp-header-h));
	height: calc(100svh - var(--pp-header-h));
	min-height: 420px;
	max-height: 1100px;
	overflow: hidden;
	background-color: #e9e9e9;
}

.pp-hero img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* below the mega menu breakpoint the menu row collapses to a toggle, so the
   header is shorter and the hero gets that space back */
@media (max-width: 900px) {
	.pp-hero { --pp-header-h: 104px; }
}

/* Portrait phones crop a 1.86:1 photo hard — at 390px wide roughly a third of
   the frame survives. Bias the crop upward so faces stay in it rather than
   the centre of a wide group shot. */
@media (max-width: 600px) {
	.pp-hero { --pp-header-h: 118px; }
	.pp-hero img { object-position: center 28%; }
}

/* --- typography -----------------------------------------------------------
   Fluid instead of fixed, so headings stop overflowing narrow screens, and
   body copy gets the size and leading that long paragraphs need. */
body,
p,
.main-container {
	font-size: 17px;
	line-height: 1.65;
}

h1, h1 a, .font-h1, .font-h1 a {
	font-size: clamp(2.25rem, 1.2rem + 4.2vw, 3.75rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
}

h2, h2 a, .font-h2, .font-h2 a {
	font-size: clamp(1.75rem, 1rem + 3vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

h3, h3 a, .font-h3, .font-h3 a {
	font-size: clamp(1.25rem, 0.95rem + 1.1vw, 1.5rem);
	line-height: 1.3;
}

h4, h4 a, .font-h4, .font-h4 a {
	font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
	line-height: 1.4;
}

/* the theme tracks these two out as small caps; keep that, just larger */
h5, h5 a, .font-h5, .font-h5 a,
h6, h6 a, .font-h6, .font-h6 a {
	font-size: 0.8rem;
	line-height: 1.5;
	letter-spacing: 0.14em;
}

.page-content p { max-width: 68ch; }
.page-content p.textcenter,
p[style*="text-align: center"] { max-width: none; }

/* --- gallery --------------------------------------------------------------
   A plain CSS grid. This replaced cubeportfolio, which positioned every tile
   from JavaScript and hid them all until it ran. The tiles here are laid out
   and visible before any script executes. */
.pp-gallery {
	--pp-gallery-cols: 4;
	margin: 0;
}

.pp-gallery__filters {
	display: none;   /* revealed once the script wires them up */
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 34px;
}

.pp-gallery.is-filterable .pp-gallery__filters {
	display: flex;
}

.pp-filter {
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0.55em 1.2em;
	border-radius: 999px;
	font-family: Lato, "Helvetica Neue", Arial, sans-serif;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pp-ink);
	transition: background-color 0.3s var(--pp-ease), color 0.3s var(--pp-ease);
}

.pp-filter:hover {
	background-color: rgba(182, 158, 89, 0.14);
	color: var(--pp-accent);
}

.pp-filter.is-active {
	background-color: var(--pp-accent);
	color: #fff;
}

.pp-gallery__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--pp-gallery-cols), minmax(0, 1fr));
	gap: 4px;
}

@media (max-width: 1000px) {
	.pp-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.pp-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
	.pp-gallery__grid { grid-template-columns: 1fr; }
}

.pp-gallery__item { margin: 0; }

.pp-gallery__link {
	position: relative;
	display: block;
	overflow: hidden;
	background-color: #f2f0ec;
}

.pp-gallery__link img,
.sbi_photo img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.7s var(--pp-ease);
}

.pp-gallery__link:hover img,
.sbi_item:hover .sbi_photo img {
	transform: scale(1.06);
}

.pp-gallery__link::after,
.sbi_photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(30, 32, 34, 0) 55%, rgba(30, 32, 34, 0.34) 100%);
	opacity: 0;
	transition: opacity 0.4s var(--pp-ease);
	pointer-events: none;
}

.pp-gallery__link:hover::after,
.sbi_item:hover .sbi_photo::after {
	opacity: 1;
}

.sbi_photo { position: relative; display: block; }

.pp-gallery__empty {
	margin: 30px 0 0;
	text-align: center;
	color: var(--pp-muted);
}

/* --- lightbox -------------------------------------------------------------
   Built by gallery.js on first use. Without the script the tiles are ordinary
   links and open the full image directly, which is a perfectly good fallback. */
.pp-lightbox-open { overflow: hidden; }

.pp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 24px;
	background: rgba(18, 19, 21, 0.94);
}

.pp-lightbox__figure {
	margin: 0;
	max-width: min(1100px, 92vw);
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
}

.pp-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	height: auto;
	object-fit: contain;
}

.pp-lightbox__caption {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
}

.pp-lightbox__close,
.pp-lightbox__nav {
	appearance: none;
	background: none;
	border: 0;
	color: #fff;
	cursor: pointer;
	line-height: 1;
	opacity: 0.72;
	transition: opacity 0.25s var(--pp-ease);
}

.pp-lightbox__close:hover,
.pp-lightbox__nav:hover { opacity: 1; }

.pp-lightbox__close {
	position: absolute;
	top: 18px;
	right: 24px;
	font-size: 2.4rem;
}

.pp-lightbox__nav { font-size: 3rem; padding: 0 8px; }

@media (max-width: 640px) {
	.pp-lightbox { gap: 4px; padding: 12px; }
	.pp-lightbox__nav { font-size: 2.2rem; }
}

/* --- buttons --------------------------------------------------------------
   Same shape, but they move now. */
.vamtam-button {
	transition: background-color 0.3s var(--pp-ease),
	            color 0.3s var(--pp-ease),
	            border-color 0.3s var(--pp-ease),
	            transform 0.3s var(--pp-ease),
	            box-shadow 0.3s var(--pp-ease);
	letter-spacing: 0.12em;
}

.vamtam-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px -10px rgba(30, 32, 34, 0.45);
}

/* --- Instagram grid -------------------------------------------------------
   The plugin's own grid CSS went with the plugin's JS; this replaces it. */
#sb_instagram #sbi_images {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
}

@media (max-width: 860px) {
	#sb_instagram #sbi_images { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
	#sb_instagram #sbi_images { grid-template-columns: 1fr; }
}

#sb_instagram #sbi_load {
	margin-top: 28px;
	text-align: center;
}

#sb_instagram .sbi_load_btn {
	display: inline-block;
	padding: 0.85em 2.2em;
	border: 1px solid var(--pp-accent);
	color: var(--pp-accent);
	font-size: 0.74rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: background-color 0.3s var(--pp-ease), color 0.3s var(--pp-ease);
}

#sb_instagram .sbi_load_btn:hover {
	background-color: var(--pp-accent);
	color: #fff;
}

/* --- breathing room -------------------------------------------------------
   2014 layouts ran tight. Widen the measure a little and open the sections. */
.limit-wrapper { max-width: 1280px; }

.wpv-subfooter .row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 24px;
	padding: 22px 0;
}

.wpv-subfooter .wpv-grid { float: none; }

/* --- accessibility --------------------------------------------------------
   The theme ships no visible focus state anywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.pp-filter:focus-visible {
	outline: 2px solid var(--pp-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection {
	background: rgba(182, 158, 89, 0.28);
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* --- hero overlay ---------------------------------------------------------
   The hero was a full screen of photograph with no words on it: no headline,
   no call to action, and — since the page has no sub-header — the home page
   had no h1 at all. This supplies both. */
.pp-hero__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0 24px clamp(48px, 7vh, 96px);
	/* a scrim only where the text sits, so the photograph stays the subject */
	background: linear-gradient(180deg,
		rgba(24, 26, 28, 0.20) 0%,
		rgba(24, 26, 28, 0) 28%,
		rgba(24, 26, 28, 0) 42%,
		rgba(24, 26, 28, 0.62) 100%);
}

.pp-hero__inner {
	max-width: 900px;
	text-align: center;
	color: #fff;
}

.pp-hero__title {
	margin: 0;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 0.45em;
}

.pp-hero__name {
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(2.4rem, 1rem + 6vw, 5rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}

.pp-hero__tagline {
	font-family: Lato, "Helvetica Neue", Arial, sans-serif;
	font-weight: 300;
	font-size: clamp(0.72rem, 0.62rem + 0.5vw, 0.92rem);
	letter-spacing: 0.34em;
	text-transform: uppercase;
	opacity: 0.92;
}

.pp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: clamp(26px, 4vh, 44px);
}

/* --- buttons --------------------------------------------------------------
   The page had no call to action anywhere in its body — not one button, and
   not one link to another page on the site. */
.pp-btn {
	display: inline-block;
	padding: 1em 2.4em;
	border: 1px solid currentColor;
	font-family: Lato, "Helvetica Neue", Arial, sans-serif;
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.3s var(--pp-ease),
	            color 0.3s var(--pp-ease),
	            border-color 0.3s var(--pp-ease),
	            transform 0.3s var(--pp-ease);
}

.pp-btn--solid {
	background-color: var(--pp-accent);
	border-color: var(--pp-accent);
	color: #fff;
}

.pp-btn--solid:hover {
	background-color: #c9b06a;
	border-color: #c9b06a;
	color: #fff;
	transform: translateY(-2px);
}

.pp-btn--ghost {
	background-color: transparent;
	color: #fff;
}

.pp-btn--ghost:hover {
	background-color: #fff;
	border-color: #fff;
	color: var(--pp-ink);
	transform: translateY(-2px);
}

/* the same ghost button, on a light background */
.pp-btn--dark {
	color: var(--pp-accent);
	border-color: var(--pp-accent);
}

.pp-btn--dark:hover {
	background-color: var(--pp-accent);
	border-color: var(--pp-accent);
	color: #fff;
}

.pp-section-cta {
	/* .page-content p caps paragraphs at 68ch for readability, which would
	   otherwise leave this button centred inside a box hugging the left */
	max-width: none;
	margin: 42px auto 0;
	text-align: center;
}

/* short landscape viewports — a phone held sideways — have no room for the
   scrim and the buttons both, so tighten everything up */
@media (max-height: 520px) and (orientation: landscape) {
	.pp-hero__overlay { align-items: center; padding-bottom: 24px; }
	.pp-hero__actions { margin-top: 18px; }
	.pp-btn { padding: 0.8em 1.8em; }
}

/* --- biography + portrait -------------------------------------------------
   The portrait and signature used to sit on their own further down the page,
   laid out in a <table> with a rowspan. They now sit beside the biography
   they belong to, which also fills the empty right-hand column the text
   measure was leaving behind. */
.pp-bio {
	display: grid;
	grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
	gap: clamp(30px, 4vw, 70px);
	align-items: start;
}

.pp-bio__text p {
	max-width: none;   /* the grid column is the measure now */
}

.pp-bio__text p:last-child {
	margin-bottom: 0;
}

.pp-bio__portrait {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	text-align: center;
}

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

.pp-bio__portrait img[src*="IMG_7154"],
.pp-bio__portrait img:first-child {
	width: 340px;
}

.pp-bio__portrait img:last-child {
	width: 130px;   /* the signature */
}

/* stack below the point where two columns stop being comfortable */
@media (max-width: 820px) {
	.pp-bio {
		grid-template-columns: 1fr;
		gap: 38px;
	}

	.pp-bio__portrait img:first-child {
		width: min(70vw, 300px);
	}
}

/* --- short pages ----------------------------------------------------------
   The theme paints html grey (#d8d8d8) because its boxed layout floats the
   content on a card. This site runs layout-full, so that grey only ever
   showed as a band between the content and the footer on pages shorter than
   the viewport — the 404, contact and gallery on a tall screen. */
html {
	background-color: #fff;
}

/* and push the footer to the bottom on those pages rather than leaving it
   floating mid-screen */
#page.main-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

#page.main-container > .boxed-layout,
#page.main-container > .boxed-layout > .pane-wrapper {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}

#page.main-container .footer-wrapper {
	margin-top: auto;
}

/* --- text measure ---------------------------------------------------------
   Paragraphs are capped at 68ch so long copy stays readable. Centre that
   column, otherwise it hugs the left under centred headings — which is how
   the privacy policy was reading. */
.page-content > .limit-wrapper p,
.page-content .wpv-grid > p {
	margin-left: auto;
	margin-right: auto;
}