/*
Theme Name: Plane View Photo
Author: Kayelless
Author URI: https://www.fotokayelless.me
Description: Plane View Photo is a light, full-screen photography theme that scrolls horizontally on desktop and stacks vertically on phones. It features a landing page with full screen picture and a self-hiding footer. The Blog page lists entries via photo-and-text cards, six per page. There is a main Gallery Row template (six pictures per page, landscapes filling the screen, including opening in a Lightbox). There is also an alternate Filmstrip template (has look of filmstrip with picture EXIF information including title and caption; eight per page) and a Contact Sheet template. The header includes the page name and auto hides when idle for 5 secs. Text runs in magazine-style columns, and pages end with Next page / Return to top links. Fonts: Josefin Sans, Manrope, Assistant and Poiret One.
Version: 1.6.3
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: plane-view-photo
Tags: photography, portfolio, blog, light, full-site-editing, block-patterns, one-column
*/

/* ==========================================================
   1. VARIABLES
   --hz-header-h / --hz-footer-h are measured by horizontal.js.
   They are the height of the bar ONLY when it overlaps the content
   (so text can be padded away from it) and 0 when it is static.
   ========================================================== */
:root {
	--hz-header-h: 5rem;
	--hz-footer-h: 4rem;
	--hz-bar-tint: var(--wp--custom--bar-tint, rgba(254, 254, 254, 0.65));
	--p26-arrow-fill: #FFFFFF33;   /* arrow buttons: white at 20% */
	--p26-muted: var(--wp--custom--muted, #5f5f5f);
	--p26-line: var(--wp--preset--color--contrast-2, #CBCBCB);
	--p26-soft: var(--wp--preset--color--contrast-1, #F9F9F9);
	--p26-gold: var(--wp--preset--color--accent, #CFAF3F);
	--p26-oxblood: var(--wp--preset--color--hover, #660000);
	--p26-font-nav: var(--wp--preset--font-family--manrope);
	--p26-font-meta: var(--wp--preset--font-family--assistant);
	--p26-font-head: var(--wp--preset--font-family--josefin-sans);
	/* The "desktop" (horizontal-scroll) layout needs BOTH a screen at least
	   782px wide AND landscape orientation. A tablet held upright — even a
	   large one, wider than 782px — gets the phone-style vertical layout
	   instead; turning it sideways switches it live. See the @media rules
	   below and the same check in horizontal.js / bigwords.js. */
	--hz-breakpoint: 782px;
}

/* ==========================================================
   2. HEADER + FOOTER BARS
   Default = overlay (fixed, tinted, floats over the photo).
   Block style "Static" = normal flow, solid background.
   ========================================================== */
.hz-bar {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 50;
	box-sizing: border-box;
	padding: 1rem clamp(1rem, 3vw, 2.5rem);
	background: var(--hz-bar-tint);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--wp--preset--color--contrast);
	font-family: var(--p26-font-nav);
}
.hz-header { top: 0; }
.hz-footer { bottom: 0; }

.hz-bar a,
.hz-bar .wp-block-site-title a {
	color: inherit;
	text-decoration: none;
}
.hz-bar .wp-block-site-title {
	margin: 0;
	font-family: var(--p26-font-head);
	font-weight: 400;
	letter-spacing: 0.02em;
	font-size: 1.5rem;
	line-height: 1;
}
.hz-bar .wp-block-navigation {
	font-weight: 400;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.hz-bar .wp-block-navigation,
.hz-bar .wp-block-navigation .wp-block-navigation__container {
	gap: 1.75rem;
}
.hz-bar a:hover,
.hz-bar a:focus-visible,
.hz-bar .wp-block-site-title a:hover {
	color: var(--p26-oxblood);
}
.hz-bar .wp-block-navigation a:hover,
.hz-bar .wp-block-navigation a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--p26-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.45em;
}
/* Drop-down menus (e.g. Gallery > Recent / Retired) */
.hz-bar .wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 1px solid var(--p26-line) !important;
	padding: 0.4rem 0;
}
.hz-bar .wp-block-navigation .wp-block-navigation__submenu-container a {
	padding: 0.45rem 1.1rem;
}
/* Header = three parts: site name | tagline (true center) | menu */
.wp-block-group.hz-bar.hz-header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
}
.hz-header .wp-block-site-tagline {
	margin: 0;
	text-align: center;
	font-family: var(--p26-font-meta);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	color: var(--p26-muted);
}
.hz-header .wp-block-navigation {
	justify-self: end;
}

.hz-footer p {
	margin: 0;
	font-family: var(--p26-font-meta);
	font-size: 0.8rem;
	color: var(--p26-muted);
}

/* Header and footer fade out when idle (see horizontal.js). Arrows stay. */
.hz-bar { transition: opacity 0.6s ease; }
html.hz-idle .hz-bar:not(.is-style-hz-static) {
	opacity: 0;
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
	.hz-bar { transition: none; }
}

/* Static variant: sits in the page flow, solid background, no blur */
.hz-bar.is-style-hz-static {
	position: relative;
	background: var(--wp--preset--color--base);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* ==========================================================
   3. PHONES + TABLETS IN PORTRAIT: normal vertical WordPress
   Applies below 782px width, OR any time the device is upright
   (portrait), regardless of width — so a tablet held upright still
   gets this even though it may be wider than 782px.
   ========================================================== */
@media (max-width: 781px), (orientation: portrait) {
	/* Bars are always static on small screens */
	.hz-bar,
	.hz-bar.is-style-hz-static {
		position: relative !important;
		background: var(--wp--preset--color--base);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	/* Header: name + menu on row one, tagline on row two */
	.wp-block-group.hz-bar.hz-header {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"title nav"
			"tag   tag";
		row-gap: 0.4rem;
	}
	.hz-header .wp-block-site-title { grid-area: title; }
	.hz-header .wp-block-navigation { grid-area: nav; }
	.hz-header .wp-block-site-tagline { grid-area: tag; text-align: left; }

	/* Footer: menu first and centered (it's the visitor's second chance
	   to navigate), copyright underneath */
	.hz-footer {
		flex-direction: column-reverse;
		align-items: center !important;
		text-align: center;
		gap: 1rem;
	}
	.hz-footer .wp-block-navigation {
		justify-content: center;
		font-size: 0.95rem;
	}
	.hz-footer .wp-block-navigation .wp-block-navigation__container {
		justify-content: center;
		gap: 1.5rem;
	}

	/* Photo panels: stacked, each photo at its natural proportions,
	   full width, never cropped */
	.hz-panel {
		min-height: 0 !important;
		height: auto;
	}
	.hz-panel .wp-block-cover__image-background {
		position: relative !important;
		width: 100%;
		height: auto !important;
		object-fit: contain !important;
	}
	/* Empty placeholder panels (no photo yet) still get some height */
	.hz-panel:not(:has(img)) {
		min-height: 60svh !important;
	}

	/* Post / project opening photo: natural proportions, never cropped.
	   (.wp-block-group prefix so these beat the desktop-first rules below) */
	.wp-block-group.hz-post-panel { min-height: 0 !important; }
	.wp-block-group.hz-post-panel .wp-block-post-featured-image {
		position: relative;
		inset: auto;
	}
	.wp-block-group.hz-post-panel .wp-block-post-featured-image img {
		width: 100%;
		height: auto;
		object-fit: contain;
	}
	.wp-block-group.hz-post-panel .hz-post-panel__title { bottom: 1.25rem; }
	.wp-block-group.hz-post-panel:not(:has(img)) { min-height: 40svh !important; }

	/* Text: ordinary single column */
	.hz-text {
		padding: 2.5rem 1.25rem;
	}

	.hz-arrow { display: none !important; }
}

/* ==========================================================
   4. DESKTOP / TABLETS IN LANDSCAPE (782px and up, sideways): horizontal scroll
   ========================================================== */
@media (min-width: 782px) and (orientation: landscape) {
	html,
	body {
		height: 100%;
		overflow: hidden;
	}

	/* Header / main / footer become a full-height column.
	   Static bars take space; overlay bars are fixed so take none. */
	.wp-site-blocks {
		height: 100vh;
		height: 100dvh;
		display: flex;
		flex-direction: column;
	}

	/* The sideways scroller */
	.hz-scroller {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: row;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		max-width: none;
		margin: 0;
		padding: 0;
		/* horizontal.js keeps resizing panels and text sections after the
		   page paints (fonts loading, images loading, column widths being
		   worked out). Without this, the browser's own "scroll anchoring"
		   tries to compensate for each of those shifts by nudging the
		   scroll position to keep something in the same visual spot — on a
		   short page that can be enough to land far along the page (even at
		   its very end) with no click at all, and with the "next" arrow
		   then hiding itself because it thinks there is nowhere left to go. */
		overflow-anchor: none;
	}
	.hz-scroller::-webkit-scrollbar { display: none; }

	/* WordPress wraps content in extra containers. Make them "invisible"
	   so every panel becomes a direct child of the scroller. */
	.hz-scroller .wp-block-post-content,
	.hz-scroller .wp-block-query,
	.hz-scroller .wp-block-post-template,
	.hz-scroller .wp-block-post-template > li {
		display: contents;
	}

	/* A panel = one full screen */
	.hz-panel {
		flex: 0 0 100%;
		width: 100%;
		height: 100%;
		min-height: 0 !important;
		max-width: none;
		margin: 0;
		box-sizing: border-box;
		scroll-snap-align: start;
	}

	/* A portrait photo: full height, its own natural width. In the picture
	   stream (a plain Cover-block photo panel, not a post/project opener)
	   horizontal.js also adds a 15%-of-screen frame on each side, and the
	   panel gets its own background colour so that frame reads as a
	   deliberate mat rather than just whatever happens to be behind it —
	   with the photo itself pinned to its natural width, centred, rather
	   than stretched to fill the wider panel. A post/project opening photo
	   gets no frame and keeps filling its panel exactly as before. */
	.hz-panel.is-portrait {
		position: relative;
		flex: 0 0 auto;
		width: auto;   /* set in pixels by horizontal.js (sizePortraits) */
		background-color: var(--wp--preset--color--base);   /* no border: same as the page */
	}
	.hz-panel.is-portrait .wp-block-cover__image-background {
		left: 50%;
		right: auto;
		width: var(--hz-portrait-img-w, 100%);
		transform: translateX(-50%);
	}

	/* A text section. Width is set by horizontal.js so the
	   columns end exactly where the text ends. */
	.hz-text {
		flex: 0 0 100%;
		height: 100%;
		max-width: none;
		margin: 0;
		box-sizing: border-box;
		/* Left margin, right margin and the gap between columns are all the
		   SAME width (--p26-text-gap). horizontal.js relies on that: each
		   arrow press moves one screen of columns, so the previous screen's
		   last column ends exactly at the left edge and the next screen's
		   first column starts exactly at the right edge — never a sliver,
		   never cut off. (At least 4.5rem so text stays clear of the arrows.) */
		--p26-text-gap: clamp(4.5rem, 6vw, 7rem);
		padding:
			calc(var(--hz-header-h) + 2rem)
			var(--p26-text-gap)
			calc(var(--hz-footer-h) + 2rem);
		column-width: 24rem;
		column-gap: var(--p26-text-gap);
		column-fill: auto;
		scroll-snap-align: start;
		overflow: visible;
	}
	.hz-text > * {
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
		max-width: none;
	}

	/* Pictures and other blocks inside text: keep each in one piece, and never
	   let a picture be taller than a column (--hz-col-h is measured by horizontal.js).
	   A picture that does not fit under the text above simply moves to the next column. */
	.hz-text figure,
	.hz-text .wp-block-image,
	.hz-text .wp-block-gallery,
	.hz-text .wp-block-video,
	.hz-text .wp-block-embed,
	.hz-text blockquote,
	.hz-text pre,
	.hz-text table {
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
	}
	.hz-text figure { margin: 0 0 1.1em; }
	.hz-text img {
		display: block;
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: var(--hz-col-h, 70vh);
	}
	.hz-text figure:has(figcaption) img {
		max-height: calc(var(--hz-col-h, 70vh) - 4.5rem);
	}
	/* A heading should not be left alone at the bottom of a column */
	.hz-text h1,
	.hz-text h2,
	.hz-text h3,
	.hz-text h4 {
		break-after: avoid;
		-webkit-column-break-after: avoid;
	}

	/* Arrows. Subtle by default; large and bold only on the first panel
	   (class hz-arrow--hint, set by horizontal.js), where the visitor needs
	   the clue that the page scrolls sideways. */
	.hz-arrow {
		position: fixed;
		top: 50%;
		z-index: 40;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 3rem;
		height: 3rem;
		padding: 0;
		border: 2px solid transparent;
		border-radius: 50%;
		background: var(--p26-arrow-fill);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		color: var(--wp--preset--color--contrast);
		border-color: var(--p26-line);
		cursor: pointer;
		opacity: 0.55;
		transition: opacity 0.2s ease, background 0.3s ease, width 0.3s ease, height 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
	}
	.hz-arrow svg { display: block; width: 1.25rem; height: 1.25rem; transition: width 0.3s ease, height 0.3s ease; }
	.hz-arrow svg polyline { stroke-width: 2.4; }

	.hz-arrow--hint {
		width: 4rem;
		height: 4rem;
		border-color: var(--wp--preset--color--contrast);
		background: var(--p26-arrow-fill);
		box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
		opacity: 0.95;
	}
	.hz-arrow--hint svg { width: 1.75rem; height: 1.75rem; }
	.hz-arrow--hint svg polyline { stroke-width: 3.2; }

	.hz-arrow:hover,
	.hz-arrow:focus-visible {
		opacity: 1;
		background: var(--p26-arrow-fill);
		border-color: var(--p26-gold);
		color: var(--p26-oxblood);
	}
	.hz-arrow:focus-visible { outline: 2px solid var(--p26-gold); outline-offset: 3px; }
	.hz-arrow__text:empty { display: none; }

	/* At the end of a paged list the arrow becomes a "Next page" /
	   "Previous page" link: a pill with its label, gold edge. */
	.hz-arrow--page {
		width: auto;
		height: 3.25rem;
		gap: 0.5rem;
		padding: 0 1rem 0 1.4rem;
		border-radius: 999px;
		border-color: var(--p26-gold);
		background: var(--p26-arrow-fill);
		opacity: 0.95;
		font-family: var(--p26-font-nav);
		font-size: 0.8rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		white-space: nowrap;
	}
	/* A "Previous page" pill (left end of page 2+, or right end of the last
	   page): back chevron first, then the words */
	.hz-arrow--page.hz-arrow--back { flex-direction: row-reverse; padding: 0 1.4rem 0 1rem; }
	.hz-arrow[hidden] { display: none; }
	.hz-arrow--prev { left: 1.25rem; }
	.hz-arrow--next { right: 1.25rem; }
}

/* ==========================================================
   5. PHOTO PANELS (Cover block, edge to edge)
   ========================================================== */
.hz-panel.wp-block-cover {
	padding: 0;
	border: 0;
}
.hz-panel .wp-block-cover__inner-container {
	width: 100%;
	max-width: 48rem;
	padding: 0 clamp(1.25rem, 4vw, 3rem);
	box-sizing: border-box;
}

/* Block style "Fit": show the whole photo instead of cropping it */
.hz-panel.is-style-hz-fit .wp-block-cover__image-background,
.hz-panel.is-style-hz-fit video.wp-block-cover__video-background {
	object-fit: contain !important;
}

/* Buttons: thin outline, ghost style */
.wp-block-button__link {
	background: transparent;
	color: inherit;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-family: var(--p26-font-nav);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.7em 1.8em;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	border-color: var(--p26-gold);
}

/* Blog post as a panel */
.hz-post-panel {
	position: relative;
	overflow: hidden;
	min-height: 100svh;
}
.hz-post-panel .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	margin: 0;
}
.hz-post-panel .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hz-post-panel .hz-post-panel__title {
	position: absolute;
	left: clamp(1.25rem, 4vw, 3rem);
	right: clamp(1.25rem, 4vw, 3rem);
	bottom: calc(var(--hz-footer-h) + 2rem);
	margin: 0;
}
.hz-post-panel a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.hz-post-panel a:hover,
.hz-post-panel a:focus-visible { color: var(--p26-oxblood); }

/* Text sections: breathing room between paragraphs and headings
   (theme.json sets the global block gap to 0 for the photo layouts) */
.hz-text p,
.hz-text ul,
.hz-text ol,
.hz-text blockquote { margin: 0 0 1.1em; }
.hz-text h1,
.hz-text h2,
.hz-text h3,
.hz-text h4 { margin: 0 0 0.6em; }
.hz-text * + h2,
.hz-text * + h3 { margin-top: 1.4em; }

/* ==========================================================
   8. BIG WORDS
   Written as a normal paragraph; bigwords.js splits it up.
   Without JavaScript it stays a large, readable paragraph.
   ========================================================== */
.is-style-hz-bigwords {
	font-family: var(--p26-font-head);
	font-weight: 700;
	font-size: clamp(1.75rem, 5vw, 3rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin: 0;
	padding: 2rem 1.25rem;
}
.hz-bw-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.is-style-hz-bigwords.is-split { padding: 0; }
.hz-bw-screen { display: block; padding: 2.5rem 1.25rem; }
.hz-bw-row { display: contents; }
.hz-bw-word {
	display: block;
	width: fit-content;
	line-height: 0.95;
	white-space: nowrap;
}
/* Phones: alternate left / right */
.hz-bw-word.is-right { margin-left: auto; }

@media (min-width: 782px) and (orientation: landscape) {
	.is-style-hz-bigwords.is-split {
		flex: 0 0 auto;
		display: flex;
		width: calc(var(--hz-screens, 1) * 100%);
		height: 100%;
		max-width: none;
		margin: 0;
		box-sizing: border-box;
	}
	.hz-bw-screen {
		flex: 0 0 calc(100% / var(--hz-screens, 1));
		box-sizing: border-box;
		height: 100%;
		display: grid;
		grid-template-rows: repeat(4, minmax(0, 1fr));
		padding:
			calc(var(--hz-header-h) + 1rem)
			clamp(1.5rem, 5vw, 4rem)
			calc(var(--hz-footer-h) + 1rem);
		scroll-snap-align: start;
	}
	.hz-bw-row {
		display: flex;
		align-items: center;
		gap: 0.35em;
		min-width: 0;
		box-sizing: border-box;
	}
	.hz-bw-word { display: inline-block; margin: 0 !important; line-height: 1; }

	/* Neat scatter: each row lands differently */
	.hz-bw-row:nth-child(1) { justify-content: space-between; }
	.hz-bw-row:nth-child(2) { justify-content: space-around; padding-left: 12%; }
	.hz-bw-row:nth-child(3) { justify-content: space-between; padding-right: 8%; }
	.hz-bw-row:nth-child(4) { justify-content: center; }
}

/* ==========================================================
   9. BLOG LIST: date, title, excerpt and "View post" on each panel
   ========================================================== */
.hz-post-panel__info { color: var(--wp--preset--color--contrast); }
.hz-post-panel__info a { color: inherit; text-decoration: none; }
.hz-post-panel__info > * { max-width: 38rem; }
.hz-post-panel__info .wp-block-post-date {
	margin: 0 0 0.5rem;
	font-family: var(--p26-font-meta);
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.hz-post-panel__info .wp-block-post-title { margin: 0 0 0.5rem; }
.hz-post-panel__info .hz-post-meta { margin: 0 0 0.9rem; }
.hz-post-panel__info .hz-post-meta .wp-block-post-date { margin: 0; opacity: 1; }
.hz-post-panel__info .wp-block-post-excerpt { margin: 0 0 1.25rem; }
.hz-post-panel__info .wp-block-post-excerpt p { margin: 0; }
.hz-post-panel__info .wp-block-post-excerpt__more-link { display: none; }

/* "View post" looks like the site's outline buttons */
.wp-block-read-more {
	display: inline-block;
	border: 1px solid currentColor;
	border-radius: 999px;
	padding: 0.7em 1.8em;
	font-family: var(--p26-font-nav);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: inherit;
	text-decoration: none;
}
.wp-block-read-more:hover,
.wp-block-read-more:focus-visible { border-color: var(--p26-gold); color: var(--p26-oxblood); }

@media (min-width: 782px) and (orientation: landscape) {
	/* Text sits on a soft gradient so it stays readable on any photo */
	.hz-post-panel__info {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		box-sizing: border-box;
		padding:
			8rem
			clamp(1.25rem, 4vw, 3rem)
			calc(var(--hz-footer-h) + 2rem);
		background: linear-gradient(to top, rgba(254, 254, 254, 0.92) 0%, rgba(254, 254, 254, 0.75) 55%, rgba(254, 254, 254, 0));
		pointer-events: none;       /* clicks on empty gradient reach the photo link */
	}
	.hz-post-panel__info > * { pointer-events: auto; }
}

@media (max-width: 781px), (orientation: portrait) {
	/* On phones the text goes below the photo, not over it */
	.wp-block-group.hz-post-panel .hz-post-panel__info {
		position: static;
		padding: 1.1rem 1.25rem 2rem;
		background: var(--wp--preset--color--base);
	}
	.wp-block-group.hz-post-panel { margin-bottom: 0; }
}

/* ==========================================================
   11. POST META (under the title) + TAGS (end of the text)
   ========================================================== */
.hz-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1.25rem;
	margin: 0;
	font-family: var(--p26-font-meta);
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.hz-post-meta > * { margin: 0; }
.hz-post-meta .wp-block-post-terms a { color: inherit; text-decoration: none; }
.hz-post-meta .wp-block-post-terms a:hover,
.hz-post-meta .wp-block-post-terms a:focus-visible { color: var(--p26-oxblood); text-decoration: underline; text-decoration-color: var(--p26-gold); text-underline-offset: 0.3em; }
.hz-post-meta .wp-block-post-terms__separator { margin: 0 0.15em; }
.hz-post-panel__info .hz-post-meta { opacity: 0.9; }

.hz-tags { margin: 1.5rem 0 0; break-inside: avoid; -webkit-column-break-inside: avoid; }
.hz-tags:not(:has(.wp-block-post-terms)) { display: none; }  /* no tags, no label */
.hz-tags__label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.6rem;
	font-family: var(--p26-font-meta);
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--p26-muted);
}
.hz-tags__label::before {
	content: "";
	width: 1.1rem;
	height: 1.1rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Ccircle cx='7' cy='7' r='1.2' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Ccircle cx='7' cy='7' r='1.2' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hz-tags .wp-block-post-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
}
.hz-tags .wp-block-post-terms__separator { display: none; }
.hz-tags .wp-block-post-terms a {
	display: inline-block;
	padding: 0.2em 0.8em;
	border: 1px solid var(--p26-line);
	border-radius: 999px;
	font-family: var(--p26-font-meta);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	color: inherit;
	text-decoration: none;
}
.hz-tags .wp-block-post-terms a:hover,
.hz-tags .wp-block-post-terms a:focus-visible { border-color: var(--p26-gold); color: var(--p26-oxblood); }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.hz-scroller { scroll-behavior: auto; }
	.hz-arrow { transition: none; }
}

/* ==========================================================
   7. PORTFOLIO SECTIONS (Feature / Two columns / Three columns)
   Photos are never cropped: each fits inside its space,
   portrait or landscape.
   ========================================================== */
.hz-section .wp-block-image { margin: 0; }
.hz-section .wp-block-image a { display: block; }

.hz-feature__text h2 { margin: 0 0 1rem; font-size: clamp(1.75rem, 3vw, 3rem); }
.hz-feature__text h2 a { color: inherit; text-decoration: none; }
.hz-feature__text h2 a:hover,
.hz-feature__text h2 a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }
.hz-feature__text p { margin: 0 0 1rem; }
.hz-feature__text .hz-meta { margin: 0 0 0.3rem; }
.hz-feature__text .hz-meta + p:not(.hz-meta) { margin-top: 1.2rem; }
.hz-meta {
	font-family: var(--p26-font-meta);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--p26-muted);
}

