/*!
Theme Name: Wavemaker Staffords
Theme URI: https://wavemakerstaffords.com
Author: Qasim Jawa
Author URI: https://techrays360.com
Description: Bespoke theme for Wavemaker Staffords — preservation breeders of the Staffordshire Bull Terrier. A dark navy-and-brass editorial design, built as a classic theme that hosts Gutenberg with a locked brand palette, plus ACF-backed dog profiles and custom blocks.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: wavemakerstaffords
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks

Wavemaker Staffords is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0  Fonts (self-hosted)
2.0  Design tokens
3.0  Reset & base
4.0  Accessibility & WordPress core
5.0  Layout
6.0  Announcement bar
7.0  Site header & navigation
8.0  Buttons & shared UI
9.0  Heroes
10.0 Entry content (Gutenberg)
11.0 Home sections
12.0 Blog feed, cards & pagination
13.0 Single post furniture
14.0 Page furniture
15.0 Dog profile
16.0 Search
17.0 Contact
18.0 404
19.0 Comments
20.0 Site footer
21.0 Responsive
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 Fonts (self-hosted — no third-party CDN, GDPR-safe)
--------------------------------------------------------------*/
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/cormorant-garamond-400-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/cormorant-garamond-400-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/cormorant-garamond-500-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/cormorant-garamond-500-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/cormorant-garamond-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/cormorant-garamond-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/cormorant-garamond-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/cormorant-garamond-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('assets/fonts/inter-300-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('assets/fonts/inter-300-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/inter-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/inter-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/inter-500-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/inter-500-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/inter-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/inter-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/inter-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/inter-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Playfair Display';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/playfair-display-400-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Playfair Display';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/playfair-display-400-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Playfair Display';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/playfair-display-600-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Playfair Display';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/playfair-display-600-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/playfair-display-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/playfair-display-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/playfair-display-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/playfair-display-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/playfair-display-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/playfair-display-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*--------------------------------------------------------------
2.0 Design tokens
--------------------------------------------------------------*/
:root {
	--bg: #0a1929;
	--bg-elev: #122842;
	--bg-deep: #050d18;
	--surface: #16314b;
	--accent: #c9a961;
	--accent-soft: #b8945f;
	--teal: #6fa3b3;
	--text: #f3ece0;
	--text-muted: #93a4b3;
	--rule: rgba(201, 169, 97, 0.25);
	--error: #d98a7a;

	--serif: 'Playfair Display', Georgia, serif;
	--italic: 'Cormorant Garamond', Georgia, serif;
	--sans: 'Inter', system-ui, sans-serif;

	/* Content measures — the reading column and its two breakout widths. */
	--measure: 720px;
	--measure-wide: 1080px;
	--container: 1280px;
	--gutter: 32px;
}

/*--------------------------------------------------------------
3.0 Reset & base
--------------------------------------------------------------*/
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	font-weight: 300;
	line-height: 1.65;
	font-size: 17px;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

a { color: var(--accent); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--text); }

/* Keyboard focus must stay visible everywhere — the design has no focus styles of its own. */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

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

/*--------------------------------------------------------------
4.0 Accessibility & WordPress core
--------------------------------------------------------------*/
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--bg-elev);
	border: 1px solid var(--accent);
	clip-path: none;
	color: var(--accent);
	display: block;
	font-size: 14px;
	font-weight: 600;
	height: auto;
	left: 20px;
	line-height: normal;
	padding: 16px 24px;
	text-decoration: none;
	top: 20px;
	width: auto;
	z-index: 100000;
}

.skip-link:focus { z-index: 100000; }

/* WordPress-required alignment and caption classes. */
.alignleft {
	float: left;
	margin-right: 2em;
	margin-bottom: 1.5em;
}

.alignright {
	float: right;
	margin-left: 2em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption { margin-bottom: 1.5em; max-width: 100%; }
.wp-caption img[class*="wp-image-"] { margin-left: auto; margin-right: auto; }

.wp-caption-text,
.wp-element-caption {
	font-family: var(--italic);
	font-style: italic;
	color: var(--text-muted);
	font-size: 16px;
	margin-top: 14px;
	text-align: center;
}

.sticky { display: block; }
.post, .page { margin: 0; }
.updated:not(.published) { display: none; }
.page-links { clear: both; margin: 0 0 1.5em; }

/* Admin bar must not hide the sticky header. */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}

/*--------------------------------------------------------------
5.0 Layout
--------------------------------------------------------------*/
.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/*--------------------------------------------------------------
6.0 Announcement bar
--------------------------------------------------------------*/
.announcement {
	background: var(--bg-deep);
	color: var(--text-muted);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	padding: 10px var(--gutter);
	border-bottom: 1px solid var(--rule);
}

.announcement strong { color: var(--accent); font-weight: 600; }
.announcement a { color: inherit; }
.announcement a:hover strong { color: var(--text); }

/*--------------------------------------------------------------
7.0 Site header & navigation
--------------------------------------------------------------*/
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(10, 25, 41, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--rule);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 0;
}

.brand { display: flex; align-items: center; gap: 14px; }
.brand:hover .brand-name { color: var(--accent); }

.brand-mark {
	width: 52px;
	height: 52px;
	flex: none;
	border-radius: 50%;
	background: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--serif);
	color: var(--bg);
	font-weight: 700;
	font-size: 22px;
	font-style: italic;
}

/* When a custom logo is set, it replaces the "W" roundel. */
.brand-logo img { width: auto; max-height: 56px; }

.brand-text { line-height: 1.1; }

.brand-name {
	font-family: var(--serif);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--text);
	transition: color 0.2s ease;
}

.brand-tag {
	font-family: var(--italic);
	font-style: italic;
	color: var(--accent);
	font-size: 14px;
	letter-spacing: 0.05em;
}

.primary-nav ul {
	display: flex;
	gap: 26px;
	list-style: none;
	align-items: center;
}

.primary-nav > ul > li > a { white-space: nowrap; }

/* Sub-menus: the design has no dropdowns, so give them a quiet on-brand panel. */
.primary-nav li { position: relative; }

.primary-nav a {
	color: var(--text);
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 500;
	padding: 8px 0;
	position: relative;
	display: block;
}

.primary-nav a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 1px;
	background: var(--accent);
	transition: all 0.3s ease;
}

.primary-nav a:hover { color: var(--accent); }
.primary-nav a:hover::after { width: 100%; left: 0; }

.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a,
.primary-nav .current-menu-ancestor > a { color: var(--accent); }

.primary-nav .current-menu-item > a::after,
.primary-nav .current_page_item > a::after { width: 100%; left: 0; }

.primary-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	width: max-content;
	min-width: 220px;
	max-width: 320px;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	background: var(--bg-elev);
	border: 1px solid var(--rule);
	padding: 8px 0;
	display: none;
	z-index: 10;
}

.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu { display: flex; }

.primary-nav .sub-menu a { padding: 10px 20px; letter-spacing: 0.04em; }
.primary-nav .sub-menu a::after { display: none; }
.primary-nav .sub-menu a:hover { background: var(--surface); }

.social-icons { display: flex; gap: 12px; align-items: center; }

.social-icons a {
	width: 36px;
	height: 36px;
	border: 1px solid var(--rule);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text);
	font-size: 14px;
	flex: none;
}

.social-icons a:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--bg);
}

.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	flex: none;
	background: transparent;
	border: 1px solid var(--rule);
	color: var(--text);
	cursor: pointer;
	align-items: center;
	justify-content: center;
}

