/* =========================================================================
   Daguerre — Theme Stylesheet
   Editorial, documentary. Image-first. Fast.

   v3.5.0: Single stylesheet. Previously split into main.css (base) and
   main-v3.css (overrides). The split was load-order scaffolding from
   the v3 redesign — preserved as a banner partway down this file for
   archaeology, but functionally it's all one cascade now.
   ========================================================================= */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
	--color-bg:           #f5f5f5;
	--color-surface:      #ffffff;
	--color-ink:          #111111;
	--color-ink-soft:     #4a4a4a;
	--color-ink-muted:    #8a8a8a;
	--color-rule:         #e6e6e6;
	--color-rule-strong:  #cfcfcf;
	--color-accent:       #b8121e;
	--color-link-hover:   #b8121e;
	--color-overlay:      rgba(10, 10, 10, 0.96);

	--font-sans:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-narrow:  'Archivo Narrow', 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--maxw:         1380px;
	--gutter:       clamp(16px, 4vw, 48px);
	--header-h:     152px;

	--shadow-tile:  0 1px 2px rgba(0,0,0,0.04);
	--shadow-hover: 0 6px 24px rgba(0,0,0,0.08);

	--t-fast:       120ms ease-out;
	--t-med:        220ms ease-out;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
html.is-lightbox-open, body.is-lightbox-open { overflow: hidden; }

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "kern" 1, "liga" 1;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
a:hover, a:focus-visible { color: var(--color-link-hover); }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); -webkit-clip-path: inset(50%); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.skip-link { position: absolute; top: -100px; left: 0; padding: 8px 16px; background: var(--color-ink); color: #fff; z-index: 1000; }
.skip-link:focus { top: 0; }

/* --------------------------------------------------------------------------
   3. Header — centered editorial layout (v3.4.0+)
   --------------------------------------------------------------------------
   Stacks: wordmark image → tagline → primary nav. Non-sticky by design.
   The earlier sticky-with-side-nav layout (v2.x–v3.3.x) was traded for an
   editorial cover treatment that gives the brand the page-top once and
   lets the content take over on scroll.
   -------------------------------------------------------------------------- */
.site-header {
	position: relative;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-rule);
}

.site-header__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	/* v3.4.17: top padding zeroed — wordmark sits flush against the
	   top of the page. Bottom padding kept from v3.4.16.            */
	padding: 0 var(--gutter) clamp(20px, 3vw, 36px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(12px, 1.8vw, 20px);
}

.site-wordmark {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: var(--color-ink);
	text-align: center;
}

.site-wordmark__logo {
	display: block;
	/* v3.4.16: doubled max-height and max-width caps so the wordmark
	   actually renders ~2× larger. (Doubling max-height alone wouldn't
	   help — the previous max-width:420 was the binding constraint at
	   the wordmark's 940×130 aspect ratio.)                          */
	max-height: clamp(112px, 14vw, 176px);
	width: auto;
	height: auto;
	max-width: min(840px, 90vw);
}

.site-wordmark__text {
	font-family: var(--font-sans);
	font-weight: 200;
	font-size: clamp(36px, 5.5vw, 64px);
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--color-ink);
}

.site-wordmark__tagline {
	font-family: var(--font-narrow);
	text-transform: uppercase;
	letter-spacing: 0.32em;
	font-size: 10.5px;
	font-weight: 500;
	color: var(--color-ink-muted);
}

/* Primary nav as fixed left rail (v3.4.4+) -------------------------------
   Vertical stack pinned to the left edge of the viewport, vertically
   centered. Mirror of the social-rail pattern but with text labels and
   wider footprint. Replaces the centered horizontal nav row used in
   v3.4.0–v3.4.3.

   States:
     default   transparent background, ink color
     hover     subtle grey box appears
     current   red box (var(--color-accent)), white text — driven by WP
               menu classes (current-menu-item / current_page_item /
               current-menu-parent). The fallback menu lacks these
               classes, so for proper highlighting set up an actual
               menu in Appearance → Menus.

   Mobile (≤ 720px): rail collapses; the existing hamburger toggle
   slides the nav down from beneath the header. Same nav element,
   different positioning.
   -------------------------------------------------------------------------- */
.site-nav {
	position: fixed;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 50;
	width: 168px;
}

.site-nav__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list li {
	display: block;
	margin: 0;
}

.site-nav__list a {
	display: block;
	padding: 8px 14px;
	font-family: var(--font-narrow);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-ink-soft);
	/* v3.6.44: resting state reserves the 1px border and a transparent
	   chip background so the hover lift adds no layout shift. */
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
	transition: color var(--t-fast),
	            background-color var(--t-fast),
	            border-color var(--t-fast),
	            transform var(--t-fast);
}

/* Disable the v3.4.0 sliding underline pseudo — text-color states do the work now. */
.site-nav__list a::after { display: none; }

/* v3.6.44: lift-chip hover. On hover/focus the link rises 5px, fills with
   a 10% tint of the scheme accent, gains a 1px accent border, and the text
   turns accent. The fill uses color-mix so it tracks whatever accent the
   active color scheme defines; where color-mix is unsupported the link still
   shows border + lift + accent text, so it degrades gracefully.
   Levels:
     default  ink-soft (medium), no chrome
     hover    accent text + 5px lift + tinted chip + 1px accent border
     current  accent + underline — stays distinct from a hovered link  */
.site-nav__list a:hover,
.site-nav__list a:focus-visible {
	color: var(--color-accent);
	background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
	border-color: var(--color-accent);
	transform: translateY(-5px);
	outline: none;
}

.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a,
.site-nav__list .current-menu-parent > a {
	background: transparent;
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}
.site-nav__list .current-menu-item > a:hover,
.site-nav__list .current_page_item > a:hover,
.site-nav__list .current-menu-parent > a:hover {
	color: var(--color-accent);
	background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
	border-color: var(--color-accent);
	transform: translateY(-5px);
}

/* Submenu (dropdown) — flies out to the left since the rail sits on the right edge. */
.site-nav__list .sub-menu {
	display: none;
	position: absolute;
	top: 0;
	right: 100%;
	margin-right: 4px;
	min-width: 220px;
	background: var(--color-bg);
	border: 1px solid var(--color-rule);
	box-shadow: 0 8px 24px rgba(0,0,0,0.06);
	padding: 6px 0;
	z-index: 10;
}

.site-nav__list .menu-item-has-children { position: relative; }
.site-nav__list .menu-item-has-children:hover > .sub-menu,
.site-nav__list .menu-item-has-children:focus-within > .sub-menu {
	display: block;
}

.site-nav__list .sub-menu li { display: block; }
.site-nav__list .sub-menu a {
	display: block;
	padding: 8px 16px;
	font-size: 11.5px;
	letter-spacing: 0.12em;
	border-radius: 0;
}

/* Mobile menu toggle — positioned absolutely top-right of the header
   so it doesn't disrupt the centered brand stack. Hidden on desktop. */
.site-nav__toggle {
	display: none;
	position: absolute;
	top: 16px;
	right: var(--gutter);
	width: 36px;
	height: 36px;
	padding: 6px;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 5px;
	z-index: 5;
}

.site-nav__toggle-bar {
	height: 1.5px;
	background: var(--color-ink);
	transition: transform var(--t-med), opacity var(--t-fast);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:first-child {
	transform: translateY(3.25px) rotate(45deg);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:last-child {
	transform: translateY(-3.25px) rotate(-45deg);
}

/* Tablet / mobile / narrow-desktop: rail collapses to slide-down panel
   from header.
   v3.6.38 (H-wide-A): breakpoint extended from 720px to 1380px. Below
   --maxw (1380px) the content column fills the viewport edge-to-edge and
   the floating right-edge rail overlapped page imagery (the problem the
   rejected v3.6.36 translucent plate tried to paper over). Instead, the
   existing hamburger + slide-down nav now appears up to 1380px, giving a
   solid-plate menu at every width where the rail would otherwise float
   over photos. Above 1380px the rail sits in the bounded white-space
   gutter and shows normally. This block contains ONLY the nav-collapse
   rules; iPad/narrow-desktop content layout (grids, prose) is governed by
   separate max-width:720px blocks elsewhere and is unchanged. Accepted
   trade-off: 1025–1380px laptops lose the always-on rail in favour of the
   hamburger. The gallery.js toggle is width-agnostic and needs no change. */
@media (max-width: 1380px) {
	.site-nav__toggle { display: flex; }
	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		transform: none;
		width: auto;
		background: var(--color-bg);
		border-bottom: 1px solid var(--color-rule);
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--t-med);
		z-index: 9;
	}
	.site-nav.is-open { max-height: 80vh; overflow: auto; }
	.site-nav__list {
		flex-direction: column;
		gap: 6px;
		padding: 8px var(--gutter) 24px;
	}
	/* v3.6.45: with each link now carrying its own tinted fill-chip, the
	   former row dividers would read as lines between touching chips, so
	   they are removed and a small gap separates the rows instead. */
	.site-nav__list li {
		border-top: 0;
	}
	.site-nav__list li:first-child { border-top: 0; }
	.site-nav__list a {
		padding: 14px 12px;
		font-size: 13px;
		/* v3.6.45: touch devices have no real hover, so the tappable
		   affordance is always-on, not hover-gated — each link carries a
		   faint accent-tint fill at rest. color-mix tracks the active
		   color scheme's accent, matching the desktop chip. */
		background-color: color-mix(in srgb, var(--color-accent) 6%, transparent);
		color: var(--color-ink);
		border: 0;
		border-radius: 6px;
		transition: background-color var(--t-fast), color var(--t-fast);
	}
	/* v3.6.44/v3.6.45: the desktop lift-chip doesn't suit the stacked mobile
	   menu, so there is no lift or border here. Hover (where a pointer-capable
	   device is narrow) just deepens the resting fill slightly. */
	.site-nav__list a:hover,
	.site-nav__list a:focus-visible {
		background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
		border-color: transparent;
		transform: none;
		color: var(--color-accent);
	}
	/* v3.6.45: :active fires reliably on touch (unlike :hover), so a tap
	   flashes a stronger accent tint with accent text — tactile confirmation
	   that the press registered. */
	.site-nav__list a:active {
		background-color: color-mix(in srgb, var(--color-accent) 18%, transparent);
		color: var(--color-accent);
	}
	.site-nav__list .current-menu-item > a,
	.site-nav__list .current_page_item > a,
	.site-nav__list .current-menu-parent > a {
		background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
		color: var(--color-accent);
	}
	.site-nav__list .sub-menu {
		display: block;
		position: static;
		margin-left: 0;
		padding: 0 0 8px 18px;
		min-width: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
	}
	.site-nav__list .sub-menu a { padding: 8px 0; font-size: 12px; }
}

/* v3.6.38 (H-wide-A): the v3.6.36 iPad/narrow-desktop translucent rail
   plate (a @media (min-width:721px) and (max-width:1380px) block that put
   a frosted-glass background behind .site-nav) was removed here. It is
   superseded by extending the hamburger + slide-down nav up to 1380px
   (see the nav-collapse block above), so the rail no longer floats over
   imagery at those widths and needs no plate. */

/* --------------------------------------------------------------------------
   4. Layout helpers
   -------------------------------------------------------------------------- */
.site-main { min-height: 60vh; }

.empty-state {
	text-align: center;
	color: var(--color-ink-muted);
	padding: 80px 0;
	font-style: italic;
}

/* --------------------------------------------------------------------------
   5. Breadcrumb
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Breadcrumb sub-nav strip (v3.4.1+)
   --------------------------------------------------------------------------
   Full-width gray band that sits directly under the site header. The
   breadcrumb itself is the only thing inside it. Width-constrained to
   --maxw via .site-subnav__inner, padding via --gutter so it aligns with
   the rest of the page content.
   -------------------------------------------------------------------------- */
.site-subnav {
	background: #ededed;
	border-top: 1px solid var(--color-rule);
	border-bottom: 1px solid var(--color-rule);
}
.site-subnav__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 10px var(--gutter);
}