.hz-card h3 {
	margin: 0.9rem 0 0;
	font-family: var(--p26-font-head);
	text-align: center;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.hz-card h3 a { color: inherit; text-decoration: none; }
.hz-card h3 a:hover,
.hz-card h3 a:focus-visible { text-decoration: underline; text-underline-offset: 0.3em; }

/* ---- Desktop ---- */
@media (min-width: 782px) and (orientation: landscape) {
	.hz-section {
		flex: 0 0 100%;
		width: 100%;
		height: 100%;
		max-width: none;
		margin: 0;
		box-sizing: border-box;
		scroll-snap-align: start;
		padding:
			calc(var(--hz-header-h) + 1.5rem)
			clamp(1.5rem, 5vw, 4rem)
			calc(var(--hz-footer-h) + 1.5rem);
	}

	/* Feature: photo (its natural shape, full available height) + text */
	.hz-section.hz-feature {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: clamp(2rem, 5vw, 5rem);
	}
	.hz-feature > .wp-block-image {
		flex: 0 1 auto;
		height: 100%;
		min-width: 0;
	}
	.hz-feature > .wp-block-image a { height: 100%; }
	.hz-feature > .wp-block-image img {
		height: 100%;
		width: auto;
		max-width: 100%;
		object-fit: contain;
	}
	.hz-feature__text {
		flex: 0 1 28rem;
		min-width: 14rem;
	}

	/* Columns: N equal columns, photo above title, all photos fit inside */
	.hz-section.hz-cards {
		display: grid;
		grid-template-columns: repeat(var(--hz-cols, 2), minmax(0, 1fr));
		gap: clamp(1.5rem, 4vw, 4rem);
	}
	.hz-cards--2 { --hz-cols: 2; }
	.hz-cards--3 { --hz-cols: 3; }
	.hz-card {
		display: flex;
		flex-direction: column;
		min-width: 0;
		min-height: 0;
	}
	.hz-card > .wp-block-image {
		position: relative;
		flex: 1 1 0;
		min-height: 0;
	}
	.hz-card > .wp-block-image a {
		position: absolute;
		inset: 0;
	}
	.hz-card > .wp-block-image img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center bottom; /* titles line up under every photo */
	}
}