.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* Mobile menu — JS-driven (the design's :target trick breaks WP permalinks). */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--bg-deep);
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	overflow-y: auto;
	padding: 80px 24px;
}

/* Auto margins centre a short menu but let a long one scroll from its first item. */
.mobile-menu > ul { margin: auto 0; }

.mobile-menu.is-open { display: flex; }
body.menu-open { overflow: hidden; }

.mobile-menu ul { list-style: none; text-align: center; }
.mobile-menu li { margin: 0; }

.mobile-menu a {
	font-family: var(--serif);
	font-size: 28px;
	color: var(--text);
	padding: 10px 0;
	display: block;
}

.mobile-menu a:hover { color: var(--accent); }
.mobile-menu .sub-menu a { font-size: 20px; color: var(--text-muted); }

.mobile-close {
	position: absolute;
	top: 24px;
	right: 24px;
	font-size: 34px;
	line-height: 1;
	color: var(--text-muted);
	font-family: var(--sans);
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}

.mobile-close:hover { color: var(--accent); }

/*--------------------------------------------------------------
8.0 Buttons & shared UI
--------------------------------------------------------------*/
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 32px;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 0;
	cursor: pointer;
	transition: all 0.25s ease;
	border: 1px solid transparent;
}

.btn-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.btn-primary:hover { background: transparent; color: var(--accent); }
.btn-outline { background: transparent; color: var(--text); border-color: var(--text); }
.btn-outline:hover { background: var(--text); color: var(--bg); }

.eyebrow {
	font-family: var(--italic);
	font-style: italic;
	color: var(--accent);
	font-size: 22px;
	letter-spacing: 0.05em;
}

.section-header { text-align: center; margin-bottom: 64px; }

.section-eyebrow {
	font-family: var(--italic);
	font-style: italic;
	color: var(--accent);
	font-size: 20px;
	letter-spacing: 0.05em;
	margin-bottom: 10px;
}

.section-title {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(34px, 4.5vw, 54px);
	line-height: 1.1;
	letter-spacing: -0.005em;
	margin-bottom: 20px;
}

.section-title em { font-style: italic; color: var(--accent); font-weight: 400; }

.section-lead {
	max-width: 640px;
	margin: 0 auto;
	color: var(--text-muted);
	font-size: 17px;
}

/* The knot lockup, used as a divider and in the footer. It earns its keep as a
   breath between sections, so it needs real space around it — otherwise it
   reads as an image stuck to the paragraph above it. */
.knot-divider {
	display: block;
	text-align: center;
	max-width: 640px;
	margin-top: 72px;
	margin-bottom: 72px;
	margin-left: auto;
	margin-right: auto;
}

.knot-divider img { width: 340px; max-width: 80%; height: auto; margin: 0 auto; opacity: 0.92; }
.footer-knot { width: 160px; height: auto; display: block; margin-bottom: 20px; opacity: 0.95; }

/* Chips — used by 404 and the empty search state. */
.chip-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.chip {
	border: 1px solid var(--accent);
	color: var(--accent);
	padding: 9px 22px;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: all 0.25s ease;
}

.chip:hover { background: var(--accent); color: var(--bg); }

/* Shared search field (404 + search hero). */
.search-form { max-width: 640px; margin: 0 auto; display: flex; }

.search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-right: none;
	color: var(--text);
	font-family: var(--sans);
	font-size: 17px;
	padding: 18px 22px;
	outline: none;
	transition: border-color 0.2s ease;
}

.search-form input[type="search"]::placeholder { color: var(--text-muted); }

.search-form input[type="search"]:focus {
	border-color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent);
}

.search-form button {
	background: var(--accent);
	color: var(--bg);
	border: 1px solid var(--accent);
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0 32px;
	cursor: pointer;
	transition: all 0.25s ease;
}

.search-form button:hover { background: transparent; color: var(--accent); }

/*--------------------------------------------------------------
9.0 Heroes
--------------------------------------------------------------*/

/* 9.1 Homepage hero — full-bleed image. */
.hero {
	position: relative;
	height: calc(100vh - 100px);
	min-height: 640px;
	max-height: 900px;
	overflow: hidden;
	background: var(--bg-deep);
}

.hero-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 30%;
	transform: scale(1.04);
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(10, 25, 41, 0.45) 0%, rgba(10, 25, 41, 0.3) 40%, rgba(10, 25, 41, 0.95) 100%),
		linear-gradient(to right, rgba(10, 25, 41, 0.7) 0%, rgba(10, 25, 41, 0) 50%);
}

.hero-content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	align-items: center;
	padding: 80px var(--gutter);
}

.hero-inner { max-width: var(--container); margin: 0 auto; width: 100%; }

.hero-eyebrow {
	font-family: var(--italic);
	font-style: italic;
	color: var(--accent);
	font-size: 22px;
	letter-spacing: 0.08em;
	margin-bottom: 22px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.hero-eyebrow::before {
	content: '';
	width: 50px;
	height: 1px;
	background: var(--accent);
	display: inline-block;
	flex: none;
}

.hero-title {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(48px, 7vw, 96px);
	line-height: 1.02;
	letter-spacing: -0.01em;
	margin-bottom: 24px;
	max-width: 820px;
}

.hero-title em { font-style: italic; color: var(--accent); font-weight: 400; }

.hero-lead {
	font-size: 19px;
	font-weight: 300;
	line-height: 1.6;
	max-width: 560px;
	color: var(--text);
	opacity: 0.92;
	margin-bottom: 36px;
}

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-scroll {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	color: var(--text);
	opacity: 0.6;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-align: center;
}

.hero-scroll::after {
	content: '';
	display: block;
	width: 1px;
	height: 36px;
	background: var(--text);
	margin: 12px auto 0;
}

/* 9.2 Image heroes — single post, single page, dog profile. */
.post-hero,
.page-hero,
.dog-hero {
	position: relative;
	overflow: hidden;
	background: var(--bg-deep);
}

.post-hero { height: 70vh; min-height: 480px; }
.page-hero { height: 50vh; min-height: 420px; }
.dog-hero { height: 86vh; min-height: 560px; }

.post-hero-image,
.page-hero-image,
.dog-hero-image {
	position: absolute;
	inset: 0;
	background-size: cover;
}

.post-hero-image { background-position: center 30%; }
.page-hero-image { background-position: center 35%; }
.dog-hero-image { background-position: center 25%; }

.post-hero-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(10, 25, 41, 0.45) 0%, rgba(10, 25, 41, 0.4) 40%, rgba(10, 25, 41, 0.95) 100%),
		linear-gradient(to right, rgba(10, 25, 41, 0.7) 0%, rgba(10, 25, 41, 0) 60%);
}

.page-hero-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(10, 25, 41, 0.55) 0%, rgba(10, 25, 41, 0.5) 40%, rgba(10, 25, 41, 0.92) 100%),
		linear-gradient(to right, rgba(10, 25, 41, 0.7) 0%, rgba(10, 25, 41, 0) 65%);
}

.dog-hero-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(10, 25, 41, 0.35) 0%, rgba(10, 25, 41, 0.25) 40%, rgba(10, 25, 41, 0.96) 100%),
		linear-gradient(to right, rgba(10, 25, 41, 0.55) 0%, rgba(10, 25, 41, 0) 60%);
}