.breadcrumb {
	font-family: var(--font-narrow);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 11.5px;
	color: var(--color-ink-muted);
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.breadcrumb__crumb { color: var(--color-ink-soft); }
.breadcrumb__crumb--current { color: var(--color-ink); font-weight: 500; }
.breadcrumb__sep { color: var(--color-rule-strong); }

/* --------------------------------------------------------------------------
   6. News strip (homepage)
   -------------------------------------------------------------------------- */
.news-strip {
	border-bottom: 1px solid var(--color-rule);
	background: var(--color-surface);
}

.news-strip__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 22px var(--gutter);
	display: flex;
	gap: 24px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.news-strip__eyebrow {
	flex: 0 0 auto;
	font-family: var(--font-narrow);
	text-transform: uppercase;
	letter-spacing: 0.20em;
	font-size: 11px;
	font-weight: 600;
	color: var(--color-accent);
	padding-top: 6px;
	min-width: 70px;
}

.news-strip__list {
	display: flex;
	flex: 1 1 auto;
	gap: 32px;
	flex-wrap: wrap;
}

.news-item { flex: 1 1 240px; min-width: 0; }

.news-item__link {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	color: var(--color-ink);
}

.news-item__thumb {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	overflow: hidden;
	background: #ececec;
}

.news-item__thumb img { width: 100%; height: 100%; object-fit: cover; }

.news-item__text { flex: 1 1 auto; min-width: 0; }

.news-item__headline {
	display: block;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-ink);
}

.news-item__body {
	display: block;
	font-size: 13px;
	color: var(--color-ink-soft);
	line-height: 1.45;
	margin-top: 3px;
}

.news-item__link:hover .news-item__headline { color: var(--color-accent); }

/* --------------------------------------------------------------------------
   7. Homepage — category grid
   -------------------------------------------------------------------------- */
.home-categories {
	padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 7vw, 88px);
}

.home-categories__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.home-categories__intro {
	margin-bottom: clamp(28px, 4vw, 48px);
	max-width: 720px;
}

.home-categories__eyebrow {
	font-family: var(--font-narrow);
	text-transform: uppercase;
	letter-spacing: 0.20em;
	font-size: 12px;
	color: var(--color-accent);
	font-weight: 600;
	margin-bottom: 12px;
}

.home-categories__title {
	font-size: clamp(22px, 3vw, 32px);
	line-height: 1.25;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: var(--color-ink);
}

.cat-grid {
	display: grid;
	gap: clamp(16px, 2vw, 24px);
	grid-template-columns: repeat(4, 1fr);
}

/* The square variant (used on homepage + section pages) forces 1:1. */
.cat-grid--square .cat-tile__image-wrap { aspect-ratio: 1 / 1; }
@supports not (aspect-ratio: 1) {
	.cat-grid--square .cat-tile__image-wrap { padding-top: 100%; }
}

.cat-tile {
	background: var(--color-surface);
	box-shadow: var(--shadow-tile);
	border: 1px solid var(--color-rule);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--t-med), transform var(--t-med);
	color: var(--color-ink);
	will-change: transform;
}

.cat-tile:hover, .cat-tile:focus-visible {
	box-shadow: var(--shadow-hover);
	transform: translateY(-2px);
	color: var(--color-ink);
}

.cat-tile__image-wrap {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #ececec;
	position: relative;
}

@supports not (aspect-ratio: 1) {
	.cat-tile__image-wrap { padding-top: 75%; }
	.cat-tile__image, .cat-tile__placeholder { position: absolute; inset: 0; }
}

.cat-tile__image {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(.2,.6,.2,1);
}

.cat-tile:hover .cat-tile__image,
.cat-tile:focus-visible .cat-tile__image {
	transform: scale(1.04);
}

.cat-tile__placeholder {
	width: 100%; height: 100%;
	background:
		repeating-linear-gradient(135deg, #ececec 0 12px, #f3f3f3 12px 24px);
}

.cat-tile.is-empty .cat-tile__title { color: var(--color-ink-muted); }

.cat-tile__meta {
	padding: 16px 20px 20px;
	border-top: 1px solid var(--color-rule);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cat-tile__title {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.005em;
	color: var(--color-ink);
}

.cat-tile__count {
	font-family: var(--font-narrow);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 11px;
	color: var(--color-ink-muted);
}

/* --------------------------------------------------------------------------
   8. Homepage — About preview
   -------------------------------------------------------------------------- */
.home-about {
	padding: clamp(48px, 7vw, 88px) 0;
	border-top: 1px solid var(--color-rule);
	background: var(--color-surface);
}

.home-about__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: minmax(260px, 1fr) 2fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: start;
}

.home-about__media { width: 100%; max-width: 420px; }

.home-about__figure { margin: 0; }

.home-about__figure img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: #ececec;
}

@supports not (aspect-ratio: 1) {
	.home-about__figure img { height: auto; padding-top: 0; }
}

.home-about__credit {
	font-family: var(--font-narrow);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 10.5px;
	color: var(--color-ink-muted);
	margin-top: 10px;
}

.home-about__body { padding-top: 4px; }

.home-about__eyebrow {
	font-family: var(--font-narrow);
	text-transform: uppercase;
	letter-spacing: 0.20em;
	font-size: 12px;
	color: var(--color-accent);
	font-weight: 600;
	margin-bottom: 10px;
}

.home-about__title {
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin-bottom: 18px;
}

.home-about__text {
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--color-ink-soft);
	max-width: 60ch;
}

.home-about__text p { margin-bottom: 1em; }
.home-about__text p:last-child { margin-bottom: 0; }

.home-about__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 22px;
	font-family: var(--font-narrow);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 12px;
	font-weight: 500;
	color: var(--color-ink);
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
}

.home-about__link:hover { color: var(--color-accent); }

/* --------------------------------------------------------------------------
   9. Homepage — Contact preview (REMOVED in v3.4.22)
   The Contact preview block on the front page was removed. Social URLs
   render via the right-edge rail and footer list; location/tagline live
   on the standalone /contact/ page. CSS for .home-contact, .home-contact__*
   and the .home-contact__form-wrap form-mode wrapper was deleted here.
   The contact form section on the homepage uses .home-contact-form
   (separate selector) and is unaffected.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   10. Archive (work + taxonomy)
   -------------------------------------------------------------------------- */
/* v3.6.38 (E): scoped with :where(.site-main) to exclude the WordPress
   <body> element. WP body_class() adds .archive to the body on every
   archive page; the bare .archive selector below was also matching the
   body and applying the bottom padding to it. The .archive section is
   always emitted inside <main class="site-main"> (archive-work.php,
   index.php, 404.php), so wrapping the parent in :where() keeps
   specificity at 0,1,0 (same as the original bare selector) and only
   narrows the matching set. Same technique as the v3.6.35 .page fix. */
:where(.site-main) .archive {
	/* v3.4.18: top padding zeroed. The breadcrumb strip directly above
	   already provides visual separation from the header. The previous
	   24–44px top padding created a gap that visually "pushed the
	   header down" on archive pages relative to the front page.      */
	padding: 0 0 clamp(60px, 8vw, 96px);
}

.archive__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.archive__inner--centered { text-align: center; }

.archive__header {
	margin-bottom: clamp(28px, 4vw, 44px);
	padding-bottom: clamp(20px, 3vw, 28px);
	border-bottom: 1px solid var(--color-rule-strong);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.archive__eyebrow {
	font-family: var(--font-narrow);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 12px;
	color: var(--color-ink-muted);
	font-weight: 500;
}

.archive__eyebrow a { color: var(--color-ink-soft); }
.archive__eyebrow span { margin: 0 6px; color: var(--color-rule-strong); }

.archive__title {
	font-size: clamp(28px, 4.5vw, 48px);
	line-height: 1.1;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--color-ink);
}

.archive__meta {
	font-family: var(--font-narrow);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 12px;
	color: var(--color-ink-muted);
}

.archive__intro {
	max-width: 65ch;
	color: var(--color-ink-soft);
	font-size: 16px;
}

/* Work grid (cards) */
.work-grid {
	display: grid;
	gap: clamp(20px, 2.5vw, 36px) clamp(16px, 2vw, 24px);
	grid-template-columns: repeat(3, 1fr);
}

.work-card {
	background: var(--color-surface);
	border: 1px solid var(--color-rule);
	transition: box-shadow var(--t-med), transform var(--t-med);
	color: var(--color-ink);
	display: flex;
	flex-direction: column;
}

.work-card:hover, .work-card:focus-visible {
	box-shadow: var(--shadow-hover);
	transform: translateY(-2px);
	color: var(--color-ink);
}

.work-card__image-wrap {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #ececec;
	position: relative;
}

@supports not (aspect-ratio: 1) {
	.work-card__image-wrap { padding-top: 100%; }
	.work-card__image, .work-card__placeholder { position: absolute; inset: 0; }
}

.work-card__image {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(.2,.6,.2,1);
}

.work-card:hover .work-card__image,
.work-card:focus-visible .work-card__image {
	transform: scale(1.03);
}

.work-card__placeholder {
	width: 100%; height: 100%;
	background:
		repeating-linear-gradient(135deg, #ececec 0 12px, #f3f3f3 12px 24px);
}

.work-card__meta {
	padding: 14px 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.work-card__title {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.005em;
	line-height: 1.3;
}

/* Pagination */
.pagination { margin-top: clamp(40px, 5vw, 64px); text-align: center; }

.pagination .nav-links {
	display: inline-flex;
	gap: 4px;
	align-items: center;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 12px;
	font-family: var(--font-narrow);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 12px;
	color: var(--color-ink-soft);
	border: 1px solid transparent;
	transition: border-color var(--t-fast), color var(--t-fast);
}

.pagination .page-numbers:hover { color: var(--color-accent); }
.pagination .page-numbers.current {
	color: var(--color-ink);
	border-color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   11. Single Work — gallery
   -------------------------------------------------------------------------- */
.work {
	/* v3.4.18: top padding zeroed for consistency with the front page —
	   breadcrumb strip above provides separation. */
	padding: 0 0 clamp(56px, 7vw, 88px);
}

.work__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.work__header {
	max-width: 820px;
	margin: 0 auto clamp(28px, 4vw, 48px);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.work__title {
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.1;
	font-weight: 600;
	letter-spacing: -0.015em;
}

.work__intro {
	color: var(--color-ink-soft);
	font-size: 17px;
	line-height: 1.6;
	max-width: 65ch;
	margin: 0 auto;
}

/* Lead image */
.work-gallery__lead {
	margin: 0 0 clamp(28px, 4vw, 56px);
}

.work-image {
	display: block;
	width: 100%;
	background: #0a0a0a;
	overflow: hidden;
	cursor: zoom-in;
	transition: opacity var(--t-fast);
}

.work-image img {
	width: 100%;
	height: auto;
	display: block;
}

.work-image:hover { opacity: 0.92; }

.work-image--lead img {
	max-height: calc(100vh - var(--header-h) - 120px);
	width: 100%;
	object-fit: contain;
	background: #0a0a0a;
}

.work-gallery__caption {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--color-ink-soft);
	margin-top: 10px;
	max-width: 78ch;
}

.work-gallery__caption--lead {
	font-size: 14.5px;
	color: var(--color-ink);
	max-width: 90ch;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

/* Caption-grid */
.work-gallery__grid {
	display: grid;
	gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 24px);
	grid-template-columns: repeat(3, 1fr);
}

.work-gallery__item { margin: 0; }

.work-gallery__item .work-image {
	aspect-ratio: 3 / 2;
	background: #ececec;
}
@supports not (aspect-ratio: 1) {
	.work-gallery__item .work-image { padding-top: 66.66%; position: relative; }
	.work-gallery__item .work-image img { position: absolute; inset: 0; }
}

.work-gallery__item .work-image img {
	width: 100%; height: 100%;
	object-fit: cover;
}

.work__footer {
	margin-top: clamp(36px, 5vw, 56px);
	padding-top: 24px;
	border-top: 1px solid var(--color-rule);
	text-align: center;
}

.work__back {
	font-family: var(--font-narrow);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 12px;
	color: var(--color-ink-soft);
}

/* --------------------------------------------------------------------------
   12. Lightbox
   -------------------------------------------------------------------------- */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: var(--color-overlay);
	display: flex;
	flex-direction: column;
	opacity: 0;
	transition: opacity var(--t-med);
}

.lightbox[hidden] { display: none; }
.lightbox.is-open  { opacity: 1; }

.lightbox__close {
	position: absolute;
	top: 18px; right: 18px;
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	z-index: 2;
	border-radius: 4px;
	transition: background var(--t-fast);
}

.lightbox__close:hover { background: rgba(255,255,255,0.08); }

.lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 56px; height: 56px;
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	font-size: 22px;
	border-radius: 50%;
	background: rgba(255,255,255,0.06);
	transition: background var(--t-fast);
	z-index: 2;
}

.lightbox__nav:hover { background: rgba(255,255,255,0.16); }
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }

.lightbox__stage {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 80px 20px;
	min-height: 0;
}

.lightbox__image {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: opacity var(--t-fast);
}

.lightbox__image.is-loading { opacity: 0.4; }

.lightbox__bar {
	flex: 0 0 auto;
	padding: 16px 80px 28px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	color: #e8e8e8;
}