/* ---- Phones: everything stacks, one column, natural shapes ---- */
@media (max-width: 781px), (orientation: portrait) {
	.hz-section { padding: 0 0 2rem; }
	.hz-feature__text { padding: 1.25rem 1.25rem 0; }
	.hz-section.hz-cards { display: block; }
	.hz-card { margin-bottom: 2rem; }
	.hz-section .wp-block-image img { width: 100%; height: auto; }
	.hz-card h3 { padding: 0 1.25rem; }
}

/* ==========================================================
   12. PLANE VIEW PHOTO: TYPE, LINKS, LANDING PAGE, GALLERY ROW, PAGE LINKS
   ========================================================== */

/* Body text is Poiret One (theme.json). It is a thin face with only one
   weight, so it is set large and slightly spaced to stay readable. */
body {
	-webkit-font-smoothing: antialiased;
	letter-spacing: 0.01em;
}
/* Links in running text: dark, with a gold underline; oxblood on hover */
.hz-text a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
	text-decoration: underline;
	text-decoration-color: var(--p26-gold);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}
.hz-text a:hover,
.hz-text a:focus-visible { color: var(--p26-oxblood); text-decoration-color: currentColor; }
/* Text on a Cover photo (e.g. the landing page's site title) keeps the
   Cover's own light-on-photo colour instead of the dark link colour */