.post-hero-content,
.page-hero-content,
.dog-hero-content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	align-items: flex-end;
}

.post-hero-content { padding-bottom: 64px; }
.page-hero-content,
.dog-hero-content { padding-bottom: 56px; }

.post-hero-inner { max-width: 880px; }
.post-category { margin-bottom: 18px; }

.post-hero h1,
.page-hero h1 {
	font-family: var(--serif);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.post-hero h1 { font-size: clamp(40px, 6vw, 76px); margin-bottom: 24px; }
.page-hero h1 { font-size: clamp(40px, 6vw, 76px); margin-bottom: 18px; }

.post-hero h1 em,
.page-hero h1 em { font-style: italic; color: var(--accent); font-weight: 400; }

.page-hero .standfirst {
	font-size: 19px;
	line-height: 1.6;
	max-width: 620px;
	color: var(--text);
	opacity: 0.9;
	font-weight: 300;
}

.post-meta {
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	align-items: center;
}

.post-meta .dot { color: var(--accent); }
.post-meta a { color: var(--text-muted); }
.post-meta a:hover { color: var(--accent); }

.breadcrumb {
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 16px;
}

.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { color: var(--accent); margin: 0 8px; }

/* 9.3 Flat heroes — blog index, archive, search, contact. No image, brass hairline on top. */
.flat-hero {
	background: var(--bg-deep);
	padding: 90px 0 80px;
	text-align: center;
	position: relative;
	border-bottom: 1px solid var(--rule);
}

.flat-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 1px;
	background: var(--accent);
}

.flat-hero .eyebrow { display: block; margin-bottom: 14px; }

.flat-hero h1 {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(40px, 6vw, 76px);
	line-height: 1.05;
	margin-bottom: 18px;
}

.flat-hero h1 em { font-style: italic; color: var(--accent); font-weight: 400; }

.flat-hero p {
	color: var(--text-muted);
	font-size: 18px;
	line-height: 1.7;
	max-width: 620px;
	margin: 0 auto;
}

/* Blog index strapline is set in the italic serif. */
.flat-hero--blog p {
	font-family: var(--italic);
	font-style: italic;
	font-size: 22px;
	max-width: 600px;
}

/* Term archives put the term name itself in brass italic. */
.flat-hero--archive h1 { color: var(--accent); font-style: italic; }

.term-label,
.search-label {
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 18px;
}

.term-count {
	font-family: var(--italic);
	font-style: italic;
	font-size: 19px;
	color: var(--text-muted);
	display: block;
	margin-top: 10px;
}

.flat-hero--search h1 { font-size: clamp(34px, 5vw, 60px); line-height: 1.08; margin-bottom: 36px; }

/*--------------------------------------------------------------
10.0 Entry content (Gutenberg)

The design's centred "reading column" with full-width "breakout" images maps
directly onto Gutenberg's alignment model:

    reading column  ->  default block width   (--measure)
    breakout        ->  .alignwide            (--measure-wide)
    edge-to-edge    ->  .alignfull            (100vw)

Blocks are centred by margin rather than by wrapping the column in a div, so
Lynn can drop any block at any alignment and it lands in the right place.

Because centring relies on `margin-left/right: auto`, nothing inside
.entry-content may use the `margin` shorthand — it would reset the horizontal
margins and knock the block out of the column. Set margin-top / margin-bottom
only, and use padding for any indent.
--------------------------------------------------------------*/
.article,
.page-body {
	--flow-top: 90px;
	--flow-bottom: 70px;

	padding-top: var(--flow-top);
	padding-bottom: var(--flow-bottom);
}

/* A full-bleed block at either end of the content should meet the header or the
   footer, as the design's CTA panel does. It sits inside the padded wrapper, so
   without this it bleeds sideways but still leaves a band of background above
   or below it. Pull it back over the padding rather than removing the padding,
   so blocks that are not full-bleed keep their breathing room. */
.entry-content > .alignfull:last-child,
.entry-content > .knot-banner:last-child,
.entry-content > .cta-panel:last-child {
	margin-bottom: calc(-1 * var(--flow-bottom));
}

.entry-content > .alignfull:first-child,
.entry-content > .hero:first-child {
	margin-top: calc(-1 * var(--flow-top));
}

.entry-content > * {
	max-width: var(--measure);
	margin-left: auto;
	margin-right: auto;
}

.entry-content > .alignwide { max-width: var(--measure-wide); }

.entry-content > .alignfull {
	max-width: none;
	width: auto;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.entry-content > .alignleft { margin-left: 0; }
.entry-content > .alignright { margin-right: 0; }

/* The Wavemaker section blocks paint their own full-bleed background and carry
   their own .container, so they are meaningless at reading-column width. Break
   them out structurally rather than relying on the align attribute, so a block
   saved before full-width support existed still renders correctly. */
.entry-content > .hero,
.entry-content > .intro,
.entry-content > .featured-dogs,
.entry-content > .latest-blog,
.entry-content > .photography,
.entry-content > .knot-banner,
.entry-content > .cta-panel {
	max-width: none;
	width: auto;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Typography */
.entry-content p {
	font-size: 17px;
	font-weight: 400;
	line-height: 1.75;
	margin-bottom: 28px;
	color: var(--text);
	opacity: 0.92;
}

.entry-content > p.is-style-lead,
.entry-content .lead {
	font-size: 19px;
	line-height: 1.7;
	opacity: 1;
	margin-bottom: 30px;
}

.entry-content h2 {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 34px;
	line-height: 1.2;
	margin-top: 52px;
	margin-bottom: 22px;
	letter-spacing: -0.005em;
}

.entry-content h3 {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 24px;
	margin-top: 40px;
	margin-bottom: 16px;
}

.entry-content h4 {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 20px;
	margin-top: 32px;
	margin-bottom: 14px;
}

.entry-content h2 em,
.entry-content h3 em { font-style: italic; color: var(--accent); font-weight: 400; }

.entry-content a { border-bottom: 1px solid var(--rule); }
.entry-content a:hover { border-color: var(--accent); }

.entry-content strong { font-weight: 600; }

/* Gutenberg's native drop cap, styled to the design's brass serif capital. */
.entry-content p.has-drop-cap:not(:focus)::first-letter {
	font-family: var(--serif);
	font-style: italic;
	color: var(--accent);
	font-size: 4.2em;
	line-height: 0.78;
	float: left;
	padding: 8px 14px 0 0;
	font-weight: 600;
	text-transform: none;
	margin: 0;
}

/* Lists — indent with padding, not margin, so the auto centring survives. */
.entry-content ul,
.entry-content ol {
	margin-top: 0;
	margin-bottom: 28px;
	padding-left: 22px;
}

.entry-content li {
	font-size: 17px;
	line-height: 1.7;
	margin-bottom: 12px;
	color: var(--text);
	opacity: 0.92;
}

.entry-content li::marker { color: var(--accent); }

/* The dashed brass rule list style from the About page. */
.entry-content ul.is-style-rule {
	list-style: none;
	padding-left: 0;
}

.entry-content ul.is-style-rule li {
	padding-left: 26px;
	position: relative;
	margin-bottom: 14px;
}

.entry-content ul.is-style-rule li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 13px;
	width: 10px;
	height: 1px;
	background: var(--accent);
}

/* Quote */
.entry-content blockquote,
.wp-block-quote {
	border-left: 2px solid var(--accent);
	padding: 6px 0 6px 32px;
	margin: 40px auto;
	font-family: var(--serif);
	font-style: italic;
	font-size: 22px;
	line-height: 1.5;
	color: var(--accent);
}

.wp-block-quote p { font-size: inherit; color: inherit; opacity: 1; margin-bottom: 12px; }
.wp-block-quote cite {
	display: block;
	font-family: var(--sans);
	font-style: normal;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.wp-block-pullquote {
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	padding: 40px 0;
	margin: 56px auto;
	text-align: center;
}

.wp-block-pullquote blockquote { border: none; padding: 0; margin: 0; }

/* Code */
.wp-block-code,
.entry-content pre {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-left: 3px solid var(--accent);
	padding: 22px 26px;
	margin: 36px auto;
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 14px;
	line-height: 1.7;
	color: var(--text);
	overflow-x: auto;
}

.entry-content code {
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 0.9em;
	color: var(--accent);
}

.wp-block-code code { color: var(--text); }

/* Images & galleries */
.wp-block-image { margin-bottom: 36px; }
.wp-block-image img { width: 100%; }

.entry-content .alignfull img,
.entry-content .alignwide img { width: 100%; }

.wp-block-gallery { margin-bottom: 40px; gap: 4px; }
.wp-block-gallery .wp-block-image { margin-bottom: 0; }

/* Separator becomes the brass hairline; the "wide" style becomes the knot lockup. */
.wp-block-separator {
	border: none;
	border-top: 1px solid var(--rule);
	max-width: 200px;
	margin: 56px auto;
}

.wp-block-separator.is-style-wide { max-width: var(--measure); }

/* Buttons inherit the theme button. */
.wp-block-button__link {
	background: var(--accent);
	color: var(--bg);
	border: 1px solid var(--accent);
	border-radius: 0;
	padding: 16px 32px;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: all 0.25s ease;
}

.wp-block-button__link:hover { background: transparent; color: var(--accent); }

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--text);
	border-color: var(--text);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--text);
	color: var(--bg);
}