.lightbox__caption {
	flex: 1 1 auto;
	font-size: 14px;
	line-height: 1.5;
	max-width: 92ch;
}

.lightbox__counter {
	flex: 0 0 auto;
	font-family: var(--font-narrow);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 12px;
	color: #b0b0b0;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   13. Static page + native post prose
   -------------------------------------------------------------------------- */
/* v3.6.35: scoped with :where(.site-main) to exclude the WordPress <body>
   element. WP body_class() adds .page on every static page; the bare
   .page selector below was inadvertently matching the body and applying
   72px padding-top to it, pushing the entire page (including the header)
   down. The page/post-page/post-archive elements are always emitted
   inside <main class="site-main"> (header.php L136), so wrapping the
   parent in :where() keeps specificity at 0,1,0 (same as the original
   bare selector) and only narrows the matching set. This fix removes
   the root cause of the v3.6.27 → v3.6.32 About-header offset cycle. */
:where(.site-main) .page,
:where(.site-main) .post-page,
:where(.site-main) .post-archive {
	padding: clamp(40px, 6vw, 72px) 0 clamp(60px, 8vw, 96px);
}

.page__inner,
.post-page__inner,
.post-archive__inner {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.page__header,
.post-page__header,
.post-archive__header {
	margin-bottom: clamp(28px, 4vw, 44px);
}

.page__title,
.post-page__title,
.post-archive__title {
	font-size: clamp(32px, 5vw, 56px);
	line-height: 1.05;
	font-weight: 600;
	letter-spacing: -0.025em;
}

.post-page__eyebrow,
.post-archive__eyebrow,
.post-page__meta,
.post-list__meta {
	font-family: var(--font-narrow);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 12px;
	font-weight: 500;
	color: var(--color-ink-muted);
}

.post-page__eyebrow,
.post-archive__eyebrow { margin-bottom: 10px; }

.post-page__meta {
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.post-page__meta a { color: var(--color-ink-soft); }
.post-page__meta a:hover, .post-page__meta a:focus-visible { color: var(--color-accent); }

.page__featured,
.post-page__featured {
	margin: 0 calc(50% - 50vw) clamp(32px, 5vw, 52px);
	max-width: 100vw;
}

.page__featured img,
.post-page__featured img {
	width: min(100vw, 1400px);
	height: auto;
	margin: 0 auto;
}

.page__featured-caption,
.post-page__featured-caption {
	width: min(100vw, 1400px);
	margin: 10px auto 0;
	padding: 0 var(--gutter);
	font-family: var(--font-narrow);
	font-size: 12px;
	line-height: 1.45;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-ink-muted);
}

.page__content,
.post-page__content {
	font-size: clamp(18px, 1.35vw, 21px);
	line-height: 1.72;
	color: var(--color-ink);
}

.page__content > *,
.post-page__content > * { margin-bottom: 1.25em; }

.page__content > *:last-child,
.post-page__content > *:last-child { margin-bottom: 0; }

.page__content p,
.post-page__content p { margin-bottom: 1.25em; }

.page__content a,
.post-page__content a,
.post-list__excerpt a {
	color: var(--color-accent);
	border-bottom: 1px solid currentColor;
	text-decoration: none;
}

.page__content a:hover,
.page__content a:focus-visible,
.post-page__content a:hover,
.post-page__content a:focus-visible,
.post-list__excerpt a:hover,
.post-list__excerpt a:focus-visible {
	color: var(--color-ink);
}

.page__content h2,
.post-page__content h2 {
	font-size: clamp(25px, 2.4vw, 36px);
	line-height: 1.16;
	font-weight: 600;
	letter-spacing: -0.015em;
	margin-top: 2.1em;
	margin-bottom: 0.65em;
}

.page__content h3,
.post-page__content h3 {
	font-size: clamp(21px, 1.8vw, 28px);
	line-height: 1.2;
	font-weight: 600;
	margin-top: 1.75em;
	margin-bottom: 0.55em;
}

.page__content h4,
.post-page__content h4 {
	font-size: 1em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-top: 1.5em;
	margin-bottom: 0.45em;
}

.page__content ul,
.page__content ol,
.post-page__content ul,
.post-page__content ol {
	padding-left: 1.35em;
	margin-bottom: 1.35em;
}
.page__content ul,
.post-page__content ul { list-style: disc; }
.page__content ol,
.post-page__content ol { list-style: decimal; }
.page__content li,
.post-page__content li { margin-bottom: 0.45em; }

.page__content blockquote,
.post-page__content blockquote {
	margin: 2em 0;
	padding: 0.2em 0 0.2em clamp(18px, 3vw, 32px);
	border-left: 3px solid var(--color-accent);
	font-size: 1.15em;
	line-height: 1.55;
	color: var(--color-ink-soft);
}

.page__content cite,
.post-page__content cite {
	display: block;
	margin-top: 0.75em;
	font-family: var(--font-narrow);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-ink-muted);
	font-style: normal;
}

.page__content figure,
.post-page__content figure { margin: 2em 0; }
.page__content figcaption,
.post-page__content figcaption {
	margin-top: 8px;
	font-family: var(--font-narrow);
	font-size: 12px;
	line-height: 1.45;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-ink-muted);
}

.page__content .alignwide,
.post-page__content .alignwide {
	width: min(100vw, 1180px);
	max-width: min(100vw, 1180px);
	margin-left: calc(50% - min(50vw, 590px));
	margin-right: calc(50% - min(50vw, 590px));
}

.page__content .alignfull,
.post-page__content .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.page__content table,
.post-page__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9em;
	line-height: 1.45;
}
.page__content th,
.page__content td,
.post-page__content th,
.post-page__content td {
	border-bottom: 1px solid var(--color-rule);
	padding: 10px 8px;
	text-align: left;
	vertical-align: top;
}

.post-page__footer { margin-top: 36px; }
.post-page__links { font-family: var(--font-narrow); text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; }

.post-archive__description {
	max-width: 65ch;
	margin-top: 14px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--color-ink-soft);
}

.post-list {
	display: grid;
	gap: clamp(28px, 4vw, 44px);
}

.post-list__item {
	display: grid;
	grid-template-columns: minmax(180px, 34%) 1fr;
	gap: clamp(18px, 3vw, 32px);
	padding-bottom: clamp(28px, 4vw, 44px);
	border-bottom: 1px solid var(--color-rule);
}

.post-list__image-link {
	display: block;
	background: #ececec;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.post-list__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(.2,.6,.2,1);
}
.post-list__image-link:hover .post-list__image,
.post-list__image-link:focus-visible .post-list__image { transform: scale(1.03); }
.post-list__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(135deg, #ececec 0 12px, #f3f3f3 12px 24px);
}

.post-list__body { align-self: center; }
.post-list__meta { margin-bottom: 8px; }
.post-list__title {
	font-size: clamp(24px, 3vw, 36px);
	line-height: 1.12;
	font-weight: 600;
	letter-spacing: -0.018em;
	margin-bottom: 12px;
}
.post-list__title a:hover,
.post-list__title a:focus-visible { color: var(--color-accent); }
.post-list__excerpt {
	font-size: 16px;
	line-height: 1.65;
	color: var(--color-ink-soft);
}
.post-list__excerpt p { margin-bottom: 0; }

@media (max-width: 760px) {
	.page__featured,
	.post-page__featured {
		margin-left: calc(-1 * var(--gutter));
		margin-right: calc(-1 * var(--gutter));
	}
	.page__featured-caption,
	.post-page__featured-caption { padding: 0 var(--gutter); }
	.post-list__item { grid-template-columns: 1fr; }
	.post-list__body { align-self: auto; }
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
	border-top: 1px solid var(--color-rule);
	padding: 32px 0 36px;
	background: var(--color-bg);
}

.site-footer__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--gutter);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
}

.site-footer__copy {
	font-family: var(--font-narrow);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 11.5px;
	color: var(--color-ink);
	font-weight: 500;
}

.site-footer__notice {
	max-width: 720px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--color-ink-muted);
}

/* v3.6.38: footer social converted from uppercase text links to round
   icon buttons (same glyphs as the left rail). The <ul> still has no
   list styling; each <li> holds an icon link. Shown at ALL widths per
   Kameny — on desktop the left rail is the primary presence and this
   footer set is secondary; below 1380px the rail collapses to the
   hamburger and this footer set is the social presence. */
.site-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
	padding: 0;
	list-style: none;
}
.site-footer__social li { margin: 0; padding: 0; }

.site-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--color-rule);
	color: var(--color-ink-soft);
	transition:
		color var(--t-fast),
		border-color var(--t-fast),
		background var(--t-fast);
}
.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
	border-color: var(--color-rule-strong);
	background: var(--color-bg);
	outline: none;
}
.site-footer__social-link .social-rail__icon {
	width: 16px;
	height: 16px;
	display: block;
}
.site-footer__social-link .social-rail__icon path {
	fill: currentColor;
	transition: fill var(--t-fast);
}