.wp-block-cover a:where(:not(.wp-element-button):not(.wp-block-button__link)) { color: inherit; }
.wp-block-cover a:where(:not(.wp-element-button):not(.wp-block-button__link)):hover { color: var(--p26-gold); }
/* Picture captions (theme.json sets the Assistant font) */
figcaption,
.wp-element-caption { font-family: var(--p26-font-meta); }
/* Text selection in the highlight colour */
::selection { background: var(--p26-gold); color: var(--wp--preset--color--contrast); }

/* ---------- Landing page (front page): your photo, no header,
   the footer floats over the bottom and hides when idle ---------- */
.p26-landing { margin: 0; }
.p26-landing .wp-block-post-content > .wp-block-cover:first-child {
	min-height: 100vh !important;
	min-height: 100dvh !important;
	margin-top: 0 !important;
}
@media (min-width: 782px) and (orientation: landscape) {
	.p26-landing {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;       /* anything below the photo can still be reached */
		scrollbar-width: none;
	}
	.p26-landing::-webkit-scrollbar { display: none; }
}

/* ---------- Gallery Row (page template "Gallery Row") ----------
   Each picture in the page's Gallery block becomes one slide. */
.p26-gallery-row .wp-block-post-content,
.p26-gallery-row .wp-block-gallery { margin: 0; }
.p26-row-item { margin: 0 !important; }
.p26-row-item a { display: block; cursor: zoom-in; }
.p26-row-item img { display: block; }

@media (min-width: 782px) and (orientation: landscape) {
	/* The gallery's own grid is switched off so its pictures line up in the row */
	.p26-gallery-row .wp-block-gallery {
		display: contents !important;
	}
	.p26-gallery-row .wp-block-gallery > .wp-element-caption { display: none; }
	.p26-gallery-row .p26-row-item {
		position: relative;
		flex: 0 0 auto !important;
		width: 100vw;               /* set in pixels by horizontal.js */
		height: 100%;
		display: flex !important;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		scroll-snap-align: start;
		background: var(--wp--preset--color--base);
	}
	/* Portrait pictures: no border. The space either side of them (it keeps
	   each slide a sensible width) is simply the page's own background. */
	.p26-gallery-row .p26-row-item.is-portrait {
		background: var(--wp--preset--color--base);
	}
	.p26-gallery-row .p26-row-item a {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	/* !important: the Gallery block's "Crop images" setting would otherwise
	   stretch every picture to fill and crop it. Here nothing is cropped. */
	.p26-gallery-row .p26-row-item img {
		width: auto;
		height: 100%;
		max-width: none !important;
		max-height: 100% !important;
		object-fit: contain !important;
		flex: none !important;
	}
	.p26-gallery-row .p26-row-item a { flex: none !important; width: auto !important; }
	/* Landscape pictures fill the screen (cropped to fit); they're previews,
	   and the lightbox shows the whole picture. Portraits are never cropped. */
	.p26-gallery-row .p26-row-item.is-landscape img { object-fit: cover !important; }
	/* Caption: a small label centred near the bottom of the picture */
	.p26-gallery-row .p26-row-item figcaption {
		position: absolute;
		left: 50%;
		bottom: calc(var(--hz-footer-h) + 1rem);
		transform: translateX(-50%);
		max-width: min(36rem, 80%);
		margin: 0;
		padding: 0.3rem 0.8rem;
		background: rgba(254, 254, 254, 0.88);
		color: var(--wp--preset--color--contrast);
		font-size: 0.85rem;
		text-align: center;
		pointer-events: none;
	}
	/* WordPress's own gallery-caption gradient isn't wanted here */
	.p26-gallery-row .wp-block-gallery .p26-row-item figcaption { background-image: none; text-shadow: none; }

	/* Page links are used by the arrows on desktop, so hide the buttons */
	.hz-scroller .p26-pager { display: none !important; }
}

/* Phones and upright tablets: pictures stacked at their natural shape */
@media (max-width: 781px), (orientation: portrait) {
	.p26-gallery-row .wp-block-gallery {
		display: block !important;
	}
	.p26-gallery-row .p26-row-item {
		width: 100% !important;
		margin: 0 0 0.75rem !important;
	}
	.p26-gallery-row .p26-row-item img {
		width: 100% !important;
		height: auto !important;
		object-fit: contain !important;
	}
	.p26-gallery-row .p26-row-item figcaption {
		position: static;
		padding: 0.4rem 1.25rem 0;
		background: none;
		color: var(--p26-muted);
		text-shadow: none;
	}
}

/* ---------- Page links (Blog: newer / older posts; Gallery Row pages) ----------
   Desktop: hidden (the arrows use them). Phones: two pill buttons. */
.p26-pager {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: 1.5rem 1.25rem 2.5rem;
	font-family: var(--p26-font-nav);
}
.p26-pager a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.7em 1.4em;
	border: 1px solid var(--p26-gold);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}