/* Table */
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 36px;
}

.wp-block-table th,
.wp-block-table td {
	border: 1px solid var(--rule);
	padding: 14px 18px;
	text-align: left;
	font-size: 15px;
}

.wp-block-table th {
	font-family: var(--serif);
	font-weight: 600;
	color: var(--accent);
}

/* Embeds */
.wp-block-embed { margin-bottom: 36px; }

/*--------------------------------------------------------------
11.0 Home sections
--------------------------------------------------------------*/
.intro { padding: 120px 0 100px; position: relative; }

.intro::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 1px;
	background: var(--accent);
}

.intro-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}

.intro-text { max-width: 540px; }
.intro-text .section-eyebrow,
.intro-text .section-title { text-align: left; }
.intro-text .section-title { margin-bottom: 28px; }

.intro-text p {
	color: var(--text);
	opacity: 0.88;
	margin-bottom: 18px;
	line-height: 1.7;
}

.intro-signature {
	margin-top: 30px;
	font-family: var(--italic);
	font-style: italic;
	font-size: 24px;
	color: var(--accent);
}

.intro-image {
	position: relative;
	aspect-ratio: 4/5;
	background-size: cover;
	background-position: center;
	border: 1px solid var(--rule);
}

.intro-image::after {
	content: '';
	position: absolute;
	inset: 16px;
	border: 1px solid rgba(201, 169, 97, 0.4);
	pointer-events: none;
}

.featured-dogs { padding: 100px 0; background: var(--bg-deep); position: relative; }

.dogs-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin-top: 40px;
}

.dog-card {
	position: relative;
	aspect-ratio: 4/5;
	overflow: hidden;
	background: var(--surface);
	display: block;
}

.dog-card-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.6s ease;
}

.dog-card:hover .dog-card-image { transform: scale(1.06); }

.dog-card-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(5, 13, 24, 0.95) 0%, rgba(5, 13, 24, 0.3) 50%, rgba(5, 13, 24, 0) 100%);
	display: flex;
	align-items: flex-end;
	padding: 48px;
}

.dog-card-content { width: 100%; }

.dog-card-eyebrow {
	font-family: var(--italic);
	font-style: italic;
	color: var(--accent);
	font-size: 18px;
	margin-bottom: 8px;
	letter-spacing: 0.04em;
}

.dog-card-title {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 42px;
	line-height: 1;
	margin-bottom: 14px;
	color: var(--text);
}

.dog-card-meta {
	color: var(--text-muted);
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.dog-card-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--text);
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 500;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--accent);
}

.dog-card:hover .dog-card-link { color: var(--accent); }

.latest-blog { padding: 120px 0 100px; }
.blog-cta { text-align: center; }

.photography { padding: 100px 0; background: var(--bg-deep); }

.photo-strip {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 4px;
	height: 600px;
	margin-top: 50px;
}

.photo-cell {
	background-size: cover;
	background-position: center;
	position: relative;
	overflow: hidden;
	display: block;
}

.photo-cell::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(10, 25, 41, 0);
	transition: background 0.3s ease;
}

.photo-cell:hover::after { background: rgba(10, 25, 41, 0.4); }
.photo-cell:first-child { grid-row: 1 / 3; }

/* Parallax banner — homepage Stafford Knot, and the page CTA panel. */
.knot-banner,
.cta-panel {
	position: relative;
	padding: 120px 0;
	background-size: cover;
	background-position: center 40%;
	background-attachment: fixed;
}

.cta-panel { padding: 110px 0; margin-top: 30px; }

.knot-banner-overlay,
.cta-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(10, 25, 41, 0.92) 0%, rgba(10, 25, 41, 0.7) 100%);
}

.knot-banner-content,
.cta-content {
	position: relative;
	z-index: 2;
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
	padding: 0 var(--gutter);
}

.knot-banner h2,
.cta-content h2 {
	font-family: var(--serif);
	font-size: clamp(34px, 4.5vw, 50px);
	font-weight: 600;
	line-height: 1.15;
	margin-bottom: 22px;
}

.knot-banner h2 em,
.cta-content h2 em { font-style: italic; color: var(--accent); }

.knot-banner p,
.cta-content p {
	color: var(--text);
	opacity: 0.9;
	font-size: 18px;
	margin-bottom: 32px;
	line-height: 1.7;
}

/* background-attachment: fixed is janky on iOS — fall back to scroll. */
@media (hover: none) {
	.knot-banner,
	.cta-panel { background-attachment: scroll; }
}

/*--------------------------------------------------------------
12.0 Blog feed, cards & pagination
--------------------------------------------------------------*/
.feed { padding: 80px 0 100px; }

.featured-post {
	display: grid;
	grid-template-columns: 40% 60%;
	border: 1px solid var(--rule);
	margin-bottom: 70px;
	transition: border-color 0.3s ease;
	background: var(--bg-elev);
}

.featured-post:hover { border-color: var(--accent); }

.featured-img {
	background-size: cover;
	background-position: center;
	min-height: 420px;
}

.featured-body {
	padding: 56px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.featured-meta {
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 18px;
}

.featured-body h2 {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.12;
	margin-bottom: 20px;
}

.featured-body h2 a { color: var(--text); }
.featured-body h2 a:hover { color: var(--accent); }

.featured-body p {
	color: var(--text-muted);
	font-size: 17px;
	line-height: 1.7;
	margin-bottom: 26px;
	max-width: 540px;
}

.read-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
	font-weight: 500;
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px;
}

.latest-blog .blog-grid { margin-bottom: 50px; }