/* Brand-color hovers — mirror of the rail. */
.site-footer__social-link--facebook:hover,
.site-footer__social-link--facebook:focus-visible { color: #1877f2; }
.site-footer__social-link--instagram:hover .social-rail__icon path,
.site-footer__social-link--instagram:focus-visible .social-rail__icon path { fill: url(#kamenko-ig-grad-footer); }
.site-footer__social-link--twitter:hover,
.site-footer__social-link--twitter:focus-visible { color: #000000; }
.site-footer__social-link--linkedin:hover,
.site-footer__social-link--linkedin:focus-visible { color: #0a66c2; }
.site-footer__social-link--youtube:hover,
.site-footer__social-link--youtube:focus-visible { color: #ff0000; }
.site-footer__social-link--vimeo:hover,
.site-footer__social-link--vimeo:focus-visible { color: #1ab7ea; }
.site-footer__social-link--tiktok:hover,
.site-footer__social-link--tiktok:focus-visible { color: #ff0050; }

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.cat-grid { grid-template-columns: repeat(2, 1fr); }
	.work-grid { grid-template-columns: repeat(2, 1fr); }
	.work-gallery__grid { grid-template-columns: repeat(2, 1fr); }

	.home-about__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.home-about__media { max-width: 380px; margin: 0 auto; }
	.home-about__body { text-align: left; }

	.lightbox__stage { padding: 60px 60px 16px; }
	.lightbox__bar   { padding: 12px 60px 24px; }
}

@media (max-width: 640px) {
	:root { --header-h: 120px; }

	.cat-grid { grid-template-columns: 1fr; }
	.work-grid { grid-template-columns: 1fr; }
	.work-gallery__grid { grid-template-columns: 1fr; }

	/* Centered brand — tighter on phones so the toggle button has room. */
	.site-header__inner {
		padding-top: clamp(20px, 6vw, 32px);
		padding-bottom: 12px;
	}
	.site-wordmark__logo { max-height: 96px; max-width: 90vw; }
	.site-wordmark__tagline { font-size: 9.5px; letter-spacing: 0.28em; }

	.news-strip__inner { gap: 14px; }
	.news-strip__list { gap: 18px; flex-direction: column; }

	.lightbox__stage { padding: 56px 16px 12px; }
	.lightbox__bar   { padding: 10px 20px 18px; flex-direction: column; align-items: flex-start; gap: 8px; }
	.lightbox__nav   { width: 44px; height: 44px; font-size: 18px; }
	.lightbox__nav--prev { left: 8px; }
	.lightbox__nav--next { right: 8px; }
}

@media (max-width: 380px) {
	/* No legacy wordmark fragments to hide here — the v3.4.0 centered
	   logo image scales down via the .site-wordmark__logo rules. */
}

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

/* --------------------------------------------------------------------------
   Social rail (v3.4.2+) — floating right-edge icons
   --------------------------------------------------------------------------
   Fixed-position vertical stack pinned to the right edge of the viewport,
   vertically centered. Monochrome (ink-soft) at rest; brand colors on
   hover — Facebook blue, Instagram gradient (defined inline in the SVG
   <defs>, referenced via fill: url(#kamenko-ig-grad)).

   Hidden on screens narrower than 720px. The footer's text-only social
   pair handles mobile and accessibility-first / no-JS cases.
   -------------------------------------------------------------------------- */
.social-rail {
	position: fixed;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 50;
	display: flex;
	flex-direction: column;
	gap: 16px; /* v3.6.38: 10→16 — larger circles need more breathing room */
	margin: 0;
	padding: 0;
}

.social-rail__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;  /* v3.6.38: 38→76 (2× per Kameny) */
	height: 76px; /* v3.6.38: 38→76 (2× per Kameny) */
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.88);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid var(--color-rule);
	color: var(--color-ink-soft);
	transition:
		color var(--t-fast),
		border-color var(--t-fast),
		transform var(--t-fast),
		background var(--t-fast);
}
.social-rail__link:hover,
.social-rail__link:focus-visible {
	transform: translateY(-1px);
	border-color: var(--color-rule-strong);
	background: #fff;
	outline: none;
}

/* Brand-color hover states. */
.social-rail__link--facebook:hover,
.social-rail__link--facebook:focus-visible {
	color: #1877f2;
}
/* v3.6.38: Instagram brand gradient on hover. The glyph's path normally
   fills with currentColor (monochrome at rest); on hover we repaint it
   with the gradient defined in the inline <defs> (id kamenko-ig-grad). */
.social-rail__link--instagram:hover .social-rail__icon path,
.social-rail__link--instagram:focus-visible .social-rail__icon path {
	fill: url(#kamenko-ig-grad);
}
/* v3.4.21: hover brand colors for the rest of the social rail. */
.social-rail__link--twitter:hover,
.social-rail__link--twitter:focus-visible {
	color: #000000; /* X brand */
}
/* v3.6.38: LinkedIn brand blue on hover. */
.social-rail__link--linkedin:hover,
.social-rail__link--linkedin:focus-visible {
	color: #0a66c2;
}
.social-rail__link--youtube:hover,
.social-rail__link--youtube:focus-visible {
	color: #ff0000;
}
.social-rail__link--vimeo:hover,
.social-rail__link--vimeo:focus-visible {
	color: #1ab7ea;
}
.social-rail__link--tiktok:hover,
.social-rail__link--tiktok:focus-visible {
	color: #ff0050; /* TikTok pink — close to brand without the multi-color complication */
}

.social-rail__icon {
	width: 32px;  /* v3.6.38: 16→32 (2× per Kameny) */
	height: 32px; /* v3.6.38: 16→32 (2× per Kameny) */
	display: block;
}
.social-rail__icon path {
	fill: currentColor;
	transition: fill var(--t-fast);
}

/* v3.6.39: hide breakpoint extended 720px → 1380px to match the nav rail.
   The left-edge .social-rail is a floating fixed element like .site-nav;
   below --maxw (1380px) it overlapped page imagery on iPad-range widths
   (iPad 10 is 810px portrait / 1080px landscape, both > the old 720px
   threshold, so the rail stayed visible there alongside the footer icons).
   The footer social icons are the social presence ≤1380px; the left rail
   is now desktop-only (>1380px), mirroring the v3.6.38 H-wide-A nav logic.
   Same accepted trade-off: 721–1380px loses the always-on left rail. */
@media (max-width: 1380px) {
	.social-rail { display: none; }
}

/* v3.6.47: footer social as the mobile/iPad fallback for the rail.
   footer.php renders the footer social list whenever EITHER placement
   (rail or footer) is enabled, tagging it with a state class:
     .site-footer__social--footer-on  → "Show in footer" is on; the
        footer icons are always visible (default, unchanged behavior).
     .site-footer__social--rail-only  → only the rail is on; the footer
        markup exists solely as the ≤1380px fallback, since .social-rail
        is hidden there. Hide it on desktop (>1380px, where the rail
        shows) and reveal it at ≤1380px to match the rail's hide point.
   When both placements are off, footer.php emits nothing, so there is no
   rule needed for that case. */
.site-footer__social--rail-only { display: none; }
@media (max-width: 1380px) {
	.site-footer__social--rail-only { display: flex; }
}

/* --------------------------------------------------------------------------
   Home contact-form section (v3.4.10+, comment updated v3.4.22)
   --------------------------------------------------------------------------
   Sits below the About preview, above the footer. Reuses .contact-form
   styles from the Contact page — only the wrapper is new. Background is
   white to break visually from the preceding section.
   (Prior to v3.4.22 this section sat below the .home-contact summary
   block, which was removed when social URLs moved to their own admin
   tab and the rail/footer became the only social surfaces.)
   -------------------------------------------------------------------------- */
.home-contact-form {
	padding: clamp(48px, 7vw, 88px) 0;
	background: #fff;
	border-top: 1px solid var(--color-rule);
}

.home-contact-form__inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.home-contact-form__header {
	text-align: center;
	margin-bottom: clamp(28px, 4vw, 48px);
}

.home-contact-form__eyebrow {
	display: block;
	font-family: var(--font-narrow);
	text-transform: uppercase;
	letter-spacing: 0.20em;
	font-size: 12px;
	color: var(--color-accent);
	font-weight: 600;
	margin-bottom: 12px;
}

.home-contact-form__title {
	font-size: clamp(22px, 2.6vw, 28px);
	line-height: 1.3;
	font-weight: 500;
	color: var(--color-ink);
	margin: 0 0 12px;
}

.home-contact-form__intro {
	font-size: 15px;
	color: var(--color-ink-soft);
	line-height: 1.55;
	margin: 0;
}


/* =============================================================================
   ╔═════════════════════════════════════════════════════════════════════════╗
   ║  v3.5.0 — START OF MERGED v3 RULES                                      ║
   ║                                                                         ║
   ║  Through v3.4.24 these rules lived in a separate file (main-v3.css)     ║
   ║  enqueued AFTER main.css so they could override v2 base styles. v3.5.0  ║
   ║  merges them into this single stylesheet, preserving the same cascade   ║
   ║  order: v2 base above this banner, v3 additions/overrides below.        ║
   ║                                                                         ║
   ║  Edit anywhere in this file. The historic v2 / v3 split was load-order  ║
   ║  scaffolding, not a functional boundary.                                ║
   ╚═════════════════════════════════════════════════════════════════════════╝
   ============================================================================= */

/* ==========================================================================
   Kamenko v3 — category tile restyle (image-forward, kamenko.com look)
   --------------------------------------------------------------------------
   Loaded after main.css, so these rules override the v2 tile styling.
   The intent is to bring the homepage / section tile grid closer to the
   editorial photojournalism feel of the legacy kamenko.com homepage:

     - Image takes most of the tile (landscape 3:2 instead of square 1:1)
     - Title sits on a narrow horizontal strip below, not a thick padded panel
     - Title shifts to editorial red on hover
     - Subtle small-cap chevron after the title appears on hover
     - Slightly tighter grid gap for an editorial wire-grid feel

   v2 markup is preserved (.cat-tile, .cat-tile__image-wrap, .cat-tile__meta,
   .cat-tile__title, .cat-tile__count) — no template changes required.
   ========================================================================== */

/* Square aspect ratio — matches kamenko.com homepage tiles --------------- */
.cat-grid--square .cat-tile__image-wrap {
	aspect-ratio: 1 / 1;
}
@supports not (aspect-ratio: 1) {
	.cat-grid--square .cat-tile__image-wrap { padding-top: 100%; }
}
.cat-tile__image-wrap {
	aspect-ratio: 1 / 1;
}
@supports not (aspect-ratio: 1) {
	.cat-tile__image-wrap { padding-top: 100%; }
}

/* Tile shell: thinner border, no shadow until hover --------------------- */
.cat-tile {
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: none;
}
.cat-tile:hover,
.cat-tile:focus-visible {
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.10);
	transform: translateY(-2px);
}

/* Image hover: a touch more zoom than v2 -------------------------------- */
.cat-tile:hover .cat-tile__image,
.cat-tile:focus-visible .cat-tile__image {
	transform: scale(1.05);
}

/* Meta strip: tighter padding, stronger title --------------------------- */
.cat-tile__meta {
	padding: 12px 16px 14px;
	border-top: none;
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.cat-tile__title {
	font-family: 'Archivo Narrow', Archivo, system-ui, sans-serif;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	transition: color 180ms ease;
}

.cat-tile:hover .cat-tile__title,
.cat-tile:focus-visible .cat-tile__title {
	color: var(--color-red, #b8121e);
}

/* Optional chevron — appears on hover ----------------------------------- */
.cat-tile__title::after {
	content: " →";
	opacity: 0;
	display: inline-block;
	margin-left: 4px;
	transform: translateX(-4px);
	transition: opacity 180ms ease, transform 180ms ease;
}
.cat-tile:hover .cat-tile__title::after,
.cat-tile:focus-visible .cat-tile__title::after {
	opacity: 1;
	transform: translateX(0);
}

/* Count badge — calmer; sits to the right of title --------------------- */
.cat-tile__count {
	flex-shrink: 0;
	font-size: 10px;
	letter-spacing: 0.16em;
	color: var(--color-ink-muted, #777);
}

/* Tighter grid gap for editorial feel ----------------------------------- */
.cat-grid {
	gap: clamp(12px, 1.5vw, 18px);
}

/* When the term has no image, don't show a totally empty box — preserve
   the placeholder pattern from v2 but make sure the grid doesn't collapse. */
.cat-tile.is-empty .cat-tile__image-wrap {
	min-height: 180px;
}

/* ==========================================================================
   v3.1 — Single Work: strip + image swap layout
   --------------------------------------------------------------------------
   The .work-stage block replaces v2's .work-gallery (lead + caption-grid).
   Now: large stage image with caption, then a horizontally-scrolling row
   of thumbnails. Click a thumb → stage swaps. Click stage → opens lightbox.
   ========================================================================== */

.work-stage {
	margin: clamp(16px, 3vw, 32px) 0;
}

/* ==========================================================================
   v3.2.1+ — Lead image with overlaid title, caption, and hover chevrons.
   The figure becomes a single relative-positioned media block. The
   image is the click target for the lightbox; the title (top), caption
   (bottom), and chevron arrows (sides) sit absolutely on top of it.
   The strip below is unchanged from v3.1.
   ========================================================================== */
.work-stage__figure {
	margin: 0 0 16px;
}

.work-stage__media {
	position: relative;
	width: 100%;
	background: #f5f5f5;
	overflow: hidden;
}

.work-stage__image-button {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: zoom-in;
}

.work-stage__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 80vh;
	object-fit: contain;
	background: #f5f5f5;
	transition: opacity 200ms ease;
}

/* Title overlay — top band, persistent across photo swaps. */
.work-stage__title-overlay {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	margin: 0;
	padding: 18px clamp(16px, 3vw, 32px) 36px;
	font-family: var(--font-narrow, 'Archivo Narrow'), Archivo, sans-serif;
	font-size: clamp(20px, 2.4vw, 28px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #fff;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.72) 0%,
		rgba(0, 0, 0, 0.42) 55%,
		rgba(0, 0, 0, 0) 100%
	);
	pointer-events: none;
	z-index: 2;
}

/* --------------------------------------------------------------------------
   Intro/dek overlay — sits below the title, magazine-cover treatment
   --------------------------------------------------------------------------
   Two modes selectable via Customizer → Story Display:

     --hover   Hidden at rest, fades in on hover/focus of the lead photo.
               Touch devices (@media hover: none) ignore the hide and keep
               it visible — pointer-less reading should never miss editorial
               context.
     --always  Permanent overlay. Sits below the title at all times.

   The intro doesn't carry its own gradient; the title overlay's gradient
   provides the dark backdrop, extended via .has-intro-visible to cover
   the intro region. Text-shadow handles readability when the intro
   wraps below the gradient region.
   -------------------------------------------------------------------------- */
.work-stage__intro-overlay {
	position: absolute;
	left: 0;
	right: 0;
	top: clamp(46px, 5vw, 64px);
	margin: 0;
	padding: 0 clamp(16px, 3vw, 32px) 24px;
	max-width: 760px;
	color: #fff;
	font-family: var(--font-narrow, 'Archivo Narrow'), Archivo, sans-serif;
	font-size: clamp(13px, 1.4vw, 15px);
	line-height: 1.5;
	font-style: italic;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
	pointer-events: none;
	z-index: 2;
}
.work-stage__intro-overlay p {
	margin: 0 0 0.5em;
}
.work-stage__intro-overlay p:last-child { margin-bottom: 0; }

/* Mode: hover-to-reveal */
.work-stage__intro-overlay--hover {
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 220ms ease, transform 220ms ease;
}
.work-stage__media:hover .work-stage__intro-overlay--hover,
.work-stage__media:focus-within .work-stage__intro-overlay--hover {
	opacity: 1;
	transform: translateY(0);
}

/* Touch / no-hover devices: hover mode falls back to always-visible
   so visitors without a pointer don't miss the editorial context. */
@media (hover: none) {
	.work-stage__intro-overlay--hover {
		opacity: 1;
		transform: none;
	}
}

/* Mode: always-visible */
.work-stage__intro-overlay--always {
	opacity: 1;
}

/* When the intro is shown (always mode, or hover mode being revealed),
   strengthen the title overlay's gradient so the lower half remains
   dark enough to read the intro text against. Implemented as a
   companion ::after on the title overlay, but kept simple: when the
   media is being hovered or always-mode is in play, the gradient on
   the title overlay extends visually via box-shadow. We keep this
   simple — text-shadow above is the primary readability tool. */

/* Caption overlay — bottom band, swaps when photo swaps. */
.work-stage__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 32px clamp(16px, 3vw, 32px) 16px;
	font-family: var(--font-narrow, 'Archivo Narrow'), Archivo, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	font-style: italic;
	color: #fff;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.78) 0%,
		rgba(0, 0, 0, 0.5) 55%,
		rgba(0, 0, 0, 0) 100%
	);
	pointer-events: none;
	z-index: 2;
}
.work-stage__caption[hidden] { display: none; }

/* Hover chevron arrows — minimal directional indicators with an
   invisibly-larger click target than the visible chevron. Hidden at
   boundaries (first photo hides --prev, last hides --next) and
   completely hidden on touch devices that have swipe + tap-thumb. */
.work-stage__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 60px;
	height: 80px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	z-index: 3;
	opacity: 0;
	transition: opacity 200ms ease;
	display: flex;
	align-items: center;
}
.work-stage__nav--prev {
	left: 0;
	justify-content: flex-start;
	padding-left: 18px;
}
.work-stage__nav--next {
	right: 0;
	justify-content: flex-end;
	padding-right: 18px;
}
.work-stage__nav svg {
	display: block;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}
.work-stage__media:hover .work-stage__nav,
.work-stage__nav:focus-visible {
	opacity: 1;
}
.work-stage__nav[hidden] { display: none; }

/* Touch devices: hide chevrons entirely, swipe handles navigation. */
@media (hover: none) and (pointer: coarse) {
	.work-stage__nav { display: none; }
}

/* Strip: horizontal scroll of thumbnails --------------------------------- */
.work-stage__strip-wrap {
	position: relative;
	margin: 8px 0 0;
	/* Don't let the inner strip force this wrapper to grow with content. */
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.work-stage__strip {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 4px 2px;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}
.work-stage__strip::-webkit-scrollbar { height: 6px; }
.work-stage__strip::-webkit-scrollbar-thumb {
	background: rgba(0,0,0,0.2);
	border-radius: 3px;
}

.work-stage__thumb {
	flex: 0 0 auto;
	width: 144px;
	height: 96px;
	padding: 0;
	background: #f5f5f5;
	border: 2px solid transparent;
	cursor: pointer;
	overflow: hidden;
	opacity: 0.65;
	transition: opacity 200ms ease, border-color 200ms ease, transform 200ms ease;
	box-sizing: border-box;
}
.work-stage__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.work-stage__thumb:hover {
	opacity: 1;
}
.work-stage__thumb:focus-visible {
	outline: 2px solid var(--color-red, #b8121e);
	outline-offset: 2px;
}
.work-stage__thumb.is-active {
	opacity: 1;
	border-color: var(--color-red, #b8121e);
}

@media (max-width: 640px) {
	.work-stage__thumb { width: 116px; height: 78px; }
}

/* Strip nav buttons (only shown when strip overflows) ------------------- */
.work-stage__strip-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 36px;
	height: 36px;
	background: rgba(255,255,255,0.95);
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 50%;
	cursor: pointer;
	font-size: 16px;
	color: var(--color-ink, #111);
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	transition: background 150ms ease, color 150ms ease;
}
.work-stage__strip-nav:hover {
	background: var(--color-red, #b8121e);
	color: #fff;
}
.work-stage__strip-nav--prev { left: -8px; }
.work-stage__strip-nav--next { right: -8px; }
.work-stage__strip-nav[hidden] { display: none; }

/* Counter -------------------------------------------------------------- */
.work-stage__counter {
	margin-top: 12px;
	font-family: var(--font-narrow, 'Archivo Narrow'), Archivo, sans-serif;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-ink-muted, #777);
}

/* Hide v2 caption-grid markup if both happen to render ----------------- */
.work-stage ~ .work-gallery,
.work-stage + .work-gallery { display: none; }

/* ==========================================================================
   v3.1.1 — Black & white default, color on hover
   --------------------------------------------------------------------------
   Editorial gesture lifted from kamenko.com: category tile images and
   single-work thumbnail strip images render in grayscale; gain color on
   hover. The active thumb in the strip stays in color (matches the stage).
   The big stage image itself stays in color always — it's the focal photo.
   ========================================================================== */

/* Category tile images — B/W default, color on hover ------------------- */
.cat-tile__image {
	filter: grayscale(1);
	/* Re-declare the v2 transform transition so we don't lose it when
	   we add filter to the transition list. */
	transition:
		filter 400ms ease,
		transform 600ms cubic-bezier(.2, .6, .2, 1);
}
.cat-tile:hover .cat-tile__image,
.cat-tile:focus-visible .cat-tile__image {
	filter: grayscale(0);
}

/* Story-page thumbnail strip — B/W default, color on hover or active --- */
.work-stage__thumb img {
	filter: grayscale(1);
	transition: filter 250ms ease;
}
.work-stage__thumb:hover img,
.work-stage__thumb:focus-visible img,
.work-stage__thumb.is-active img {
	filter: grayscale(0);
}

/* Respect reduced-motion preferences — keep the effect but instant ---- */
@media (prefers-reduced-motion: reduce) {
	.cat-tile__image,
	.work-stage__thumb img {
		transition: none;
	}
}

/* ==========================================================================
   v3.2.1+ — Contact page (page-contact.php)
   Centered editorial column. Big mailto: link as the primary action.
   Compact metadata block underneath (location / NPPA / social).
   No contact form — see the template comments for the rationale.
   ========================================================================== */
.contact-page {
	/* v3.4.18: top padding zeroed — breadcrumb strip above provides
	   separation from the header, matching front-page rhythm. */
	padding: 0 0 clamp(60px, 8vw, 96px);
}
.contact-page__inner {
	max-width: 640px;
	margin: 0 auto;
	padding: 0 var(--gutter, 24px);
	text-align: center;
}

.contact-page__header {
	margin: 0 0 clamp(20px, 3vw, 32px);
}
.contact-page__eyebrow {
	display: inline-block;
	font-family: var(--font-narrow, 'Archivo Narrow'), Archivo, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-red, #b8121e);
	margin: 0 0 14px;
}
.contact-page__title {
	font-size: clamp(32px, 5vw, 52px);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--color-ink, #111);
}

.contact-page__intro {
	font-size: 18px;
	line-height: 1.55;
	color: var(--color-ink-soft, #555);
	margin: 0 auto clamp(32px, 5vw, 56px);
	max-width: 52ch;
}
.contact-page__intro p { margin: 0 0 14px; }
.contact-page__intro p:last-child { margin-bottom: 0; }

/* Email link — the primary CTA. Editorial button-ish without being a
   button: black underline by default, red on hover, arrow nudges right. */
.contact-page__email {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0 auto clamp(40px, 6vw, 72px);
	padding: 4px 0 6px;
	font-family: var(--font-narrow, 'Archivo Narrow'), Archivo, sans-serif;
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--color-ink, #111);
	text-decoration: none;
	border-bottom: 2px solid var(--color-ink, #111);
	transition: color 180ms ease, border-color 180ms ease;
}
.contact-page__email:hover,
.contact-page__email:focus-visible {
	color: var(--color-red, #b8121e);
	border-bottom-color: var(--color-red, #b8121e);
}
.contact-page__email-arrow {
	display: inline-block;
	font-size: 0.85em;
	transition: transform 180ms ease;
}
.contact-page__email:hover .contact-page__email-arrow,
.contact-page__email:focus-visible .contact-page__email-arrow {
	transform: translateX(4px);
}

/* Details block — three rows, centered, compact narrow type. */
.contact-page__details {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0 auto clamp(36px, 5vw, 56px);
	max-width: 480px;
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
	padding: 24px 0;
}
.contact-page__detail {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 18px;
	align-items: baseline;
	text-align: left;
	font-family: var(--font-narrow, 'Archivo Narrow'), Archivo, sans-serif;
	font-size: 14px;
	line-height: 1.45;
}
.contact-page__label {
	margin: 0;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 11px;
	color: var(--color-ink-soft, #555);
}
.contact-page__value {
	margin: 0;
	color: var(--color-ink, #111);
}
.contact-page__value a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: #ccc;
	transition: text-decoration-color 180ms ease, color 180ms ease;
}
.contact-page__value a:hover,
.contact-page__value a:focus-visible {
	color: var(--color-red, #b8121e);
	text-decoration-color: var(--color-red, #b8121e);
}
.contact-page__social a + a { margin-left: 18px; }

/* Closing reproduction-notice line — small, italicized, restrained. */
.contact-page__notice {
	font-family: var(--font-narrow, 'Archivo Narrow'), Archivo, sans-serif;
	font-size: 12px;
	line-height: 1.5;
	font-style: italic;
	color: var(--color-ink-soft, #555);
	max-width: 48ch;
	margin: 0 auto;
}

@media (max-width: 480px) {
	.contact-page__detail {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

/* ==========================================================================
   v3.2.1+ — Contact form (rendered inside page-contact.php)
   Editorial minimal: thin black borders, generous whitespace, narrow
   type matching the rest of the contact page.
   ========================================================================== */
.contact-form {
	margin: 0 auto clamp(36px, 5vw, 56px);
	max-width: 560px;
	text-align: left;
}

.contact-form__honeypot {
	/* Hidden from real visitors but present in the DOM for bots. */
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 0 0 18px;
}
@media (max-width: 520px) {
	.contact-form__row {
		grid-template-columns: 1fr;
	}
}

.contact-form__field {
	display: flex;
	flex-direction: column;
	margin: 0 0 18px;
}
.contact-form__row .contact-form__field { margin: 0; }

.contact-form__label {
	font-family: var(--font-narrow, 'Archivo Narrow'), Archivo, sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-ink-soft, #555);
	margin: 0 0 6px;
}
.contact-form__req {
	color: var(--color-red, #b8121e);
	margin-left: 2px;
}

.contact-form__input,
.contact-form__select,
.contact-form__textarea {
	width: 100%;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	color: var(--color-ink, #111);
	background: #fff;
	border: 1px solid #d4d4d4;
	border-radius: 0;
	padding: 11px 14px;
	box-shadow: none;
	transition: border-color 180ms ease, box-shadow 180ms ease;
	-webkit-appearance: none;
	appearance: none;
}
.contact-form__textarea {
	resize: vertical;
	min-height: 140px;
}
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
	outline: 0;
	border-color: var(--color-ink, #111);
	box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}
.contact-form__select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><polyline points='1,1 6,6 11,1' stroke='%23111' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	padding-right: 38px;
}

.contact-form__actions {
	margin: 8px 0 0;
}
.contact-form__submit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 26px;
	font-family: var(--font-narrow, 'Archivo Narrow'), Archivo, sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	background: var(--color-ink, #111);
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: background 180ms ease;
}
.contact-form__submit:hover,
.contact-form__submit:focus-visible {
	background: var(--color-red, #b8121e);
	outline: 0;
}

/* Status notices shown above the form after submission. */
.contact-form__notice {
	max-width: 560px;
	margin: 0 auto clamp(20px, 3vw, 28px);
	padding: 14px 18px;
	font-family: var(--font-narrow, 'Archivo Narrow'), Archivo, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
	border-left: 3px solid;
}
.contact-form__notice strong {
	display: block;
	font-weight: 600;
	margin: 0 0 2px;
}
.contact-form__notice--success {
	background: #f0f7f0;
	border-color: #2d7a3a;
	color: #1e4525;
}
.contact-form__notice--error {
	background: #fbeeee;
	border-color: var(--color-red, #b8121e);
	color: #6b1010;
}

/* =========================================================================
   v3.2.9 — All-photos grid overlay
   - Trigger pill in the top-right of the lead-image overlay
   - Grid overlay is z-index 900 so the lightbox (z-index 1000) stacks on
     top, which is how "close lightbox returns to grid" works for free.
   - Captions are permanently visible at the bottom of every thumbnail.
   - Click a thumbnail → opens lightbox at full size. Close lightbox
     returns to grid. Close grid returns to story with last-viewed photo
     active in the strip-and-swap.
   ========================================================================= */

/* Trigger button: top-right of the lead-image media. */
.work-stage__grid-trigger {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	margin: 0;
	background: rgba(17, 17, 17, 0.7);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	font-family: 'Archivo Narrow', 'Archivo', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.work-stage__grid-trigger:hover,
.work-stage__grid-trigger:focus-visible {
	background: var(--color-red, #b8121e);
	border-color: var(--color-red, #b8121e);
	color: #fff;
	outline: none;
}
.work-stage__grid-trigger svg {
	display: block;
	flex: 0 0 auto;
}
@media (max-width: 540px) {
	.work-stage__grid-trigger-label { display: none; }
	.work-stage__grid-trigger { padding: 8px 10px; }
}

/* Overlay shell. z-index 900 — lightbox at 1000 stacks above. */
.work-allphotos {
	position: fixed;
	inset: 0;
	z-index: 900;
	background: rgba(17, 17, 17, 0.97);
	color: #fff;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	animation: work-allphotos-fade-in 200ms ease-out;
}
@keyframes work-allphotos-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Sticky header bar */
.work-allphotos__header {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	gap: 24px;
	padding: 22px 32px;
	background: rgba(17, 17, 17, 0.97);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.work-allphotos__eyebrow {
	margin: 0;
	font-family: 'Archivo Narrow', 'Archivo', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-red, #b8121e);
	flex: 0 0 auto;
	padding-top: 4px;
}
.work-allphotos__title {
	margin: 0;
	font-family: 'Archivo', sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	flex: 1 1 auto;
}
.work-allphotos__count {
	display: block;
	margin-top: 2px;
	font-family: 'Archivo Narrow', 'Archivo', sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}
.work-allphotos__close {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 160ms ease, border-color 160ms ease;
}
.work-allphotos__close:hover,
.work-allphotos__close:focus-visible {
	background: var(--color-red, #b8121e);
	border-color: var(--color-red, #b8121e);
	outline: none;
}
@media (max-width: 600px) {
	.work-allphotos__header {
		padding: 16px 18px;
		gap: 14px;
	}
	.work-allphotos__eyebrow { display: none; }
	.work-allphotos__title { font-size: 15px; }
}

/* Grid layout */
.work-allphotos__inner {
	padding: 32px;
}
.work-allphotos__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 1100px) { .work-allphotos__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .work-allphotos__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .work-allphotos__inner { padding: 18px; } }
@media (max-width: 420px)  { .work-allphotos__list { grid-template-columns: 1fr; gap: 18px; } }
.work-allphotos__item { margin: 0; }

/* Each card: photo + index badge + hover-revealed caption.
   Caption is positioned ABOVE the photo (transform from translateY(100%)
   to translateY(0)) so it slides up over the bottom portion of the
   image on hover. */
.work-allphotos__button {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.work-allphotos__photo-wrap {
	position: relative;
	display: block;
	overflow: hidden;
	background: #1a1a1a;
}
.work-allphotos__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 280ms ease;
}
.work-allphotos__index {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	font-family: 'Archivo Narrow', 'Archivo', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.85);
	background: rgba(17, 17, 17, 0.65);
	padding: 3px 7px;
	border-radius: 2px;
	pointer-events: none;
}

/* Caption overlay — positioned at the bottom of the photo and always visible.
   The dark gradient gives the white text enough contrast over any photo. */
.work-allphotos__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 14px 14px 12px;
	font-family: 'Archivo Narrow', 'Archivo', sans-serif;
	font-size: 12px;
	line-height: 1.45;
	color: #fff;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.92) 0%,
		rgba(0, 0, 0, 0.78) 60%,
		rgba(0, 0, 0, 0) 100%
	);
	pointer-events: none;
	/* Clamp captions to ~4 lines so very long ones don't take over the
	   whole tile. Full caption is in the lead/strip view. */
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Desktop: subtle image zoom remains; captions are already visible. */
@media (hover: hover) {
	.work-allphotos__button:hover .work-allphotos__image {
		transform: scale(1.03);
	}
}

/* Focus ring on the photo wrap, not the button — looks tighter. */
.work-allphotos__button:focus-visible {
	outline: none;
}
.work-allphotos__button:focus-visible .work-allphotos__photo-wrap {
	outline: 2px solid var(--color-red, #b8121e);
	outline-offset: 2px;
}

/* Reduced-motion: kill the slide and zoom animations. */
@media (prefers-reduced-motion: reduce) {
	.work-allphotos { animation: none; }
	.work-allphotos__caption,
	.work-allphotos__image { transition: none; }
	.work-allphotos__button:hover .work-allphotos__image { transform: none; }
}

/* =========================================================================
   v3.3.0 — Books CPT
   -------------------------------------------------------------------------
   Three surfaces:

     .home-books         homepage strip (between category grid and About)
     .books-archive      /books/ archive listing
     .book-card          shared card used in both surfaces above
     .book-page          /book/{slug}/ single-book page

   Type system: same Archivo + Archivo Narrow as the rest of v3. Red accent
   (--color-red) used only for hover states on links and the eyebrow rules.
   No new design tokens introduced.

   Cover aspect ratio: covers are reproduced at their natural aspect (no
   crop) inside a fixed-height wrap with object-fit: contain. Photo books
   range from square (Storm Over the Balkans) to tall portrait, and
   hard-cropping any of those would mangle the artifact.
   ========================================================================= */

/* ---------- Card (used by both home-books and books-archive) ---------- */

.book-card {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: transform var(--t-fast, 120ms ease-out);
}
.book-card:hover, .book-card:focus-visible {
	color: inherit;
	transform: translateY(-2px);
}

.book-card__cover-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	background: #efefef;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06);
	transition: box-shadow var(--t-med, 220ms ease-out);
}
.book-card:hover .book-card__cover-wrap,
.book-card:focus-visible .book-card__cover-wrap {
	box-shadow: 0 2px 4px rgba(0,0,0,0.10), 0 14px 32px rgba(0,0,0,0.10);
}

@supports not (aspect-ratio: 3 / 4) {
	.book-card__cover-wrap { padding-top: 133.333%; }
	.book-card__cover, .book-card__cover-placeholder {
		position: absolute; inset: 0; width: 100%; height: 100%;
	}
}

.book-card__cover {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fafafa;
}
.book-card__cover-placeholder {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		45deg,
		#eaeaea 0 8px,
		#f1f1f1 8px 16px
	);
}

.book-card__meta {
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.book-card__title {
	font-family: var(--font-sans, 'Archivo'), sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: var(--color-ink, #111);
}
.book-card__year {
	font-family: var(--font-narrow, 'Archivo Narrow'), sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--color-ink-muted, #8a8a8a);
}

/* ---------- Homepage Books section ---------- */

.home-books {
	background: #fff;
	padding: clamp(48px, 6vw, 88px) 0;
	border-top: 1px solid var(--color-rule, #e6e6e6);
}
.home-books__inner {
	max-width: var(--maxw, 1380px);
	margin: 0 auto;
	padding: 0 var(--gutter, 32px);
}
.home-books__intro {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: clamp(24px, 3vw, 40px);
}
.home-books__eyebrow {
	font-family: var(--font-narrow, 'Archivo Narrow'), sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-red, #b8121e);
}
.home-books__title {
	font-family: var(--font-sans, 'Archivo'), sans-serif;
	font-size: clamp(22px, 2.8vw, 32px);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: var(--color-ink, #111);
}
.home-books__list {
	display: grid;
	/* v3.4.13: tiles capped to a small fixed range (160–200px) instead
	   of stretching to fill 1fr each. v3.4.12's grid-width cap was the
	   wrong lever — the grid shrank but cards stayed proportional. Now
	   cards are explicitly small and the grid centers itself.        */
	grid-template-columns: repeat(3, minmax(160px, 200px));
	gap: clamp(20px, 3vw, 40px);
	justify-content: center;
}
@media (max-width: 720px) {
	.home-books__list {
		grid-template-columns: repeat(2, minmax(140px, 180px));
	}
}
@media (max-width: 480px) {
	.home-books__list {
		grid-template-columns: minmax(140px, 200px);
	}
}
.home-books__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: clamp(20px, 2.5vw, 28px);
	font-family: var(--font-narrow, 'Archivo Narrow'), sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--color-ink, #111);
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	transition: color var(--t-fast, 120ms ease-out);
}
.home-books__link:hover, .home-books__link:focus-visible {
	color: var(--color-red, #b8121e);
}

/* ---------- /books/ archive ---------- */

.books-archive { background: var(--color-bg, #f5f5f5); }
.book-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 3vw, 40px);
}
@media (max-width: 1100px) { .book-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .book-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .book-grid { grid-template-columns: 1fr; } }

/* ---------- /book/{slug}/ single-book page ---------- */

.book-page {
	background: #fff;
	padding: clamp(24px, 4vw, 56px) 0 clamp(48px, 6vw, 96px);
}
.book-page__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 var(--gutter, 32px);
}

.book-page__header {
	margin-bottom: clamp(32px, 4vw, 56px);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.book-page__eyebrow {
	font-family: var(--font-narrow, 'Archivo Narrow'), sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-red, #b8121e);
}
.book-page__title {
	font-family: var(--font-sans, 'Archivo'), sans-serif;
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.1;
	color: var(--color-ink, #111);
	margin: 0;
}
.book-page__subtitle {
	font-family: var(--font-narrow, 'Archivo Narrow'), sans-serif;
	font-size: clamp(15px, 1.6vw, 18px);
	font-weight: 400;
	font-style: italic;
	color: var(--color-ink-soft, #4a4a4a);
	max-width: 60ch;
}

/* Top: cover + meta column. Equal columns on desktop, stacked on mobile. */
.book-page__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
	margin-bottom: clamp(32px, 4vw, 56px);
}
@media (max-width: 760px) {
	.book-page__top { grid-template-columns: 1fr; }
}

.book-page__cover {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.book-page__cover-image {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 0 2px 6px rgba(0,0,0,0.10), 0 24px 48px rgba(0,0,0,0.10);
	background: #fafafa;
}
.book-page__cover-placeholder {
	width: 100%;
	aspect-ratio: 3 / 4;
	background: repeating-linear-gradient(
		45deg, #eaeaea 0 8px, #f1f1f1 8px 16px
	);
}

.book-page__back-cover {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
}
.book-page__back-cover-image {
	display: block;
	width: 65%;
	max-width: 320px;
	height: auto;
	box-shadow: 0 1px 4px rgba(0,0,0,0.10);
	background: #fafafa;
}
.book-page__back-cover-caption {
	font-family: var(--font-narrow, 'Archivo Narrow'), sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-ink-muted, #8a8a8a);
}

/* Meta column: definition list, dt label / dd value, ruled rows. */
.book-page__meta {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid var(--color-rule, #e6e6e6);
}
.book-page__meta-row {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--color-rule, #e6e6e6);
	margin: 0;
}
.book-page__meta-row dt {
	font-family: var(--font-narrow, 'Archivo Narrow'), sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-ink-muted, #8a8a8a);
	margin: 0;
	padding-top: 2px;
}
.book-page__meta-row dd {
	font-family: var(--font-sans, 'Archivo'), sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: var(--color-ink, #111);
	margin: 0;
}
.book-page__meta-row--note dd {
	font-style: italic;
	color: var(--color-ink-soft, #4a4a4a);
}

/* Body description: max-width for readable measure. */
.book-page__body {
	max-width: 62ch;
	margin: 0 0 clamp(40px, 5vw, 64px);
	font-family: var(--font-sans, 'Archivo'), sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: var(--color-ink, #111);
}
.book-page__body p { margin: 0 0 1em; }
.book-page__body p:last-child { margin-bottom: 0; }
.book-page__body a {
	color: var(--color-ink, #111);
	border-bottom: 1px solid var(--color-rule-strong, #cfcfcf);
	transition: color var(--t-fast, 120ms ease-out), border-color var(--t-fast, 120ms ease-out);
}
.book-page__body a:hover, .book-page__body a:focus-visible {
	color: var(--color-red, #b8121e);
	border-color: var(--color-red, #b8121e);
}

.book-page__section-eyebrow {
	font-family: var(--font-narrow, 'Archivo Narrow'), sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-red, #b8121e);
	margin-bottom: 16px;
}

/* Interior spreads — horizontal scroll strip. */
.book-page__spreads {
	margin-bottom: clamp(40px, 5vw, 64px);
}
.book-page__spreads-strip {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	padding-bottom: 12px;
	-webkit-overflow-scrolling: touch;
}
.book-page__spread {
	flex: 0 0 auto;
	width: clamp(280px, 36vw, 480px);
	margin: 0;
	scroll-snap-align: start;
}
.book-page__spread-image {
	display: block;
	width: 100%;
	height: auto;
	background: #fafafa;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Library + purchase links — two columns. */
.book-page__links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 3vw, 56px);
	padding-top: clamp(24px, 3vw, 40px);
	border-top: 1px solid var(--color-rule, #e6e6e6);
}
@media (max-width: 600px) {
	.book-page__links { grid-template-columns: 1fr; }
}
.book-page__links-title {
	font-family: var(--font-narrow, 'Archivo Narrow'), sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-ink-muted, #8a8a8a);
	margin: 0 0 14px;
}
.book-page__links-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.book-page__links-list a {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-family: var(--font-sans, 'Archivo'), sans-serif;
	font-size: 15px;
	color: var(--color-ink, #111);
	transition: color var(--t-fast, 120ms ease-out);
}
.book-page__links-list a:hover,
.book-page__links-list a:focus-visible {
	color: var(--color-red, #b8121e);
}

/* ============================================================================
   Media (Film + Video) — v3.4.19+
   ============================================================================
   Both Film and Video CPTs share one stylesheet block. Surfaces:

     .home-media          homepage strip (between Books and About). One
                          block per type: .home-media--film, .home-media--video.
     .film-grid           archive grid on /films/
     .video-grid          archive grid on /videos/
     .media-card          shared card used everywhere above. Type modifiers:
                          .media-card--film, .media-card--video (only differ
                          in the placeholder icon, no other visual change).
     .media-page          single film / single video page layout
     .media-embed         responsive 16:9 wrapper for oEmbed iframes
   ============================================================================ */

/* ---------- Homepage strip ---------- */
.home-media {
	background: var(--color-bg, #f5f5f5);
	padding: clamp(60px, 7vw, 100px) 0;
}
.home-media__inner {
	max-width: var(--maxw, 1380px);
	margin: 0 auto;
	padding: 0 var(--gutter, 32px);
	text-align: center;
}
.home-media__intro { margin-bottom: clamp(28px, 3vw, 44px); }
.home-media__eyebrow {
	font-family: var(--font-narrow, "Archivo Narrow", sans-serif);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 11.5px;
	color: var(--color-accent, #b8121e);
	margin-bottom: 14px;
}
.home-media__title {
	font-family: var(--font-serif, Georgia, serif);
	font-size: clamp(28px, 3.5vw, 44px);
	font-weight: 400;
	line-height: 1.18;
	color: var(--color-ink, #1a1a1a);
	margin: 0;
}
.home-media__list {
	display: grid;
	/* Tile sizing matches v3.4.13 books treatment for visual rhythm. */
	grid-template-columns: repeat(3, minmax(160px, 200px));
	gap: clamp(20px, 3vw, 40px);
	justify-content: center;
	margin-top: clamp(28px, 3vw, 44px);
}
@media (max-width: 720px) {
	.home-media__list {
		grid-template-columns: repeat(2, minmax(140px, 180px));
	}
}
@media (max-width: 480px) {
	.home-media__list {
		grid-template-columns: minmax(140px, 200px);
	}
}
.home-media__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: clamp(28px, 3vw, 44px);
	font-family: var(--font-narrow, sans-serif);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 12px;
	color: var(--color-ink-soft, #4a4a4a);
}
.home-media__link:hover { color: var(--color-accent, #b8121e); }

/* ---------- Archive grids ---------- */
.film-grid, .video-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: clamp(20px, 3vw, 36px);
	margin-top: clamp(20px, 3vw, 36px);
}

/* ---------- Card (shared) ---------- */
.media-card {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: transform var(--t-fast, 200ms) ease;
}
.media-card:hover, .media-card:focus-visible {
	transform: translateY(-2px);
	color: inherit;
}
.media-card__cover-wrap {
	position: relative;
	width: 100%;
	padding-top: 66.666%; /* 3:2 — film/video stills are landscape */
	background: var(--color-rule, #d9d9d9);
	overflow: hidden;
}
.media-card__cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}
.media-card:hover .media-card__cover {
	transform: scale(1.04);
}
.media-card__cover-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-rule, #d9d9d9);
	color: var(--color-ink-muted, #888);
	font-size: 32px;
}
.media-card__meta {
	padding: 12px 0 0;
	text-align: left;
}
.media-card__title {
	font-family: var(--font-serif, Georgia, serif);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
	margin: 0;
	color: var(--color-ink, #1a1a1a);
}
.media-card__year {
	display: block;
	margin-top: 4px;
	font-family: var(--font-narrow, sans-serif);
	font-size: 11.5px;
	letter-spacing: 0.12em;
	color: var(--color-ink-muted, #777);
}

/* ---------- Single page ---------- */
.media-page {
	/* Same flush-against-breadcrumb pattern as v3.4.18 archive/.work fix.
	   Top padding zeroed; bottom padding kept for footer breathing.    */
	padding: 0 0 clamp(60px, 8vw, 96px);
}
.media-page__inner {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 var(--gutter, 32px);
}
.media-page__header {
	text-align: center;
	margin: clamp(24px, 3vw, 36px) 0 clamp(28px, 3vw, 44px);
}
.media-page__eyebrow {
	font-family: var(--font-narrow, sans-serif);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 11.5px;
	color: var(--color-accent, #b8121e);
	margin-bottom: 14px;
}
.media-page__title {
	font-family: var(--font-serif, Georgia, serif);
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 16px;
	color: var(--color-ink, #1a1a1a);
}
.media-page__meta {
	font-family: var(--font-narrow, sans-serif);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 12.5px;
	color: var(--color-ink-soft, #4a4a4a);
	margin: 0;
}
.media-page__meta span { color: var(--color-rule-strong, #b0b0b0); margin: 0 4px; }
.media-page__stage {
	margin: 0 0 clamp(28px, 3.5vw, 44px);
}
.media-page__poster {
	display: block;
	width: 100%;
	height: auto;
}
.media-page__synopsis {
	max-width: 640px;
	margin: 0 auto clamp(32px, 4vw, 52px);
	font-size: 16px;
	line-height: 1.65;
	color: var(--color-ink, #1a1a1a);
}
.media-page__synopsis p { margin-bottom: 1em; }
.media-page__synopsis p:last-child { margin-bottom: 0; }
.media-page__cta {
	text-align: center;
	margin: 0;
}
.media-page__cta-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-narrow, sans-serif);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 12px;
	color: var(--color-ink-soft, #4a4a4a);
	border: 1px solid var(--color-rule, #d9d9d9);
	padding: 12px 22px;
}
.media-page__cta-link:hover {
	color: var(--color-accent, #b8121e);
	border-color: var(--color-accent, #b8121e);
}

/* ---------- oEmbed responsive wrapper ---------- */
.media-embed {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 */
	background: #000;
}
.media-embed iframe,
.media-embed embed,
.media-embed object,
.media-embed video {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}

/* ==========================================================================
   v3.6.9 — Tile grayscale enforcement
   --------------------------------------------------------------------------
   Story/category tile source files remain color and unwatermarked. The browser
   renders tiles B/W by default and restores color on hover/focus.
   ========================================================================== */
.cat-tile__image,
.work-card__image {
	filter: grayscale(100%);
	transition:
		filter 400ms ease,
		transform 600ms cubic-bezier(.2, .6, .2, 1);
}
.cat-tile:hover .cat-tile__image,
.cat-tile:focus-visible .cat-tile__image,
.work-card:hover .work-card__image,
.work-card:focus-visible .work-card__image {
	filter: grayscale(0%);
}
@media (prefers-reduced-motion: reduce) {
	.cat-tile__image,
	.work-card__image {
		transition: none;
	}
}

/* ==========================================================================
   v3.6.12 — Work intro typography + explicit caption/info controls
   ========================================================================== */
.work-stage__intro-overlay,
.work__intro {
	font-family: "Times New Roman", Times, Georgia, serif;
	font-style: italic;
	font-size: clamp(1.35rem, 1.1rem + 0.8vw, 2rem);
	line-height: 1.35;
	letter-spacing: 0.005em;
}
.work-stage__intro-overlay {
	max-width: 820px;
}
.work-stage__intro-overlay p,
.work__intro p {
	margin-bottom: 0.65em;
}


.work-stage__caption {
	pointer-events: none;
	padding-right: clamp(150px, 14vw, 190px);
}
.work-stage__caption[hidden] { display: none; }

/* (Legacy .lightbox__bar default + .lightbox:hover/:focus-within reveal
   block removed in v3.6.34 CSS cascade refactor — superseded by the
   .lightbox__figure-scoped rules in the v3.6.27 block and the
   consolidated .lightbox.is-open .lightbox__figure:hover reveal at the
   end of this file. The original .lightbox:hover scope was too broad
   and started the override pile that this refactor unwinds.) */
.lightbox__caption {
	position: relative;
	padding-right: 0;
}
.lightbox__caption-text:empty + * { display: none; }

.work-allphotos__caption {
	pointer-events: none;
	padding-right: 14px;
}

/* v3.6.18 unified: About This Story trigger sits in the bottom-right
   corner of the stage, replacing the removed v3.6.12 ⓘ toggle. */
.work-intro-trigger--stage {
	position: absolute;
	right: clamp(14px, 2vw, 24px);
	bottom: clamp(14px, 2vw, 24px);
	z-index: 5;
}
@media (max-width: 720px) {
	.work-stage__caption {
		padding-right: clamp(120px, 34vw, 150px);
	}
	.work-intro-trigger--stage {
		right: 12px;
		bottom: 12px;
		padding: 6px 10px;
		font-size: 11px;
		letter-spacing: 0.05em;
	}
}


/* --------------------------------------------------------------------------
   v3.6.15 — Work intro display mode + About This Story overlay
   -------------------------------------------------------------------------- */
.work-stage__intro-overlay--teaser {
	opacity: 1;
	max-width: min(680px, 72vw);
	pointer-events: auto;
}
.work-stage__intro-overlay--teaser p {
	margin-bottom: 0.75em;
}
.work-intro-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 7px 13px;
	border: 1px solid rgba(255,255,255,0.72);
	border-radius: 999px;
	background: rgba(0,0,0,0.42);
	color: #fff;
	font-family: var(--font-narrow, 'Archivo Narrow'), Archivo, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: none;
	cursor: pointer;
	pointer-events: auto;
	transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.work-intro-trigger:hover,
.work-intro-trigger:focus-visible {
	background: rgba(0,0,0,0.68);
	border-color: rgba(255,255,255,0.95);
	transform: translateY(-1px);
}
.work__intro--teaser .work-intro-trigger,
.work-intro-trigger--header {
	border-color: rgba(0,0,0,0.22);
	background: #111;
	color: #fff;
}
.work-intro-modal[hidden] { display: none; }
.work-intro-modal {
	position: fixed;
	inset: 0;
	z-index: 10020;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(18px, 4vw, 48px);
}
.work-intro-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.72);
}
.work-intro-modal__panel {
	position: relative;
	z-index: 1;
	width: min(760px, 94vw);
	max-height: 70vh;
	overflow-y: auto;
	background: rgba(250,248,244,0.98);
	color: #151515;
	border-radius: 18px;
	box-shadow: 0 26px 70px rgba(0,0,0,0.35);
	padding: clamp(26px, 4vw, 48px);
	outline: none;
}
.work-intro-modal__close {
	position: sticky;
	float: right;
	top: 0;
	margin: -12px -12px 8px 18px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: #111;
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
.work-intro-modal__title {
	margin: 0 0 18px;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(24px, 3vw, 36px);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.02em;
}
.work-intro-modal__body {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(17px, 1.65vw, 21px);
	line-height: 1.62;
}
.work-intro-modal__body p { margin: 0 0 1em; }
.work-intro-modal__body p:last-child { margin-bottom: 0; }
body.is-work-intro-open { overflow: hidden; }
@media (max-width: 720px) {
	.work-stage__intro-overlay--teaser {
		max-width: none;
		right: 0;
		padding-right: 16px;
	}
	.work-intro-modal {
		align-items: flex-end;
		padding: 12px;
	}
	.work-intro-modal__panel {
		width: 100%;
		max-height: 78vh;
		border-radius: 16px;
	}
}

/* ==========================================================================
   v3.6.24/v3.6.25 — Header/footer search, Featured Journal, and prose tuning
   ========================================================================== */
.site-header__inner { position: relative; }
.site-header__search {
	position: absolute;
	right: var(--gutter);
	top: clamp(34px, 7vw, 74px);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	width: min(300px, 24vw);
	z-index: 4;
}
.site-header__search-input {
	width: 100%;
	min-width: 0;
	border: 1px solid var(--color-rule-strong);
	background: rgba(255,255,255,0.58);
	color: var(--color-ink);
	font-family: var(--font-narrow);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.2;
	padding: 7px 9px;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}
.site-header__search-input:focus {
	outline: 1px solid var(--color-ink);
	outline-offset: 0;
	background: #fff;
}
.site-header__search-submit {
	flex: 0 0 auto;
	border: 1px solid var(--color-ink);
	background: var(--color-ink);
	color: #fff;
	font-family: var(--font-narrow);
	font-size: 11px;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
	padding: 8px 10px;
	transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.site-header__search-submit:hover,
.site-header__search-submit:focus-visible {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
}

.home-featured-journal {
	padding: clamp(10px, 2vw, 24px) 0 clamp(34px, 5vw, 64px);
	background: var(--color-bg);
}
.home-featured-journal__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.home-featured-journal__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(18px, 2.2vw, 32px);
}
.home-featured-card {
	display: grid;
	grid-template-columns: minmax(180px, 38%) 1fr;
	gap: clamp(16px, 2.2vw, 28px);
	align-items: stretch;
	border-top: 1px solid var(--color-rule);
	padding-top: clamp(18px, 2.2vw, 28px);
}
.home-featured-card--lead {
	grid-column: 1 / -1;
	grid-template-columns: minmax(260px, 48%) 1fr;
}
.home-featured-card__image-link {
	display: block;
	background: #ececec;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.home-featured-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(.2,.6,.2,1);
}
.home-featured-card__image-link:hover .home-featured-card__image,
.home-featured-card__image-link:focus-visible .home-featured-card__image { transform: scale(1.03); }
.home-featured-card__body {
	align-self: center;
	min-width: 0;
}
.home-featured-card__meta {
	margin-bottom: 9px;
	font-family: var(--font-narrow);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 11.5px;
	font-weight: 500;
	color: var(--color-ink-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	align-items: center;
}
.home-featured-card__meta a { color: var(--color-ink-soft); }
.home-featured-card__meta a:hover,
.home-featured-card__meta a:focus-visible { color: var(--color-accent); }
.home-featured-card__title {
	font-size: clamp(23px, 2.7vw, 38px);
	line-height: 1.08;
	font-weight: 600;
	letter-spacing: -0.018em;
	margin-bottom: 12px;
}
.home-featured-card:not(.home-featured-card--lead) .home-featured-card__title {
	font-size: clamp(21px, 2.1vw, 30px);
}
.home-featured-card__title a:hover,
.home-featured-card__title a:focus-visible { color: var(--color-accent); }
.home-featured-card__excerpt {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-style: normal;
	font-size: clamp(16px, 1.2vw, 18px);
	line-height: 1.48;
	color: var(--color-ink-soft);
	margin-bottom: 14px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.home-featured-card--lead .home-featured-card__excerpt { -webkit-line-clamp: 3; }
.home-featured-card__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--font-narrow);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-ink-soft);
}
.home-featured-card__link:hover,
.home-featured-card__link:focus-visible { color: var(--color-accent); }

.page--about { padding-top: 0; }
.page--about .page__inner { max-width: min(1400px, calc(100vw - (2 * var(--gutter)))); }
.page--about .page__featured { margin-bottom: clamp(18px, 2.6vw, 34px); }
.page--about .page__header,
.page--about .page__content {
	width: min(80%, 1120px);
	margin-left: auto;
	margin-right: auto;
}

.page__content,
.post-page__content,
.post-list__excerpt,
.post-archive__description,
.home-about__text,
.contact-page__intro,
.work-intro-modal__body {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-style: normal;
}
.page__content,
.post-page__content {
	font-size: clamp(18px, 1.25vw, 21px);
	line-height: 1.68;
}
.post-list__excerpt {
	font-size: clamp(16px, 1.1vw, 18px);
	line-height: 1.58;
	margin-bottom: 12px;
}
.post-list__meta { margin-top: 10px; margin-bottom: 0; }
.post-page__back {
	display: inline-flex;
	align-items: center;
	margin-top: 22px;
	font-family: var(--font-narrow);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-ink-soft);
}
.post-page__back:hover,
.post-page__back:focus-visible { color: var(--color-accent); }

@media (max-width: 980px) {
	.site-header__search {
		position: static;
		width: min(100%, 420px);
		margin-left: auto;
		margin-right: auto;
	}
	.home-featured-card,
	.home-featured-card--lead { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	.site-header__search {
		width: calc(100% - (2 * var(--gutter)));
		margin-top: 4px;
		padding-right: 48px;
	}
	.home-featured-journal__grid { grid-template-columns: 1fr; }
	.home-featured-card--lead { grid-column: auto; }
	.page--about .page__inner { max-width: none; }
	.page--about .page__header,
	.page--about .page__content { width: 100%; }
}

/* ===========================================================================
   v3.6.27 — About top/header correction + lightbox caption overlay correction
   =========================================================================== *//* Lightbox caption now lives inside the image figure and appears only on hover.
   Do not use .lightbox:focus-within here: the close button receives focus when
   the lightbox opens, which made the caption permanently visible. */
.lightbox__stage {
	position: relative;
	padding-bottom: 60px;
}
.lightbox__figure {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
}
.lightbox__figure .lightbox__image {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 140px);
}
.lightbox__figure .lightbox__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	padding: clamp(34px, 5vw, 72px) clamp(14px, 2vw, 26px) clamp(12px, 1.5vw, 20px);
	background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.44) 58%, rgba(0,0,0,0) 100%);
	color: #fff;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity var(--t-med), transform var(--t-med);
}
/* (v3.6.27 .lightbox__stage:hover / .lightbox__figure:hover reveal block
   removed in v3.6.34 CSS cascade refactor — superseded by the
   consolidated .lightbox.is-open .lightbox__figure:hover reveal at the
   end of this file. .lightbox__stage:hover was too broad: it revealed
   the bar whenever the cursor was anywhere over the padded stage area,
   not just over the image itself.) */
.lightbox__figure .lightbox__caption {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	max-width: 92ch;
	text-shadow: 0 1px 2px rgba(0,0,0,0.65);
}
.lightbox__figure .lightbox__counter {
	margin: 0;
	color: rgba(255,255,255,0.82);
	text-shadow: 0 1px 2px rgba(0,0,0,0.65);
}
@media (max-width: 720px) {
	/* (v3.6.27 body.kamenko-about-page .site-header mobile trim removed in
	   v3.6.34 CSS cascade refactor, then the v3.6.34 consolidated mobile
	   trim was itself removed in v3.6.35 along with the rest of the
	   About-header negative-pull block once the root cause was fixed
	   at L1082. See the v3.6.35 banner near the end of this file.) */
	.lightbox__stage { padding: 44px 18px 54px; }
	.lightbox__figure .lightbox__bar {
		padding: 34px 12px 12px;
		gap: 10px;
		flex-direction: column;
		align-items: flex-start;
	}
}
/* (v3.6.27 .lightbox:focus-within obsolescence override removed in v3.6.34
   CSS cascade refactor — no longer needed once the legacy broad-hover
   reveal at L3360 was removed in the same refactor.) */

/* ===========================================================================
   v3.6.29 — About page title/caption/breadcrumb + stage caption cleanup
   =========================================================================== */
/* (v3.6.29 .page/.page--about padding-top zero-out removed in v3.6.37 — redundant with .page--about baseline once v3.6.35 sealed the body_class leak.) */
/* About keeps its WordPress admin title, but the front-end H1 is intentionally
   not rendered by page.php. This rule guards against editor/body blocks that
   accidentally carry the old page title class. */
body.kamenko-about-page .page__title {
	display: none;
}
body.kamenko-about-page .page__featured-caption {
	display: block;
	margin-top: 10px;
	font-family: var(--font-narrow);
	font-size: 12px;
	line-height: 1.45;
	letter-spacing: 0.08em;
	text-transform: none;
	color: var(--color-ink-soft);
}
/* Stage caption has one final behavior rule: hidden by default, shown only when
   the stage media is hovered or receives keyboard focus. Older always-visible
   caption rules above have been reduced to layout-only padding. */
.work-stage__caption {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--t-med), transform var(--t-med);
	pointer-events: none;
}
.work-stage__media:hover .work-stage__caption,
.work-stage__media:focus-within .work-stage__caption {
	opacity: 1;
	transform: none;
}
.work-stage__caption[hidden] {
	display: none;
}


/* ===========================================================================
   v3.6.35 — About page geometry (root-cause fix; cleanup)
   ===========================================================================
   The v3.6.27 → v3.6.32 About-header offset cycle (five visual-fix
   attempts patched together in v3.6.34's "consolidated" block) is
   resolved at the root in v3.6.35 by scoping the .page selector at
   L1073 with :where(.site-main). That selector was inadvertently
   matching the WordPress <body> element (WP body_class() adds .page on
   every static page), applying 72px padding-top to the body and
   pushing the entire page — including the header — down. The negative
   pull on .site-header--about and the body-class wrapper zero-outs
   were band-aids over that symptom.

   Removed in this release:
     • .site-header--about { margin-top: clamp(-54px, -4.8vw, -28px) }
       and the .admin-bar / @media (max-width: 720px) variants
       (v3.6.32 attempt, consolidated in v3.6.34) — no longer needed
       and would now actively pull the header 54px above where it
       should sit.
     • .site-header--about .site-header__inner { padding-top: 0 }
       (was redundant with the global .site-header__inner padding-top:
       0 set in v3.4.17).
     • The eight-selector body.kamenko-about-page wrapper zero-out
       block (v3.6.30 origin, consolidated in v3.6.34) — every target
       was verified to have margin-top: 0 / padding-top: 0 naturally
       in baseline, so the zero-outs were cruft.

   Retained:
     • body.kamenko-about-page .page__title { display: none } —
       hides the front-end H1 on About since the portrait IS the page
       header. Page.php intentionally does not render this H1, but the
       rule guards against editor/block content that emits page-title
       classes.
     • body.kamenko-about-page .page__featured-caption { display:
       block; ... } — caption styling for the About portrait.
   Removed in v3.6.37:
     • body.kamenko-about-page .page, body.kamenko-about-page
       .page--about { padding-top: 0 } — the v3.6.29 block, redundant
       with the .page--about { padding-top: 0 } baseline once v3.6.35
       sealed the WP body_class padding leak at its root.

   Retained:
     • .page--about .page__featured { margin-top: 10px } from v3.6.34
       (the 10px breathing room between breadcrumb and portrait).

   The .site-header--about class is still added in header.php L44 and
   the kamenko-about-page body class is still added in functions.php
   kamenko_about_page_body_class(). Both are cheap to keep and may be
   useful for future targeted About-page styling.
   =========================================================================== */

/* v3.6.34: 10px breathing room between the breadcrumb strip and the
   portrait photo on About. .page__featured is the portrait wrapper;
   sits directly below the .site-subnav strip per v3.4.1/v3.4.18
   geometry. Specificity 0,2,0 beats the baseline .page__featured
   shorthand at L1127 (specificity 0,1,0). */
.page--about .page__featured {
	margin-top: 10px;
}

/* Users refer to the dark All Photos grid as the lightbox. Keep its captions
   inside the photo area, but hide them until the individual photo is hovered
   or focused. (Carried forward verbatim from v3.6.32.) */
.work-allphotos__caption {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--t-med), transform var(--t-med);
	pointer-events: none;
}
.work-allphotos__button:hover .work-allphotos__caption,
.work-allphotos__button:focus-visible .work-allphotos__caption,
.work-allphotos__button:focus-within .work-allphotos__caption {
	opacity: 1;
	transform: none;
}

/* Search result cards: align image and text vertically for Work/photo
   results. (Carried forward verbatim from v3.6.31.) */
.post-archive--search .post-list__item {
	align-items: center;
}


/* ===========================================================================
   v3.6.34 — Lightbox bar reveal (consolidated; CSS cascade refactor)
   ===========================================================================
   Single authoritative reveal pattern for the single-photo fullscreen
   lightbox bar (caption + counter). Consolidates and supersedes:
     legacy   — .lightbox:hover broad reveal (removed near L3360)
     v3.6.27  — .lightbox__stage:hover reveal (removed in v3.6.27 block)
     v3.6.27  — .lightbox:focus-within obsolescence override (removed
                in v3.6.27 block; no longer needed once the broad legacy
                rule is gone)
     v3.6.31  — duplicate bar reveal block with !important (removed)
     v3.6.32  — .lightbox.is-open qualified reveal with !important (this
                block IS the consolidated form, minus the !important)
   Specificity from .lightbox.is-open .lightbox__figure (0,3,1) wins
   without !important because the upstream conflicting broad-hover
   rules were removed as part of this consolidation. The
   .lightbox.is-open qualifier scopes the reveal to the
   operator-meaningful "lightbox actually open" state. .lightbox__bar
   base positioning and responsive padding remain at L1042 and the
   .lightbox__figure structural rules in the v3.6.27 block above
   remain untouched — only the over-broad reveal rules were removed. */
.lightbox.is-open .lightbox__figure .lightbox__bar {
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
}
.lightbox.is-open .lightbox__figure:hover .lightbox__bar,
.lightbox.is-open .lightbox__figure:focus-within .lightbox__bar {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}