.p26-pager a:hover,
.p26-pager a:focus-visible { color: var(--p26-oxblood); background: var(--p26-soft); }
.p26-pager .p26-pager__next,
.p26-pager .p26-pager__top,
.p26-pager .wp-block-query-pagination-next { margin-left: auto; }
.p26-pager .wp-block-query-pagination-numbers { display: none; }

/* ==========================================================
   13. TITLE ROW (template part "Header with page title")
   A short row under the header with the page name; it fades with the
   header. With a "Title row text" paragraph (Retired) it runs full width.
   ========================================================== */
.wp-block-group.hz-bar.hz-header.p26-header-titled {
	display: block;
	padding: 0;
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.p26-header-titled .p26-header-main {
	/* Its own layer, above the title row, so drop-down menus (Gallery >
	   Recent / Retired) open in front of the Retired explanation. */
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	box-sizing: border-box;
	padding: 1rem clamp(1rem, 3vw, 2.5rem);
	background: var(--hz-bar-tint);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.p26-titlebar {
	position: relative;
	z-index: 1;
	width: fit-content;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0.6rem clamp(1rem, 3vw, 2.5rem) 0.55rem;
	background: var(--hz-bar-tint);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--p26-gold);   /* just a thin gold line underneath */
}
.p26-page-name {
	margin: 0;
	font-family: var(--p26-font-head);
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.15;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
}
.p26-titlebar.has-intro {
	width: auto;
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 2.5rem);
}
.p26-page-intro { flex: 1 1 auto; min-width: 0; }
.p26-page-intro p {
	margin: 0;
	font-family: var(--p26-font-nav);  /* Manrope, like the rest of the header */
	color: var(--wp--preset--color--contrast);
	font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.1rem);
	line-height: 1.45;
}

@media (max-width: 781px), (orientation: portrait) {
	.p26-header-titled .p26-header-main {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"title nav"
			"tag   tag";
		row-gap: 0.4rem;
		background: var(--wp--preset--color--base);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.p26-titlebar,
	.p26-titlebar.has-intro {
		width: auto;
		display: block;
		background: var(--p26-soft);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.p26-titlebar.has-intro .p26-page-intro { margin-top: 0.4rem; }
	.p26-page-name { white-space: normal; }
}

/* ==========================================================
   14. CONTACT SHEET (page template "Contact Sheet")
   Every picture in the page's Gallery block is a numbered frame. On desktop
   horizontal.js places the frames a screen at a time; nothing is cropped.
   The !important rules switch off the Gallery block's own grid and its
   "Crop images" / caption-over-the-picture styles.
   ========================================================== */
.p26-contact-sheet .wp-block-post-content { margin: 0; }
.wp-block-gallery.p26-sheet {
	display: grid !important;
	gap: 1.5rem !important;
	margin: 0;
	box-sizing: border-box;
}
.wp-block-gallery.p26-sheet > .wp-element-caption { display: none; }
.wp-block-gallery.p26-sheet .p26-sheet-item {
	display: flex !important;
	flex-direction: column !important;
	width: auto !important;
	min-width: 0;
	min-height: 0;
	margin: 0 !important;
	flex: none !important;
}
.wp-block-gallery.p26-sheet .p26-sheet-item > a {
	display: flex !important;
	flex: 1 1 0 !important;
	min-height: 0;
	height: auto !important;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	box-sizing: border-box;
	background: var(--p26-soft);
	outline: 1px solid var(--p26-line);
	outline-offset: -1px;
	cursor: zoom-in;
	transition: outline-color 0.2s ease;
}
.wp-block-gallery.p26-sheet .p26-sheet-item > a:hover,
.wp-block-gallery.p26-sheet .p26-sheet-item > a:focus-visible {
	outline: 2px solid var(--p26-gold);
	outline-offset: -2px;
}
.wp-block-gallery.p26-sheet .p26-sheet-item img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: contain !important;
	flex: none !important;
}
/* Frame number + caption on one line under the picture */
.wp-block-gallery.p26-sheet .p26-sheet-item figcaption {
	position: static !important;
	flex: none;
	width: auto !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0.35rem 0 0 !important;
	overflow: hidden;
	background: none !important;
	color: var(--p26-muted) !important;
	text-shadow: none !important;
	text-align: left !important;
	font-family: var(--p26-font-meta);
	font-size: 0.8rem !important;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}
.p26-frame-no {
	margin-right: 0.55em;
	color: var(--p26-gold);
	font-weight: 700;
	letter-spacing: 0.06em;
}

@media (min-width: 782px) and (orientation: landscape) {
	.p26-contact-sheet .wp-block-gallery.p26-sheet {
		flex: 0 0 auto;
		height: 100%;
		grid-auto-flow: column;
		column-gap: 1.5rem !important;
		row-gap: 1.5rem !important;
		padding:
			calc(var(--hz-header-h) + 1.25rem)
			0.75rem   /* half the gap each side: keeps every screen's frames centred */
			calc(var(--hz-footer-h) + 1.25rem);
	}
	.p26-contact-sheet .hz-scroller,
	.hz-scroller.p26-contact-sheet { scroll-snap-type: none; }
}

@media (max-width: 781px), (orientation: portrait) {
	.wp-block-gallery.p26-sheet {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem !important;
		padding: 1.25rem;
	}
	.wp-block-gallery.p26-sheet .p26-sheet-item > a { aspect-ratio: 5 / 4; flex: none !important; }
}
@media (min-width: 600px) and (orientation: portrait) {
	.wp-block-gallery.p26-sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================
   15. PULL QUOTES (Quote and Pullquote blocks)
   Josefin Sans bold, same size as the body text, indented, with a
   vertical line down the left.
   ========================================================== */
.wp-block-quote,
.wp-block-pullquote,
.hz-text blockquote {
	margin: 0 0 1.1em 1.25rem;
	padding: 0.1em 0 0.1em 1.1rem;
	border: 0;
	border-left: 3px solid var(--p26-gold);
	text-align: left;
	font-size: inherit;
}
.wp-block-pullquote { padding-top: 0.1em; padding-bottom: 0.1em; }
.wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; }
.wp-block-quote p,
.wp-block-pullquote p,
.hz-text blockquote p {
	margin: 0 0 0.5em;
	font-family: var(--p26-font-head);
	font-weight: 700;
	font-size: inherit;
	line-height: 1.5;
	letter-spacing: 0;
}
.wp-block-quote p:last-of-type,
.wp-block-pullquote p:last-of-type,
.hz-text blockquote p:last-of-type { margin-bottom: 0; }
.wp-block-quote cite,
.wp-block-pullquote cite {
	display: block;
	margin-top: 0.5em;
	font-family: var(--p26-font-meta);
	font-style: normal;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--p26-muted);
}

/* ==========================================================
   16. BLOG LIST CARDS + SINGLE-POST OPENING SCREEN: photo and text side by side
   (single.html's first screen uses the same .p26-blog-card layout, with
   .p26-post-opener added: title, date and category beside the photo)
   Each post is one screen: the whole photo (never cropped) on the left,
   date, title, excerpt and "View post" on plain white on the right.
   No text over the photo. Phones: photo, then the text below it.
   ========================================================== */