.blog-card {
	background: var(--bg-elev);
	border: 1px solid var(--rule);
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, border-color 0.3s ease;
}

.blog-card:hover { transform: translateY(-4px); border-color: var(--accent); }

.blog-card-image {
	aspect-ratio: 4/3;
	background-size: cover;
	background-position: center;
	display: block;
}

.blog-card-body { padding: 28px; flex: 1; display: flex; flex-direction: column; }

.blog-card-meta {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 14px;
}

.blog-card-title {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.3;
	margin-bottom: 14px;
	color: var(--text);
}

.blog-card-title a { color: var(--text); }
.blog-card-title a:hover { color: var(--accent); }

.blog-card-excerpt {
	color: var(--text-muted);
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 20px;
	flex: 1;
}

.blog-card-readmore {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
	font-weight: 500;
}

/* Pagination — styles WordPress's own paginate_links() markup. */
.pagination {
	margin-top: 70px;
}

.pagination .nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.pagination .page-numbers {
	min-width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--rule);
	color: var(--text);
	font-size: 15px;
	letter-spacing: 0.04em;
	padding: 0 14px;
	transition: all 0.25s ease;
}

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

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

.pagination .page-numbers.dots { border: none; color: var(--text-muted); }

.pagination .prev,
.pagination .next {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/*--------------------------------------------------------------
13.0 Single post furniture
--------------------------------------------------------------*/
.tag-row {
	max-width: var(--measure);
	margin: 50px auto 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.tag-label {
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-right: 6px;
}

.tag-chip {
	border: 1px solid var(--accent);
	color: var(--accent);
	padding: 7px 16px;
	font-size: 13px;
	letter-spacing: 0.06em;
	transition: all 0.25s ease;
}

.tag-chip:hover { background: var(--accent); color: var(--bg); }

.author-bio {
	max-width: var(--measure);
	margin: 64px auto 0;
	padding: 36px 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	display: flex;
	gap: 26px;
	align-items: center;
}

.author-portrait {
	width: 92px;
	height: 92px;
	border-radius: 50%;
	flex: none;
	background-size: cover;
	background-position: center;
	border: 1px solid var(--rule);
	overflow: hidden;
}

.author-portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.author-bio .author-name {
	font-family: var(--serif);
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 6px;
}

.author-bio p { color: var(--text-muted); font-size: 15px; line-height: 1.6; margin-bottom: 8px; }
.author-bio a { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

.prevnext {
	max-width: var(--measure);
	margin: 70px auto 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}

.prevnext a { display: flex; gap: 22px; align-items: center; padding: 28px 0; color: var(--text); }

.prevnext a.next {
	justify-content: flex-end;
	text-align: right;
	flex-direction: row-reverse;
	padding-left: 22px;
}

.prevnext a.prev { padding-right: 22px; border-right: 1px solid var(--rule); }

.pn-thumb { width: 84px; height: 84px; flex: none; background-size: cover; background-position: center; }

.pn-dir {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 8px;
}

.pn-title { font-family: var(--serif); font-size: 19px; line-height: 1.3; }
.prevnext a:hover .pn-title { color: var(--accent); }

.related { padding: 90px 0 110px; background: var(--bg-deep); }
.related-head { text-align: center; margin-bottom: 50px; }
.related-head .section-eyebrow { margin-bottom: 8px; }

.related-head h2 {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(30px, 4vw, 44px);
}

.related-head h2 em { font-style: italic; color: var(--accent); font-weight: 400; }

/*--------------------------------------------------------------
14.0 Page furniture
--------------------------------------------------------------*/
.divider { display: flex; align-items: center; gap: 20px; margin-top: 56px; margin-bottom: 36px; }
.divider::before,
.divider::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

.divider span {
	font-family: var(--italic);
	font-style: italic;
	color: var(--accent);
	font-size: 20px;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.memberships {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	margin-top: 6px;
	margin-bottom: 12px;
	border: 1px solid var(--rule);
}

.membership { padding: 22px 24px; background: var(--bg-elev); }

.membership .m-abbr {
	font-family: var(--serif);
	font-size: 20px;
	font-weight: 600;
	color: var(--accent);
	margin-bottom: 4px;
}

.membership .m-full { font-size: 14px; color: var(--text-muted); line-height: 1.5; }

.downloads { margin-top: 8px; margin-bottom: 12px; }

.download-link {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	border: 1px solid var(--rule);
	margin-bottom: 12px;
	transition: border-color 0.25s ease, background 0.25s ease;
	color: var(--text);
}

.download-link:hover { border-color: var(--accent); background: var(--bg-elev); color: var(--text); }

.download-icon {
	width: 38px;
	height: 38px;
	flex: none;
	border: 1px solid var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent);
}

.download-icon svg { width: 18px; height: 18px; }
.download-text { display: flex; flex-direction: column; gap: 4px; }
.download-text .dl-name { font-family: var(--serif); font-size: 18px; font-weight: 600; }

.download-text .dl-meta {
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }

.gallery-cell {
	aspect-ratio: 4/3;
	background-size: cover;
	background-position: center;
	position: relative;
	overflow: hidden;
	display: block;
}

.gallery-cell::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(10, 25, 41, 0);
	transition: background 0.3s ease;
}

.gallery-cell:hover::after { background: rgba(10, 25, 41, 0.4); }

/*--------------------------------------------------------------
15.0 Dog profile
--------------------------------------------------------------*/
.status-pill {
	display: inline-block;
	border: 1px solid var(--accent);
	color: var(--accent);
	padding: 8px 18px;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 22px;
	font-family: var(--sans);
	font-weight: 500;
}

.dog-hero h1 {
	font-family: var(--serif);
	font-weight: 600;
	font-style: italic;
	font-size: clamp(56px, 10vw, 130px);
	line-height: 0.95;
	color: var(--accent);
	margin-bottom: 8px;
}

.dog-registered {
	font-family: var(--italic);
	font-style: italic;
	font-size: clamp(20px, 3vw, 30px);
	color: var(--text);
	opacity: 0.92;
	margin-bottom: 26px;
}

.dog-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.dog-stat { display: flex; flex-direction: column; }

.dog-stat .ds-label {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 4px;
}

.dog-stat .ds-value {
	font-family: var(--serif);
	font-size: 22px;
	font-weight: 600;
	color: var(--text);
}

.dog-stat-sep { color: var(--accent); font-size: 18px; }

.about-dog { padding: 110px 0 90px; }

.about-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 70px;
	align-items: start;
}

/* The dog's "About" prose is a Gutenberg editor, so it needs the entry-content
   rules but without the centred reading measure — it sits in a grid column. */
.about-text .entry-content > * { max-width: none; margin-left: 0; margin-right: 0; }
.about-text .entry-content > .alignfull,
.about-text .entry-content > .alignwide { margin-left: 0; margin-right: 0; width: auto; }

.about-text h2 {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 38px;
	margin: 0 0 26px;
}

.about-text h2 em { font-style: italic; color: var(--accent); font-weight: 400; }

.facts-card { background: var(--bg-elev); border: 1px solid var(--rule); padding: 36px 34px; }

.facts-card h3 {
	font-family: var(--serif);
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 22px;
	color: var(--accent);
}

.fact-row {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	padding: 14px 0;
	border-bottom: 1px solid var(--rule);
}

.fact-row:last-child { border-bottom: none; }

.fact-label {
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	flex: none;
}

.fact-value { font-size: 15px; color: var(--text); text-align: right; }

/* A plus drawn from two bars; the upright one folds away into a minus. */
.critiques-icon {
	position: relative;
	width: 38px;
	height: 38px;
	flex: none;
	border: 1px solid var(--accent);
	transition: background 0.25s ease;
}

.critiques-icon::before,
.critiques-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 1px;
	background: var(--accent);
	transform: translate(-50%, -50%);
	transition: transform 0.3s ease, background 0.25s ease;
}

.critiques-icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.critique-toggle:hover .critiques-icon { background: var(--accent); }

.critique-toggle:hover .critiques-icon::before,
.critique-toggle:hover .critiques-icon::after { background: var(--bg); }

.critique-item[open] > .critique-toggle .critiques-icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.critique-award {
	display: inline-block;
	border: 1px solid var(--accent);
	color: var(--accent);
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.critiques-accordion .critique-show {
	font-family: var(--serif);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--text);
	margin: 0 0 6px;
}

.critique-meta {
	display: block;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.critique-entry {
	font-family: var(--italic);
	font-style: italic;
	font-size: 18px;
	color: var(--text);
	opacity: 0.85;
	margin-bottom: 14px;
}

/* Overrides the Gutenberg quote style — a critique reads as body text, set off
   by the brass rule rather than by large italic type. */
.critiques-accordion .critique-text {
	border-left: 2px solid var(--accent);
	padding: 2px 0 2px 22px;
	margin: 0;
	font-family: var(--sans);
	font-style: normal;
	font-size: 16px;
	line-height: 1.75;
	color: var(--text);
}

.critiques-accordion .critique-text p { font-size: inherit; margin-bottom: 14px; opacity: 0.92; }

.critiques-accordion .critique-text p:last-child { margin-bottom: 0; }

/* Judges' Critiques (Accordion) block — each critique folds away behind its
   own toggle, stacked like the download links. */
.critiques-accordion { margin-top: 48px; margin-bottom: 28px; }

.critiques-accordion-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 20px;
	margin-bottom: 20px;
}

.critiques-accordion .critiques-title {
	font-family: var(--serif);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--accent);
	margin: 0;
}

.critique-item {
	border: 1px solid var(--rule);
	background: var(--bg-elev);
	margin-bottom: 12px;
	transition: border-color 0.25s ease;
}

.critique-item:last-child { margin-bottom: 0; }

.critique-item:hover,
.critique-item[open] { border-color: var(--accent); }

.critique-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 26px;
	cursor: pointer;
	list-style: none;
}

.critique-toggle::-webkit-details-marker { display: none; }

.critique-toggle:focus-visible { outline: 1px solid var(--accent); outline-offset: -6px; }

.critique-toggle .critique-head { display: block; }
.critique-toggle .critique-award { margin-bottom: 12px; }

.critique-panel {
	margin: 0 26px;
	padding: 24px 0 26px;
	border-top: 1px solid var(--rule);
}

.titles { padding: 100px 0; background: var(--bg-deep); }
.timeline { max-width: 820px; margin: 0 auto; }

.timeline-item {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 36px;
	padding: 30px 0;
	border-bottom: 1px solid var(--rule);
	position: relative;
}

.timeline-item:last-child { border-bottom: none; }

.timeline-year {
	font-family: var(--serif);
	font-size: 30px;
	font-weight: 600;
	color: var(--accent);
}

.timeline-body h4 {
	font-family: var(--serif);
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 8px;
}

.timeline-body p { color: var(--text-muted); font-size: 15px; line-height: 1.6; }

.dog-gallery { padding: 100px 0; }
.masonry { columns: 3; column-gap: 16px; }

.masonry a {
	display: block;
	margin-bottom: 16px;
	break-inside: avoid;
	overflow: hidden;
	position: relative;
}

.masonry img { width: 100%; display: block; transition: transform 0.6s ease; }
.masonry a:hover img { transform: scale(1.06); }

.pedigree { padding: 100px 0; background: var(--bg-deep); }

.tree {
	max-width: 1000px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.tree-branch { display: flex; flex-direction: column; gap: 16px; }

.ped-node { background: var(--bg-elev); border: 1px solid var(--accent); padding: 22px 24px; }

.ped-node.subject {
	grid-column: 1 / 3;
	text-align: center;
	background: var(--surface);
}

.ped-role {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 6px;
}

.ped-name { font-family: var(--serif); font-size: 20px; font-weight: 600; }
.ped-node.parent { margin-bottom: 4px; }

.ped-grandparents { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ped-mini { border: 1px solid var(--rule); padding: 14px 16px; background: rgba(18, 40, 66, 0.5); }
.ped-mini .ped-role { font-size: 11px; }
.ped-mini .ped-name { font-size: 15px; }

.other-dogs { padding: 100px 0; }
.other-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.other-card {
	position: relative;
	aspect-ratio: 4/5;
	overflow: hidden;
	background: var(--surface);
	display: block;
}

.other-card-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.6s ease;
}

.other-card:hover .other-card-img { transform: scale(1.06); }

.other-card-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(5, 13, 24, 0.95) 0%, rgba(5, 13, 24, 0.2) 60%, rgba(5, 13, 24, 0) 100%);
	display: flex;
	align-items: flex-end;
	padding: 28px;
}

.other-card h3 { font-family: var(--serif); font-size: 28px; font-weight: 600; color: var(--text); }

.other-card .oc-meta {
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-top: 4px;
}

/*--------------------------------------------------------------
16.0 Search
--------------------------------------------------------------*/
.results { padding: 70px 0 100px; }

.results-count {
	color: var(--text-muted);
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 30px;
}

.result-row {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 28px;
	padding: 32px 0;
	border-bottom: 1px solid var(--rule);
	align-items: start;
}

.result-row:first-of-type { border-top: 1px solid var(--rule); }

.result-thumb {
	width: 120px;
	height: 120px;
	background-size: cover;
	background-position: center;
	background-color: var(--surface);
	flex: none;
}

.result-type {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 10px;
}

.result-title {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.25;
	margin-bottom: 12px;
}

.result-title a { color: var(--text); }
.result-title a:hover { color: var(--accent); }

.result-excerpt {
	color: var(--text-muted);
	font-size: 15px;
	line-height: 1.65;
	margin-bottom: 12px;
	max-width: 720px;
}

.result-excerpt mark { background: none; color: var(--accent); font-weight: 600; }

.result-meta {
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.result-meta .dot { color: var(--accent); margin: 0 6px; }

.empty-block { text-align: center; padding: 40px 0 20px; }

.empty-eyebrow {
	font-family: var(--italic);
	font-style: italic;
	color: var(--accent);
	font-size: 20px;
	margin-bottom: 14px;
}

.empty-block h2 {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(28px, 4vw, 42px);
	margin-bottom: 18px;
}

.empty-block p {
	color: var(--text-muted);
	font-size: 17px;
	line-height: 1.7;
	max-width: 540px;
	margin: 0 auto 30px;
}

.empty-block .search-form { margin-bottom: 30px; max-width: 520px; }

/*--------------------------------------------------------------
17.0 Contact
--------------------------------------------------------------*/
.contact-body { padding: 90px 0 110px; }

.contact-grid {
	display: grid;
	grid-template-columns: 60% 40%;
	gap: 70px;
	align-items: start;
}

/* Styles target both our own markup and Contact Form 7's generated markup. */
.contact-form .field,
.contact-form p { margin-bottom: 26px; }

.contact-form label {
	display: block;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 10px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form textarea,
.contact-form select {
	width: 100%;
	background: var(--surface);
	border: 1px solid var(--rule);
	color: var(--text);
	font-family: var(--sans);
	font-size: 16px;
	padding: 15px 18px;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	border-radius: 0;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--text-muted); }

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
	border-color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent);
}

.contact-form textarea { min-height: 170px; resize: vertical; line-height: 1.6; }

.contact-form .field.has-error input,
.contact-form .field.has-error textarea,
.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] {
	border-color: var(--error);
	box-shadow: inset 0 0 0 1px var(--error);
}

.field-error,
.contact-form .wpcf7-not-valid-tip {
	color: var(--error);
	font-size: 13px;
	letter-spacing: 0.04em;
	margin-top: 8px;
	display: none;
}

.contact-form .field.has-error .field-error,
.contact-form .wpcf7-not-valid-tip { display: block; }

.contact-form .wpcf7-submit,
.form-submit .btn { margin-top: 6px; }

/* CF7 response banners, restyled as the design's success / error panels. */
.contact-form .wpcf7-response-output {
	border: 1px solid var(--accent);
	background: var(--bg-elev);
	color: var(--text);
	padding: 24px 28px;
	margin: 30px 0 0;
	font-size: 16px;
	line-height: 1.6;
}

.contact-form .wpcf7-response-output.wpcf7-validation-errors,
.contact-form .wpcf7-response-output.wpcf7-acceptance-missing { border-color: var(--error); }

/* Gravity Forms. The generic .contact-form input / textarea / label rules
   above already style the fields; these cover the parts specific to Gravity's
   markup. The orbital theme CSS is switched off in inc/gravity-forms.php. */
.contact-form .gform_wrapper .gfield { margin-bottom: 26px; }

.contact-form .gform_wrapper .gfield_label {
	display: block;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 10px;
	font-weight: 500;
}

.contact-form .gform_wrapper .gfield_required { color: var(--accent); }

.contact-form .gform_wrapper .ginput_container { margin: 0; }

.contact-form .gform_footer { margin-top: 6px; padding: 0; }

.contact-form .gform_wrapper .gform_footer input[type="submit"],
.contact-form .gform_wrapper .gform_button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 32px;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--accent);
	color: var(--bg);
	border: 1px solid var(--accent);
	border-radius: 0;
	cursor: pointer;
	transition: all 0.25s ease;
	width: auto;
}

.contact-form .gform_wrapper .gform_footer input[type="submit"]:hover,
.contact-form .gform_wrapper .gform_button:hover { background: transparent; color: var(--accent); }

/* Validation */
.contact-form .gform_wrapper .gfield_error input,
.contact-form .gform_wrapper .gfield_error textarea {
	border-color: var(--error);
	box-shadow: inset 0 0 0 1px var(--error);
}

.contact-form .gform_wrapper .gfield_validation_message,
.contact-form .gform_wrapper .validation_message {
	color: var(--error);
	font-size: 13px;
	letter-spacing: 0.04em;
	margin-top: 8px;
	background: none;
	border: none;
	padding: 0;
}

.contact-form .gform_wrapper .gform_validation_errors {
	border: 1px solid var(--error);
	background: var(--bg-elev);
	color: var(--text);
	padding: 20px 24px;
	margin-bottom: 30px;
	border-radius: 0;
	box-shadow: none;
}

.contact-form .gform_wrapper .gform_validation_errors h2,
.contact-form .gform_wrapper .gform_required_legend { color: var(--text-muted); font-size: 14px; font-weight: 400; }

/* Confirmation — the design's success panel. */
.contact-form .gform_confirmation_message {
	border: 1px solid var(--accent);
	background: var(--bg-elev);
	color: var(--text);
	padding: 40px 44px;
	font-family: var(--serif);
	font-size: 22px;
	line-height: 1.5;
}

.success-panel { display: none; border: 1px solid var(--accent); background: var(--bg-elev); padding: 48px 44px; }
.success-panel.show { display: block; }

.success-panel .s-icon {
	width: 52px;
	height: 52px;
	border: 1px solid var(--accent);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent);
	margin-bottom: 22px;
}

.success-panel .s-icon svg { width: 24px; height: 24px; }
.success-panel h2 { font-family: var(--serif); font-size: 30px; font-weight: 600; margin-bottom: 14px; }
.success-panel p { color: var(--text-muted); font-size: 16px; line-height: 1.7; }

.contact-aside h3 { font-family: var(--serif); font-size: 24px; font-weight: 600; margin-bottom: 18px; }
.contact-aside p { color: var(--text-muted); font-size: 16px; line-height: 1.75; margin-bottom: 30px; }

.aside-block { padding: 24px 0; border-top: 1px solid var(--rule); }
.aside-block:last-child { border-bottom: 1px solid var(--rule); }

.aside-label {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 8px;
}

.aside-value { font-family: var(--serif); font-size: 20px; }
.aside-value a { color: var(--text); }
.aside-value a:hover { color: var(--accent); }
.aside-note { color: var(--text-muted); font-size: 15px; line-height: 1.6; }

/*--------------------------------------------------------------
18.0 404
--------------------------------------------------------------*/
.error-main { padding: 90px 0 110px; text-align: center; position: relative; }

.error-main::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 1px;
	background: var(--accent);
}

.error-inner { max-width: 680px; margin: 0 auto; }
.error-knot { text-align: center; max-width: 460px; margin: 0 auto 28px; }
.error-knot img { width: 300px; max-width: 82%; height: auto; margin: 0 auto; opacity: 0.92; }

/* The numeral is set in a large italic serif whose glyphs draw well outside a
   0.9 line box, so a tight line-height let the digits crash down through the
   heading below. Give the line box room to hold them. */
.error-numeral {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(120px, 22vw, 240px);
	line-height: 1.05;
	color: var(--accent);
	margin-bottom: 16px;
}

.error-main h1 {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.15;
	margin-bottom: 20px;
}

.error-main p { color: var(--text-muted); font-size: 18px; line-height: 1.7; margin-bottom: 36px; }
.error-main .search-form { max-width: 520px; margin: 0 auto 30px; }

/*--------------------------------------------------------------
19.0 Comments
--------------------------------------------------------------*/
.comments-area {
	max-width: var(--measure);
	margin: 0 auto;
	padding: 70px 0 0;
}

.comments-title,
.comment-reply-title {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 30px;
	margin-bottom: 30px;
}

.comment-list { list-style: none; margin: 0 0 50px; }
.comment-list .children { list-style: none; margin-left: 40px; }

.comment-body { padding: 26px 0; border-bottom: 1px solid var(--rule); }

.comment-author { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.comment-author img { border-radius: 50%; }
.comment-author .fn { font-family: var(--serif); font-size: 18px; font-weight: 600; font-style: normal; }
.comment-author .says { display: none; }

.comment-metadata {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 14px;
}

.comment-metadata a { color: var(--text-muted); }
.comment-content p { font-size: 16px; line-height: 1.7; margin-bottom: 16px; }

.reply a {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
}

.comment-form label {
	display: block;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 10px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	background: var(--surface);
	border: 1px solid var(--rule);
	color: var(--text);
	font-family: var(--sans);
	font-size: 16px;
	padding: 15px 18px;
	outline: none;
	border-radius: 0;
	transition: border-color 0.2s ease;
}

.comment-form input:focus,
.comment-form textarea:focus {
	border-color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent);
}

.comment-form p { margin-bottom: 22px; }
.comment-form .form-submit input[type="submit"] {
	background: var(--accent);
	color: var(--bg);
	border: 1px solid var(--accent);
	padding: 16px 32px;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.25s ease;
	border-radius: 0;
}

.comment-form .form-submit input[type="submit"]:hover { background: transparent; color: var(--accent); }
.comment-notes, .comment-form-cookies-consent label { text-transform: none; letter-spacing: 0; color: var(--text-muted); font-size: 14px; }

/*--------------------------------------------------------------
20.0 Site footer
--------------------------------------------------------------*/
.site-footer {
	background: var(--bg-deep);
	padding: 80px 0 30px;
	border-top: 1px solid var(--rule);
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 60px;
	margin-bottom: 60px;
}

.footer-brand-block .brand-name { font-size: 26px; margin-bottom: 6px; }
.footer-brand-block .brand-tag { display: block; margin-bottom: 18px; }

.footer-brand-block p {
	color: var(--text-muted);
	font-size: 15px;
	line-height: 1.7;
	max-width: 360px;
}

.footer-col h4 {
	font-family: var(--serif);
	font-size: 16px;
	font-weight: 600;
	color: var(--accent);
	margin-bottom: 18px;
	letter-spacing: 0.04em;
}

.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: var(--text-muted); font-size: 14px; letter-spacing: 0.02em; }
.footer-col a:hover { color: var(--text); }

.footer-bottom {
	padding-top: 30px;
	border-top: 1px solid var(--rule);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	font-size: 13px;
	color: var(--text-muted);
	letter-spacing: 0.04em;
}

/*--------------------------------------------------------------
21.0 Responsive
--------------------------------------------------------------*/
/* Seven top-level items need the room; below this the header uses the mobile menu. */
@media (max-width: 1240px) {
	.primary-nav,
	.social-icons { display: none; }

	.nav-toggle { display: flex; }
}

@media (max-width: 960px) {
	:root { --gutter: 24px; }

	.primary-nav,
	.social-icons { display: none; }

	.nav-toggle { display: flex; }

	.hero-content { padding: 60px var(--gutter); }

	.intro-grid,
	.dogs-grid,
	.blog-grid { grid-template-columns: 1fr; gap: 40px; }

	.photo-strip { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 200px); height: auto; }
	.photo-cell:first-child { grid-row: auto; grid-column: 1 / 3; height: 280px; }

	.featured-post { grid-template-columns: 1fr; }
	.featured-img { min-height: 280px; }
	.featured-body { padding: 36px 28px; }

	/* Update the variables, not the padding — the full-bleed pull-backs above
	   are calculated from them. */
	.article,
	.page-body {
		--flow-top: 64px;
		--flow-bottom: 50px;
	}

	.about-grid { grid-template-columns: 1fr; gap: 40px; }
	.critique-toggle { padding: 20px; }
	.critique-panel { margin: 0 20px; }
	.contact-grid { grid-template-columns: 1fr; gap: 50px; }
	.masonry { columns: 2; }
	.other-grid { grid-template-columns: 1fr; gap: 16px; }
	.timeline-item { grid-template-columns: 90px 1fr; gap: 22px; }

	.gallery-grid { grid-template-columns: 1fr 1fr; }
	.memberships { grid-template-columns: 1fr; }

	.related .blog-grid { grid-template-columns: 1fr; gap: 40px; }
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }

	.knot-divider { margin-top: 48px; margin-bottom: 48px; }
}

@media (max-width: 560px) {
	.footer-grid { grid-template-columns: 1fr; }
	.photo-strip { grid-template-columns: 1fr; grid-template-rows: repeat(5, 180px); }
	.photo-cell:first-child { grid-column: 1 / 2; height: 220px; }

	.dog-card-overlay { padding: 28px; }
	.dog-card-title { font-size: 32px; }

	.prevnext { grid-template-columns: 1fr; }
	.prevnext a.prev { border-right: none; border-bottom: 1px solid var(--rule); padding: 24px 0; }
	.prevnext a.next { flex-direction: row; text-align: left; padding: 24px 0; }
	.author-bio { flex-direction: column; text-align: center; }

	.masonry { columns: 1; }
	.tree { grid-template-columns: 1fr; }
	.ped-node.subject { grid-column: auto; }
	.ped-grandparents { grid-template-columns: 1fr; }

	.gallery-grid { grid-template-columns: 1fr; }

	.result-row { grid-template-columns: 84px 1fr; gap: 18px; }
	.result-thumb { width: 84px; height: 84px; }

	.search-form { flex-direction: column; }
	.search-form input[type="search"] { border-right: 1px solid var(--rule); }
	.search-form button { padding: 16px; }

	.pagination .prev span,
	.pagination .next span { display: none; }

	.comment-list .children { margin-left: 16px; }
}

/*--------------------------------------------------------------
22.0 Block canvas

The homepage and any "Block canvas" page are built entirely from Wavemaker
blocks, each of which brings its own container. Strip the reading measure so
the blocks sit edge to edge.
--------------------------------------------------------------*/
.entry-content--canvas > * {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.entry-content--canvas > .alignfull,
.entry-content--canvas > .alignwide {
	margin-left: 0;
	margin-right: 0;
	width: auto;
}

/*--------------------------------------------------------------
23.0 Lightbox

Any gallery marked data-lightbox becomes a slider. Styled to sit inside the
same navy-and-brass system rather than looking like a bolted-on plugin.
--------------------------------------------------------------*/
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 80px 24px;
	background: rgba(5, 13, 24, 0.96);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.lightbox[hidden] { display: none; }

body.lightbox-open { overflow: hidden; }

.lightbox-stage {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	flex: 1;
	min-width: 0;
}

.lightbox-image {
	max-width: 100%;
	max-height: calc(100vh - 200px);
	width: auto;
	height: auto;
	object-fit: contain;
	border: 1px solid var(--rule);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.lightbox-image.is-loaded { opacity: 1; }

.lightbox-caption {
	font-family: var(--italic);
	font-style: italic;
	color: var(--text-muted);
	font-size: 17px;
	text-align: center;
	max-width: 640px;
}

.lightbox-caption[hidden] { display: none; }

.lightbox-nav,
.lightbox-close {
	flex: none;
	background: transparent;
	border: 1px solid var(--rule);
	color: var(--text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.25s ease;
}

.lightbox-nav {
	width: 56px;
	height: 56px;
	border-radius: 50%;
}

.lightbox-nav svg { width: 26px; height: 26px; }

.lightbox-nav:hover,
.lightbox-close:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--bg);
}

.lightbox-nav[hidden] { display: none; }

.lightbox-close {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 48px;
	height: 48px;
	font-size: 30px;
	line-height: 1;
	font-family: var(--sans);
	padding-bottom: 4px;
}

.lightbox-count {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.lightbox-count[hidden] { display: none; }

/* The gallery thumbnails are now buttons, so say so. */
[data-lightbox] a { cursor: zoom-in; }

@media (max-width: 720px) {
	.lightbox { padding: 72px 12px; gap: 8px; }
	.lightbox-nav { width: 44px; height: 44px; }
	.lightbox-nav svg { width: 20px; height: 20px; }
	.lightbox-image { max-height: calc(100vh - 190px); }
	.lightbox-caption { font-size: 15px; }
}