@media (min-width: 782px) and (orientation: landscape) {
	.wp-block-group.hz-post-panel.p26-blog-card {
		display: flex;
		align-items: stretch;
		gap: clamp(2rem, 4vw, 4.5rem);
		box-sizing: border-box;
		padding:
			calc(var(--hz-header-h) + 1.5rem)
			0
			calc(var(--hz-footer-h) + 1.5rem)
			clamp(4.5rem, 6vw, 6rem);   /* clear of the left arrow */
		background: var(--wp--preset--color--base);
	}
	.p26-blog-card .wp-block-post-featured-image {
		position: static;
		inset: auto;
		flex: 1 1 auto;
		min-width: 0;
		height: 100%;
		margin: 0;
	}
	.p26-blog-card .wp-block-post-featured-image a {
		display: block;
		height: 100%;
	}
	/* !important: the Featured Image block writes its own "crop to fill"
	   (object-fit: cover) straight onto the picture; here nothing is cropped. */
	.p26-blog-card .wp-block-post-featured-image img {
		width: 100% !important;
		height: 100% !important;
		object-fit: contain !important;
		object-position: right center;   /* the photo sits against the text */
	}
	.wp-block-group.p26-blog-card .hz-post-panel__info {
		position: static;
		flex: 0 0 clamp(20rem, 30vw, 32rem);
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 clamp(4.5rem, 6vw, 6rem) 0 0;   /* clear of the right arrow */
		background: none;
		pointer-events: auto;
	}
	.p26-blog-card .hz-post-panel__info .wp-block-post-title { margin: 0 0 0.75rem; }
}

/* ==========================================================
   17. HEADER + FOOTER FADE
   Instead of a flat tint, the bars fade into the page or photo: 80% at
   the outer edge (top of the header, bottom of the footer) down to 5%.
   The page-title row stays a flat 50%. No blur on the faded bars, since a
   blur would leave a hard edge where the fade ends.
   ========================================================== */
:root {
	/* Header + footer: 80% at the outer edge down to 5% */
	--p26-fade-strong: rgba(254, 254, 254, 0.8);
	--p26-fade-clear: rgba(254, 254, 254, 0.05);
	/* Page-title row (Blog, Recent): 65% at the left down to 0% */
	--p26-title-fade-strong: rgba(254, 254, 254, 0.65);
	--p26-title-fade-clear: rgba(254, 254, 254, 0);
	--p26-title-tint: rgba(254, 254, 254, 0.5);
}
.hz-bar.hz-header:not(.p26-header-titled),
.p26-header-titled .p26-header-main {
	background: linear-gradient(to bottom, var(--p26-fade-strong), var(--p26-fade-clear));
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.hz-bar.hz-footer {
	background: linear-gradient(to top, var(--p26-fade-strong), var(--p26-fade-clear));
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.p26-titlebar { background: var(--p26-title-tint); }

/* Phones: bars sit in the page (not over photos), so they stay solid */
@media (max-width: 781px), (orientation: portrait) {
	.hz-bar.hz-header:not(.p26-header-titled),
	.p26-header-titled .p26-header-main,
	.hz-bar.hz-footer { background: var(--wp--preset--color--base); }
	.p26-titlebar,
	.p26-titlebar.has-intro { background: var(--p26-soft); }
}
/* The "Static (no overlap)" style keeps its solid background */
.hz-bar.is-style-hz-static { background: var(--wp--preset--color--base) !important; }

/* ==========================================================
   18. PAGE-TITLE ROW: fade, no line
   The row with just the page name (Blog, Recent) fades from 65% white at
   the left to nothing at the right. The Retired row (name + explanation)
   stays a flat 50%. No line underneath either.
   ========================================================== */
.p26-titlebar {
	border-bottom: 0;
	background: linear-gradient(to right, var(--p26-title-fade-strong), var(--p26-title-fade-clear));
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	padding-right: clamp(3rem, 6vw, 5rem);   /* room for the fade to trail off after the name */
}
.p26-titlebar.has-intro {
	background: var(--p26-title-tint);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	padding-right: clamp(1rem, 3vw, 2.5rem);
}
@media (max-width: 781px), (orientation: portrait) {
	.p26-titlebar,
	.p26-titlebar.has-intro { background: var(--p26-soft); }
}

/* Blog card / post opener without a featured image: the text simply starts
   at the left instead of leaving an empty photo space. */
@media (min-width: 782px) and (orientation: landscape) {
	.wp-block-group.p26-blog-card:not(:has(.wp-block-post-featured-image img)) .hz-post-panel__info {
		flex: 1 1 auto;
		max-width: 48rem;
	}
}
/* Phones: the post's opening title sits closer to the text that follows */
@media (max-width: 781px), (orientation: portrait) {
	.wp-block-group.p26-post-opener .hz-post-panel__info { padding-bottom: 0; }
}

/* ==========================================================
   19. FOOTER DROP-DOWN MENUS OPEN UPWARD
   The footer sits at the bottom of the screen, so a drop-down (Gallery >
   Recent / Retired) opening downward would fall off the page.
   ========================================================== */
.hz-footer .wp-block-navigation .wp-block-navigation__submenu-container {
	top: auto !important;
	bottom: 100% !important;   /* touching the menu item, so the mouse never crosses a gap */
}
/* The little arrow beside "Gallery" points up in the footer */
.hz-footer .wp-block-navigation .wp-block-navigation__submenu-icon svg { transform: rotate(180deg); }

/* ==========================================================
   20. PAGE NAME IN THE HEADER + DARK EXPLANATION BAR
   The middle of the header shows the page's name (Blog, Recent, Retired,
   a post's title...) in the same font and size as the site title. The old
   title row is gone; only a page with an "Explanation bar" paragraph
   (Retired) gets a bar under the header: dark (the text colour) with light
   text (the page colour), fully solid, hiding with the header.
   ========================================================== */
.hz-header .p26-header-title {
	margin: 0;
	min-width: 0;
	max-width: 42vw;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
	font-family: var(--p26-font-head);
	font-weight: 400;
	font-size: 1.5rem;          /* same as the site title */
	letter-spacing: 0.02em;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
}

.p26-titlebar.has-intro {
	width: auto;
	display: block;
	padding: 0.75rem clamp(1rem, 3vw, 2.5rem);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.p26-titlebar.has-intro .p26-page-intro p,
.p26-titlebar.has-intro .p26-page-intro a {
	color: var(--wp--preset--color--base);
}

@media (max-width: 781px), (orientation: portrait) {
	/* Phones: site name + menu button on the first line, page name under it */
	.hz-header .p26-header-title {
		grid-area: tag;
		max-width: none;
		white-space: normal;
		text-align: left;
		font-size: 1.25rem;
		line-height: 1.2;
	}
	.hz-header .p26-header-title:empty { display: none; }
	.p26-titlebar.has-intro {
		background: var(--wp--preset--color--contrast);
	}
}

/* ==========================================================
   21. HEADER + FOOTER: FLAT 80% (no fade)
   Both bars are a solid 80% white again, with the soft blur behind them.
   ========================================================== */
@media (min-width: 782px) and (orientation: landscape) {
	.hz-bar.hz-header:not(.p26-header-titled),
	.p26-header-titled .p26-header-main,
	.hz-bar.hz-footer:not(.is-style-hz-static) {
		background: rgba(254, 254, 254, 0.8);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
	}
}


/* ==========================================================
   23. FILMSTRIP (page template "Filmstrip")
   One picture per screen, with its title, caption and camera details
   beside it. horizontal.js sizes each picture in pixels (as tall as the
   space between the bars allows, never wider than 58% of the screen).
   The !important rules switch off the Gallery block's own layout, which
   would otherwise stretch these boxes and crop the pictures.
   ========================================================== */
.p26-filmstrip .wp-block-post-content,
.p26-filmstrip .wp-block-gallery { margin: 0; }
.p26-filmstrip .p26-film-slide { margin: 0 !important; }
.p26-film-pic a { display: block; cursor: zoom-in; }
.p26-filmstrip .p26-film-pic img {
	display: block;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain !important;
}
.p26-film-title {
	margin: 0 0 0.5rem;
	font-family: var(--p26-font-head);
	font-size: clamp(1.6rem, 2.2vw, 2.25rem);
	font-weight: 600;
	line-height: 1.1;
}
.p26-film-caption { margin: 0 0 1.5rem; line-height: 1.55; }
.p26-film-exif {
	padding-top: 1rem;
	border-top: 1px solid var(--p26-line);
	font-family: var(--p26-font-meta);
	font-size: calc(0.9rem + 2px);
	color: var(--p26-muted);
}
.p26-film-title + .p26-film-exif { margin-top: 1.25rem; }
.p26-film-exif p { margin: 0 0 0.3rem; }
.p26-film-date {
	font-size: calc(0.8rem + 2px);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}
.p26-film-camera { line-height: 1.5; }

@media (min-width: 782px) and (orientation: landscape) {
	/* A continuous strip: each picture + its notes, then a fixed gap
	   (--p26-film-gap) before the next picture, so two or more share a
	   screen. The gap sits BEFORE each picture (and after the last), so an
	   arrow press lands with the picture one gap in from the left edge.
	   Any Group(s) the gallery is wrapped in (the live page has a Stack
	   group) are switched off with display: contents, so the pictures sit
	   directly in the scrolling strip - otherwise the Group's own width and
	   direction decide the layout, and it changes from page to page. */
	.p26-filmstrip { --p26-film-gap: 60px; --p26-film-edge: 60px; }

	/* Sprocket holes: two rows along the top and bottom edges of the page,
	   in true 35mm proportions (a hole 1.98 mm along the strip x 2.79 mm
	   across, every 4.75 mm - so taller than wide, eight per frame), drawn
	   at 18 x 25 px every 43 px. They are the strip's own background
	   (background-attachment: local), so they scroll with the pictures.
	   The header and footer cover them while showing. */
	main.hz-scroller.p26-filmstrip {
		--p26-hole: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='43' height='25'%3E%3Crect x='12.5' width='18' height='25' rx='3' fill='%23EDEDED'/%3E%3C/svg%3E");
		background-image: var(--p26-hole), var(--p26-hole);
		background-repeat: repeat-x, repeat-x;
		background-attachment: local, local;
		background-position: 0 26px, 0 calc(100% - 26px);
	}
	/* Frame numbers, printed outside the bottom row of holes like the edge
	   markings on real film: "12 ▸ 12A", counting on across pages. */
	.p26-film-frame {
		display: block;
		position: absolute;
		left: var(--p26-film-gap);
		bottom: 6px;
		font-family: var(--p26-font-meta);
		font-size: 14px;
		line-height: 18px;
		letter-spacing: 0.12em;
		color: var(--p26-gold);
		white-space: nowrap;
		pointer-events: none;
	}
	.p26-film-frame b { font-weight: 600; }
	.p26-filmstrip .wp-block-gallery,
	.p26-filmstrip .wp-block-group:has(.p26-film-slide) { display: contents !important; }
	.p26-filmstrip .p26-film-slide {
		flex: 0 0 auto !important;
		width: auto !important;
		height: 100%;
		display: flex !important;
		flex-direction: row !important;
		align-items: center;
		justify-content: flex-start;
		gap: clamp(2.5rem, 5vw, 5rem);
		box-sizing: border-box;
		/* Top and bottom: just clear of the sprocket holes (see below), NOT
		   clear of the header/footer - the pictures grow into the space the
		   bars leave when they hide. horizontal.js (sizeFilm) caps the
		   picture height so the bars never cover more than a sliver. */
		padding: var(--p26-film-edge) 0 var(--p26-film-edge) var(--p26-film-gap);
		position: relative;
		scroll-snap-align: start;
	}
	.p26-filmstrip .p26-film-slide:last-of-type { padding-right: var(--p26-film-gap); }
	/* The Group that held the explanation paragraph is left empty once the
	   paragraph moves up into the header bar; don't let it take up room. */
	.p26-filmstrip .wp-block-group:not(:has(*)) { display: none !important; }
	/* WordPress's gallery styles make every box inside a gallery picture
	   grow to fill the row; these two must keep their own widths. */
	.p26-filmstrip .p26-film-slide > .p26-film-pic { flex: 0 0 auto !important; min-width: 0; }
	.p26-filmstrip .p26-film-slide > .p26-film-notes {
		/* As wide as its text needs, up to a narrow column (the long camera line wraps) - so a short
		   title and caption don't leave a blank block before the next picture. */
		flex: 0 0 auto !important;
		width: max-content;
		min-width: 14rem;
		max-width: clamp(16rem, 20vw, 22rem);
	}
}

@media (max-width: 781px), (orientation: portrait) {
	.p26-filmstrip .wp-block-gallery { display: block !important; }
	.p26-filmstrip .p26-film-slide {
		display: block !important;
		width: 100% !important;
		margin: 0 0 2.5rem !important;
	}
	.p26-filmstrip .p26-film-pic img { width: 100% !important; height: auto !important; }
	.p26-film-notes { padding: 1rem 1.25rem 0; }
	.p26-film-frame { display: none; }
}

/* ==========================================================
   24. BLOG CARDS + POST OPENER: photo + title card over it
   Landscapes fill the screen (cropped); portraits are shown whole and
   centred at full height (horizontal.js sizes them in pixels). The
   title, date and category (plus the excerpt and View post on the Blog
   page) sit in a white card at 75% over the photo's bottom-left corner;
   horizontal.js places it. No photo: the text on its own, centred.
   Phones: photo, then the text below it.
   ========================================================== */
@media (min-width: 782px) and (orientation: landscape) {
	.wp-block-group.hz-post-panel.p26-blog-card {
		position: relative;
		justify-content: center;
		align-items: center;
		padding-right: clamp(4.5rem, 6vw, 6rem);   /* same as the left */
	}
	.wp-block-group.p26-blog-card .wp-block-post-featured-image {
		flex: 0 0 auto;
		height: auto;
	}
	.wp-block-group.p26-blog-card .wp-block-post-featured-image a { height: auto; }
	.wp-block-group.p26-blog-card .wp-block-post-featured-image img {
		display: block;
		object-fit: contain !important;
		object-position: center;
	}
	.wp-block-group.p26-blog-card:has(.wp-block-post-featured-image img) .hz-post-panel__info {
		position: absolute;
		left: clamp(4.5rem, 6vw, 6rem);             /* replaced by horizontal.js */
		bottom: calc(var(--hz-footer-h) + 2rem);  /* replaced by horizontal.js */
		width: fit-content;                        /* only as wide as its text */
		max-width: 34rem;
		display: block;
		box-sizing: border-box;
		padding: 1.5rem 2rem 1.6rem;
		background: rgba(254, 254, 254, 0.75);
		box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);   /* keeps its edge visible over white */
		pointer-events: auto;
		z-index: 2;
	}
	.wp-block-group.p26-blog-card .hz-post-panel__info > * { max-width: none; }

	/* Landscape photo (class p26-fill, set by horizontal.js): fills the whole
	   screen, cropped to fit; the card sits in the screen's bottom-left corner. */
	.wp-block-group.p26-blog-card.p26-fill .wp-block-post-featured-image {
		position: absolute;
		inset: 0;
		width: 100% !important;
		height: 100%;
		margin: 0;
	}
	.wp-block-group.p26-blog-card.p26-fill .wp-block-post-featured-image a { height: 100%; }
	.wp-block-group.p26-blog-card.p26-fill .wp-block-post-featured-image img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}
	/* The card is a third of the picture's width (landscapes fill the
	   screen, so a third of the screen), whatever the screen size. */
	.wp-block-group.p26-blog-card.p26-fill:has(.wp-block-post-featured-image img) .hz-post-panel__info {
		width: 33.333%;
		max-width: none;
		min-width: 18rem;
	}
}

/* The Blog cards show title, date, category and View post only; any
   excerpt (e.g. from a customised Blog template) is hidden. */
.p26-blog-card .wp-block-post-excerpt,
.p26-list-card .wp-block-post-excerpt { display: none; }

/* ==========================================================
   25. BLOG PAGE: EACH POST AS WIDE AS ITS PHOTO (like Paraffin Horizon's Blog)
   A portrait post is a panel exactly as wide as its photo at full height
   (never cropped); a landscape post fills the whole screen (class
   p26-fill); horizontal.js sets the widths. 10px of white between posts,
   like the gallery pages. The white title card (75%): full width of a
   portrait photo; a third of a landscape, in its bottom-left corner.
   Phones: photo, then the text below it.
   ========================================================== */
@media (min-width: 782px) and (orientation: landscape) {
	.wp-block-group.hz-panel.p26-list-card {
		position: relative;
		flex: 0 0 auto;
		width: calc((100% - 20px) / 3);   /* until horizontal.js sizes it */
		max-width: none;
		height: 100%;
		margin: 0 10px 0 0;
		padding: 0;
		overflow: hidden;
		background: var(--p26-soft);
		scroll-snap-align: start;
	}
	.wp-block-post-template > li:last-child > .wp-block-group.hz-panel.p26-list-card { margin-right: 0; }
	.p26-list-card .wp-block-post-featured-image {
		position: absolute;
		inset: 0;
		margin: 0;
	}
	.p26-list-card .wp-block-post-featured-image a { display: block; height: 100%; }
	.p26-list-card .wp-block-post-featured-image img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;   /* a portrait panel is its photo's own shape, so nothing is lost */
		object-position: center;
	}
	.wp-block-group.p26-list-card .hz-post-panel__info {
		position: absolute;
		left: 0;
		right: 0;
		bottom: calc(var(--hz-footer-h) + 2.5rem);
		box-sizing: border-box;
		padding: 1.4rem 1.75rem 1.5rem;
		background: rgba(254, 254, 254, 0.75);
		box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
		pointer-events: auto;
		z-index: 2;
	}
	.wp-block-group.p26-list-card .hz-post-panel__info > * { max-width: none; }
	.p26-list-card .hz-post-panel__info .wp-block-post-title { margin: 0 0 0.6rem; }
	/* Landscape (full screen): the card is a third of the picture, bottom-left */
	.wp-block-group.p26-list-card.p26-fill .hz-post-panel__info {
		left: clamp(4.5rem, 6vw, 6rem);
		right: auto;
		width: 33.333%;
		min-width: 18rem;
	}
	/* A post with no photo: the card sits on the light panel */
	.wp-block-group.p26-list-card:not(:has(.wp-block-post-featured-image img)) .hz-post-panel__info {
		box-shadow: none;
	}
}

/* ==========================================================
   26. POST OPENER WITH A PORTRAIT PHOTO
   The first panel is exactly as wide as the photo at full height (set by
   horizontal.js), like a portrait post on the Blog page: no blank space
   around it. The white card (75%) runs across the photo near the bottom.
   A short post's text then shares the same screen, beside the photo.
   ========================================================== */
@media (min-width: 782px) and (orientation: landscape) {
	.wp-block-group.hz-panel.hz-post-panel.p26-blog-card.p26-portrait-panel {
		display: block;
		position: relative;
		flex: 0 0 auto;
		height: 100%;
		padding: 0;
		overflow: hidden;
	}
	.wp-block-group.p26-blog-card.p26-portrait-panel .wp-block-post-featured-image {
		position: absolute;
		inset: 0;
		width: 100% !important;
		height: 100%;
		margin: 0;
	}
	.wp-block-group.p26-blog-card.p26-portrait-panel .wp-block-post-featured-image a { height: 100%; }
	.wp-block-group.p26-blog-card.p26-portrait-panel .wp-block-post-featured-image img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;   /* the panel is the photo's own shape, so nothing is lost */
	}
	.wp-block-group.p26-blog-card.p26-portrait-panel:has(.wp-block-post-featured-image img) .hz-post-panel__info {
		left: 0;
		right: 0;
		bottom: calc(var(--hz-footer-h) + 2.5rem);
		width: auto;
		max-width: none;
		padding: 1.4rem 1.75rem 1.5rem;
	}
}

/* ==========================================================
   27. PHONES: THE WHITE CARD OVER THE PHOTO TOO
   On phones (and upright tablets) the post's opening photo and each Blog
   card keep the photo at its natural shape, with the same white card
   (75%) laid over the bottom of the photo, as on desktop.
   ========================================================== */
@media (max-width: 781px), (orientation: portrait) {
	.wp-block-group.hz-post-panel.p26-blog-card:has(.wp-block-post-featured-image img),
	.wp-block-group.hz-post-panel.p26-list-card:has(.wp-block-post-featured-image img) {
		position: relative;
	}
	.wp-block-group.hz-post-panel.p26-list-card:has(.wp-block-post-featured-image img) { margin-bottom: 0.75rem; }
	.wp-block-group.p26-blog-card:has(.wp-block-post-featured-image img) .hz-post-panel__info,
	.wp-block-group.p26-list-card:has(.wp-block-post-featured-image img) .hz-post-panel__info {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 0.9rem 1.25rem 1rem;
		background: rgba(254, 254, 254, 0.75);
		box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.1);
	}
	.p26-blog-card .hz-post-panel__info .wp-block-post-title,
	.p26-list-card .hz-post-panel__info .wp-block-post-title {
		margin: 0 0 0.35rem;
		font-size: clamp(1.5rem, 6.5vw, 2rem);
	}
	.p26-list-card .hz-post-panel__info .wp-block-read-more {
		margin-top: 0.6rem;
		padding: 0.5em 1.4em;
	}
	/* A landscape photo is short on a phone and the card would hide most of
	   it, so it is shown in a taller 4:5 crop (it is cropped on desktop too).
	   Portraits stay whole. (Class set by horizontal.js.) */
	.p26-blog-card.p26-landscape .wp-block-post-featured-image img,
	.p26-list-card.p26-landscape .wp-block-post-featured-image img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 4 / 5;
		object-fit: cover !important;
	}
}

/* Blog home link between Previous and Next under single posts: a grid icon drawn
   with a CSS mask (no icon plugin needed); the word "Blog" stays as the link's
   accessible name but is visually hidden. */
/* .hz-pn prefix: WordPress's flex layout zeroes child margins with a stronger selector. */
.hz-pn .hz-blog-home {
	flex: 0 0 auto;
	align-self: center;
	margin: 0;
	line-height: 0;
	margin-right: var(--wp--preset--spacing--60);
}
.hz-pn .hz-blog-home a {
	display: block;
	width: 26px;
	height: 26px;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 200%;
	background-color: var(--wp--preset--color--contrast);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M6 5.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5H6a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM4 6a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm11-.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5h-3a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM13 6a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2h-3a2 2 0 01-2-2V6zm5 8.5h-3a.5.5 0 00-.5.5v3a.5.5 0 00.5.5h3a.5.5 0 00.5-.5v-3a.5.5 0 00-.5-.5zM15 13a2 2 0 00-2 2v3a2 2 0 002 2h3a2 2 0 002-2v-3a2 2 0 00-2-2h-3zm-9 1.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5H6a.5.5 0 01-.5-.5v-3a.5.5 0 01.5-.5zM4 15a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2H6a2 2 0 01-2-2v-3z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M6 5.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5H6a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM4 6a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm11-.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5h-3a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM13 6a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2h-3a2 2 0 01-2-2V6zm5 8.5h-3a.5.5 0 00-.5.5v3a.5.5 0 00.5.5h3a.5.5 0 00.5-.5v-3a.5.5 0 00-.5-.5zM15 13a2 2 0 00-2 2v3a2 2 0 002 2h3a2 2 0 002-2v-3a2 2 0 00-2-2h-3zm-9 1.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5H6a.5.5 0 01-.5-.5v-3a.5.5 0 01.5-.5zM4 15a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2H6a2 2 0 01-2-2v-3z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: opacity 0.2s ease;
}
.hz-pn .hz-blog-home a:hover { opacity: 0.75; }
.hz-pn .hz-blog-home a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }