/* ==========================================================================
   PROJECT:   Jim Fuhrmann - Dynamic Photo Gallery
   FILE:      style.css
   AUTHOR:    Jim Fuhrmann (https://www.jimfuhrmann.com)
   COPYRIGHT: Copyright (c) 2026 Jim Fuhrmann. All Rights Reserved.
   ========================================================================== */

@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");

/* ==========================================================================
   NO-JS PROOFING FALLBACK PROTECTION
   ========================================================================== */

/* 1. Tell the browser to ignore the mouse on the image entirely */
html[data-proof-mode="true"] .gallery-item img,
html[data-proof-mode="true"] #lightbox-img {
	pointer-events: none;
	-webkit-touch-callout: none; /* Disables the long-press save menu on iOS */
	user-select: none;
}

/* 2. Optional: The "Transparent Brick Wall" Trick */
html[data-proof-mode="true"] .gallery-item::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	background: rgba(0, 0, 0, 0); /* Completely transparent invisible layer */
}

/* ==========================================================================
   SCROLL DOWN INDICATOR STYLES
   ========================================================================== */
.scroll-indicator-btn {
	background: none;
	border: none;
	padding: 8px;
	cursor: pointer;
	color: #5d7917; 
	font-size: 20px;
	outline: none;
	transition: color 0.2s ease;
	animation: subtleBounce 2s infinite;
	position: absolute !important;
	left: 50% !important;
	bottom: 30px !important; 
}

.scroll-indicator-btn:hover,
.scroll-indicator-btn:focus {
	color: #3f5210; 
}

/* Premium keyframe timing structure - combining horizontal locking with the vertical bounce */
@keyframes subtleBounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateX(-50%) translateY(0);
	}
	40% {
		transform: translateX(-50%) translateY(6px);
	}
	60% {
		transform: translateX(-50%) translateY(3px);
	}
}

/* Clean utility declaration to make sure root scrolls natively behave smoothly */
html {
	scroll-behavior: smooth;
}

/* ==========================================================================
   DYNAMIC PROOF-MODE VECTOR WATERMARK LAYER (SPLIT SCALING)
   ========================================================================== */

/* --- 1. Base Shared Layout Mechanics --- */
html[data-proof-mode="true"] .gallery-item::after,
html[data-proof-mode="true"] #lightbox-image-container::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 20;
	pointer-events: none;
	mix-blend-mode: difference;
	background-repeat: repeat;
}

/* --- 2. Thumbnail Grid Optimization (Smaller Tile Bounds) --- */
html[data-proof-mode="true"] .gallery-item::after {
	/* 150x150px tile boundary, 14px font size */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'><text x='50%' y='50%' font-family='sans-serif' font-size='14' font-weight='700' fill='rgba(255, 255, 255, 0.35)' text-anchor='middle' transform='rotate(-45 75 75)'></text></svg>");
}

/* --- 3. Lightbox Engine Optimization (Larger Scale-Up Grid Tile) --- */
html[data-proof-mode="true"] #lightbox-image-container::after {
	/* 300x300px tile boundary, 28px font size */
	/* background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><text x='50%' y='50%' font-family='sans-serif' font-size='28' font-weight='700' fill='rgba(255, 255, 255, 0.35)' text-anchor='middle' transform='rotate(-45 150 150)'>PROOF</text></svg>"); */
	/* Shrinking tile size to 160x160px forces high-frequency repetition on small mobile screens */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><text x='50%' y='50%' font-family='sans-serif' font-size='22' font-weight='700' fill='rgba(255, 255, 255, 0.35)' text-anchor='middle' transform='rotate(-45 80 80)'></text></svg>");
}

/* --- 4. Structural Structural Anchors --- */
.gallery-item {
	position: relative;
	overflow: hidden;
}

/* Gallery Header Logo Layout */
.gallery-logo-wrap {
	display: block;
	margin: 0 auto 18px; /* Centers the container, adds 24px of breathing room under it */
	text-align: center;
}

.logo-link {
	display: inline-block;
	text-decoration: none !important; /* Prevents underlines on image bounds */
	border: none;
	outline: none;
	transition: opacity 0.2s ease;
}

.logo-link:hover {
	opacity: 0.9; /* Subtle visual hint when users hover over the logo link */
}

.gallery-logo {
	display: block;
	max-width: 100%;     /* Prevents logo scaling distortion */
	width: 300px;        /* Restricts logo to an elegant visual scale (Adjust as needed) */
	height: auto;        /* Preserves native aspect ratio dynamically */
	margin: 0 auto;
}

/* Mobile Breakpoint for smaller screens */
@media (max-width: 480px) {
	.gallery-logo {
		width: 250px;    /* Comfortably downscales the logo banner for compact smartphones */
	}
	.gallery-logo-wrap {
		margin-bottom: 16px;
	}
}

.header-divider {
	border: none;               /* Remove the default browser line style */
	height: 1px;                /* Sets the maximum thickness in the absolute center */
	width: 275px;               /* Give it a slightly wider presence so the taper is visible */
	margin: 18px auto 22px auto;          /* Even spacing top and bottom, centered horizontally */
	background: linear-gradient(
		to right, 
		transparent 0%, 
		/* #c7c5c5 50%, */
		#68861b 50%, 
		transparent 100%
	);
	border-radius: 50%;         /* Smooths out the pixel edges for a soft, organic taper */
}

#lightbox-image-container {
	position: relative;
}

html {
	scroll-behavior: smooth;
}
html, body {
	max-width: 100%;
	overflow-x: hidden; /* Hard-stops any horizontal layout spilling */
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
}
/* Reset & Base Styles */
* {
    box-sizing: border-box; /* Crucial: stops padding from breaking widths */
    margin: 0;
    padding: 0;
}
body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background-color: #f9f9f9;
	/* background-color: #f8f9fa; */
	/* background-color: #fbfbfa; */
	color: #333;
	padding: 20px;
}
p {
	font-size: 18px !important; /* Changes all standard paragraph text */
	line-height: 1.6; /* Pro-Tip: Increases vertical space between lines for easier reading */
}

.javascript-notice {
	font-size: 13px;
	color: #777; /* Subtle text gray so it doesn't distract from the primary links */
	margin-top: 8px;
	margin-bottom: 16px;
	font-style: italic;
	text-align: center;
}

/* Cleaner mobile vertical stack spacing adjustment */
@media (max-width: 767px) {
	.javascript-notice {
		margin-top: 12px;
		margin-bottom: 12px;
		font-size: 12px;
	}
}

/* H3 Headings */
.gallery-heading {
	font-size: 18px;
	color: #222222;
	font-weight: 700;
	margin: 0 0 12px 0;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.gallery-heading-accent {
    width: 40px;
    height: 2px;
    background-color: #5d7917;
    margin: 6px auto 24px;
}

/* ==========================================================================
   GALLERY HEADER & INTRODUCTORY ELEMENTS
   ========================================================================== */
/* Full-bleed background canvas setup */
.gallery-header {
	width: 100vw !important;
	min-height: 100vh !important;
	
	/* Breakout mechanics to stay locked edge-to-edge */
	position: relative; /* Crucial: This acts as the anchor point for the bottom chevron */
	left: 50%;
	right: 50%;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	top: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	box-sizing: border-box;
	padding: 6vh 20px 60px 20px !important;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),  */
	background: linear-gradient(rgba(14, 20, 16, 0.6), rgba(14, 20, 16, 0.6)), 
							url('../../photos/west-hartford-ct-photo01.jpg') center center / cover no-repeat;
	color: #ffffff !important;
}

/* Ensure your logo, title, and badge flow naturally down the center of the image */
.gallery-header h1, 
.gallery-header .title-location, 
.gallery-header .title-subtitle {
	color: #ffffff !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); /* Adds a subtle drop shadow for crisp readability over cloud patterns */
}

.gallery-header img {
	filter: brightness(0) invert(1) !important; /* Forces your logo graphic cleanly to pure white */
}

.header-divider, .scroll-indicator-btn {
	filter: brightness(0) invert(1) !important;
}

.view-collection-btn {
	display: inline-block;
	background-color: #5a781d !important; /* Matches your brand green */
	color: #ffffff !important;
	text-decoration: none;
	padding: 18px 28px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.5px;
	border-radius: 4px;
	margin-top: 15px;
	transition: background-color 0.2s ease, transform 0.2s ease;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.view-collection-btn:hover {
	background-color: #6b8e23 !important; /* Slightly brighter green on hover */
	transform: translateY(-1px);
}

/* Push the chevron green arrow dynamically to the bottom boundary of the screen */
#scroll-to-gallery-btn {
	position: absolute;
	bottom: 30px; /* Sits perfectly above the bottom edge of the display */
	left: 50%;
	transform: translateX(-50%);
	cursor: pointer;
	z-index: 10;
	margin: 0 !important;
}

/* Keyframe for a professional, slow-pulsing bounce */
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
	40% { transform: translate(-50%, -8px); }
	60% { transform: translate(-50%, -4px); }
}

/* Target mobile devices and small tablets */
@media screen and (max-width: 768px) {
	/* 1. Use svh (small viewport height) to account for mobile browser UI bars */
	.gallery-header {
		min-height: 100svh !important; 
		padding-bottom: 80px !important; /* Creates extra breathing room at the bottom */
	}

	/* 2. Lift the chevron higher so it clears the mobile navigation bar zone */
	#scroll-to-gallery-btn {
		bottom: 45px !important; 
	}
}

/* Base Styles (Desktop / Default) */
.gallery-title-main {
	margin: 0 0 20px 0; 
	padding: 0; 
	line-height: 1.4; 
	text-align: center;
}

.title-location {
	display: block; 
	font-size: 38px; /* Crisp and prominent for desktop browsers */
	color: #222222; 
	font-weight: 700; 
	letter-spacing: 0.6px;
}

.title-subtitle {
	display: block; 
	font-size: 18px; 
	color: #666666; 
	font-weight: 400; 
	text-transform: uppercase; 
	letter-spacing: 1.5px; 
	margin-top: 6px;
}

/* Mobile Responsiveness (Screens 480px and down) */
@media (max-width: 480px) {
	.title-location {
		font-size: 30px; /* Scales down smoothly to guarantee a single-line fit */
		letter-spacing: 0.5px; /* Relieves compression slightly for legibility */
	}
	
	.title-subtitle {
		font-size: 16px; /* Scales down proportionally with the main title */
		letter-spacing: 1px;
	}
}

.gallery-meta {
	display: inline-block;
	font-size: 15px !important;
	font-style: italic;
	color: #444;
	/* background-color: #eff2ee; */
	/* background-color: rgba(239, 242, 238, 0.50); */
	background-color: rgba(255, 255, 255, 0.46);
	padding: 10px 20px;
	border-radius: 4px;
	margin: 12px auto 16px;
	border: 1px solid #b0b0b0;
	box-shadow: 
		inset 0 0 4px #222222,
		inset 0 0 0 100px rgba(255, 255, 255, 0.46);
		/* inset 0 0 0 100px rgba(239, 242, 238, 0.50); */
	/* box-shadow: 
		inset 0 0 4px #222222,
		inset 0 0 0 100px #eff2ee; */
}

@media (max-width: 480px) {
	.gallery-meta {
		margin: 8px auto 16px;
	}
}

/* Ensure the nested photographer credit link transitions beautifully within the badge */
.gallery-meta .link-text {
	font-style: normal;           /* Keeps the link legible */
	font-weight: 500;
}

@media (max-width: 767px) {
	header.gallery-header ul.icons {
		display: flex;
		flex-direction: column; /* Stacks utility links cleanly on small screens */
		gap: 12px;              /* Consistent vertical breathing room */
		align-items: center;    /* Anchors navigation paths centered under title text */
	}

	header.gallery-header ul.icons li {
		margin-right: 0 !important; /* Strips desktop margin rule overrides */
		line-height: 1.4;           /* Smooth structural spacing for wrapped inline lines */
		text-align: center;
	}
}

.usage-licensing, .fine-art-terms {
	font-size: 15px !important;
	color: #555;
	margin: 14px auto 4px auto;
	max-width: 575px;
	line-height: 1.5;
	text-align: center;
}

.usage-licensing i, .fine-art-terms i {
	color: #607d3b;
	margin-right: 3px;
}

/* Pricing Tooltip Container Alignment */
.pricing-helper {
	position: relative;
}

.pricing-tooltip {
	position: absolute;
	bottom: 25px; /* Sits cleanly right above the text row */
	left: 50%;
	transform: translateX(-50%) translateY(5px);
	background-color: rgba(255, 255, 255, 0.98);
	border: 1px solid #dcdcdc;
	border-radius: 8px;
	padding: 14px;
	width: 280px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	z-index: 100;
	color: #333333;
	text-align: left;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Micro-interaction trigger mapping */
.pricing-helper:hover .pricing-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.pricing-tooltip strong {
	display: block;
	font-size: 13px;
	margin-bottom: 8px;
	color: #222222;
	border-bottom: 1px solid #eaeaea;
	padding-bottom: 4px;
}

.pricing-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	margin-bottom: 6px;
}

.pricing-row small {
	color: #777777;
	font-size: 11px;
}

.pricing-note {
	display: block;
	font-size: 11px;
	line-height: 1.4;
	color: #666666;
	margin-top: 8px;
	border-top: 1px dashed #eaeaea;
	padding-top: 6px;
}

/* ==========================================================================
   MOBILE PRICING TOOLTIP OPTIMIZATION
   Overrides desktop 'bottom: 25px' positioning seen in Screenshot_20260628-121420.jpg
   ========================================================================== */
@media (max-width: 767px) {
	/* Stop anchoring the tooltip to the icon; anchor it to the viewport instead */
	.pricing-tooltip {
		position: fixed !important; /* Locks it to the screen viewport, not the parent text */
		bottom: 0 !important;       /* Anchors it to the absolute bottom of the screen */
		left: 0 !important;
		right: 0 !important;
		top: auto !important;
		width: 100% !important;     /* Spans the full width of the mobile device */
		max-width: 100% !important;
		
		/* Layout resets from the desktop version */
		transform: translateY(100%) !important; /* Hides it completely off-screen below the edge */
		border-radius: 20px 20px 0 0 !important; /* Sleek top-corner rounding only */
		border-left: none !important;
		border-right: none !important;
		border-bottom: none !important;
		padding: 20px !important;    /* Increased padding for touch-friendly spacing */
		box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2) !important; /* Shadow on the top edge only */
	}

	/* Revised activation state: Slides up into view from the bottom */
	.pricing-helper:hover .pricing-tooltip {
		transform: translateY(0) !important; /* Brings it perfectly into focus on the bottom edge */
	}

	/* Style updates for better readability within the mobile 'action sheet' */
	.pricing-tooltip strong {
		font-size: 15px !important; /* Larger title for mobile clarity */
		margin-bottom: 12px !important;
	}

	.pricing-row {
		font-size: 14px !important; /* Increased legibility for pricing rows */
		padding: 4px 0 !important;
	}

	.pricing-note {
		font-size: 12px !important;
		margin-top: 12px !important;
		padding-top: 10px !important;
	}
}

/* ==========================================================================
   NAVIGATION CATEGORY FILTER TABS
   ========================================================================== */
.gallery-tabs {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap; /* Fixes layout containment by allowing wrapping */
	gap: 12px 16px; /* 12px gap between rows when wrapped, 16px between buttons */
	margin-top: 30px;
	margin-bottom: 8px;
	padding: 0 16px; /* Prevents edge-clipping on smaller viewports */
}

.tab-btn {
	background: transparent;
	border: 2px solid #ccc;
	color: #555;
	padding: 8px 20px; /* Refined from 24px to look proportional when stacked */
	font-size: 0.95rem;
	font-weight: 500;
	border-radius: 30px;
	cursor: pointer;
	transition: all 0.25s ease;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	min-height: 38px; /* Standardizes tap targets on mobile */
	line-height: 1.3; /* Prevents text overflow if string wraps inside button */
}

.tab-btn.active {
	background-color: #222;
	border-color: #222;
	color: #fff;
}

@media (hover: hover) {
	.tab-btn:hover:not(.active) {
		border-color: #222;
		color: #222;
	}
}

/* Mobile Layout Fine-Tuning */
@media (max-width: 600px) {
	.gallery-tabs {
		gap: 10px 10px; /* Tightens grid allocation on narrow phone displays */
	}
	
	.tab-btn {
		padding: 6px 16px; /* Drops padding slightly for optimal text balancing */
		font-size: 0.85rem;
	}
}

/* ==========================================================================
   RESPONSIVE DISPLAY GRID INTERFACE
   ========================================================================== */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
	max-width: 1400px;
	margin: 0 auto;
}

@media (max-width: 1499px) {
	.gallery-grid {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* ==========================================================================
   UNIFIED GALLERY ITEM CONTAINER WITH CSS MICRO-TRANSITIONS
   ========================================================================== */
.gallery-item {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;       /* Professional architectural aspect ratio locking */
	background-color: #e5e5e5; /* Shimmer placeholder background anchor */
	border-radius: 4px;
	cursor: pointer;
	display: block;

	/* Hardware-Accelerated Micro-Transition Properties */
	opacity: 1;
	transform: scale(1) translateY(0);
	transition: 
		opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: opacity, transform;
}

/* ==========================================================================
   DYNAMIC FILTERING STATES (JAVASCRIPT AUTOMATION TARGETS)
   ========================================================================== */
/* Phase 1: Outbound category removal animation (Fade out & slide down slightly) */
.gallery-item.hidden-leave {
	opacity: 0;
	transform: scale(0.96) translateY(12px);
}

/* Phase 2: Complete layout space termination pass */
.gallery-item.hidden {
	display: none !important;
}

/* Phase 3: Inbound category insertion entry pipeline (Fade in & drop into alignment) */
.gallery-item.hidden-enter {
	opacity: 0;
	transform: scale(0.97) translateY(-10px);
}

/* ==========================================================================
   INTERNAL ASSET ENGAGEMENT GRAPHICS (PHOTO IMAGES)
   ========================================================================== */
.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

@media (hover: hover) {
	.gallery-item:hover img {
		transform: scale(1.05); /* Premium, controlled desktop hover lens expansion */
	}
}

/* ==========================================================================
   1. LIGHTBOX OVERLAY STYLING
   ========================================================================== */
.lightbox {
	display: none;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.95);
	justify-content: center;
	align-items: center;
	touch-action: pan-y; /* Prevents vertical page bouncing while swiping left/right */
}

/* Native Fullscreen adjustments */
#lightbox:fullscreen {
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.95);
	display: flex; 
}

/* ==========================================================================
   2. HORIZONTAL CONTROLS BAR (GLASSMORPHIC FLOATING ISLAND)
   ========================================================================== */
.lightbox-controls {
	position: absolute;
	top: 25px;
	right: 25px;
	display: flex;
	flex-direction: row; /* Forces buttons side-by-side */
	align-items: center; /* Centers them perfectly vertically */
	gap: 15px;           /* Clean horizontal spacing between text and X */
	z-index: 120;

	/* GLASSMORPHIC CONTAINER UPGRADES: */
	background-color: rgba(0, 0, 0, 0.65) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 30px !important;
	padding: 6px 18px 6px 18px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Base resets for all header action icons */
.fullscreen-btn, .close-btn, .share-btn, .flag-btn, .keyboard-btn {
	background: none !important;
	border: none !important;
	color: #ffffff !important;
	cursor: pointer !important;
	opacity: 0.8;
	transition: opacity 0.2s, transform 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px !important;
	line-height: 1 !important;
	box-sizing: border-box;
}

/* Smooth hover animations across all panel elements */
.fullscreen-btn:hover, .close-btn:hover, .share-btn:hover, .flag-btn:hover, .keyboard-btn:hover {
	opacity: 1;
	transform: scale(1.1); /* Slightly pops the icon out on hover */
}

/* Target the text button uniquely so it stays sleek and flat */
.fullscreen-btn {
	font-size: 24px; 
	font-family: sans-serif;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 700; /* Bold the dash/brackets slightly so they look cohesive with the X cross */
	white-space: nowrap; /* Prevents the text from breaking into two lines */
}

/* ==========================================================================
   SHARE ACTION BUTTON ELEMENT INTERFACES
   ========================================================================== */
.share-btn {
	font-size: 20px; /* Perfectly scales Font Awesome geometry proportions */
}

/* Ensure the shared node color definitions align perfectly with your lightbox controls override architecture */
#lightbox-share-btn,
#lightbox-share-btn i {
	color: #ffffff !important;
}

#lightbox-share-btn:hover i {
	color: #ffffff !important;
	opacity: 1;
}

/* ==========================================================================
   FLAG & KEYBOARD CUSTOM BUTTON REFINEMENTS
   ========================================================================== */
.flag-btn {
	font-size: 20px !important;
}
.flag-btn.active {
	color: #f1c40f !important; /* Radiant gold palette when item is flagged */
}

.keyboard-btn {
	font-size: 20px !important;
	position: relative !important; /* Context holder for the hover tooltip */
}

/* Target the close icon uniquely so it stays big, vertical aligned, and obvious */
.close-btn {
	font-size: 28px; /* Slightly adjusted down from 32px to scale flawlessly within the pill frame height */
	position: relative;
	top: -1px; /* Precision adjustment to keep cross vectors mathematically centered */
}

/* Lightbox Keyboard Control Layouts */
.keyboard-btn {
	background: none !important;
	border: none !important;
	color: #ffffff !important;
	font-size: 20px !important;
	cursor: pointer !important;
	padding: 8px !important;
	position: relative !important; /* Establishes alignment tracking context for the nested drop card */
	transition: color 0.2s ease, transform 0.2s ease !important;
}

.keyboard-btn:hover {
	color: #3498db !important;
	transform: scale(1.1);
}

/* Glassmorphic Hotkey Tooltip Overlay Card */
.keyboard-tooltip {
	position: absolute;
	top: 45px;
	right: 0;
	background-color: rgba(20, 20, 20, 0.9);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	padding: 14px;
	width: 180px;
	text-align: left;
	box-shadow: 0 8px 24px rgba(0,0,0,0.4);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	transform: translateY(-5px);
	z-index: 10000;
}

/* Slide down into focus automatically when hovering the main icon button */
.keyboard-btn:hover .keyboard-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.keyboard-tooltip h3 {
	margin: 0 0 8px 0 !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	color: #3498db !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.keyboard-tooltip ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.keyboard-tooltip li {
	font-size: 11.5px !important;
	color: #e0e0e0 !important;
	margin-bottom: 6px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.keyboard-tooltip li:last-child {
	margin-bottom: 0 !important;
}

/* Styled Keyboard Keycaps (<kbd>) */
.keyboard-tooltip kbd {
	background-color: #333333;
	color: #ffffff;
	border: 1px solid #555555;
	border-radius: 4px;
	padding: 1px 5px;
	font-size: 10px;
	font-family: Consolas, "Liberation Mono", Courier, monospace;
	box-shadow: 0 2px 0 #111111;
}

/* Evict the keyboard utility on all touch-primary interfaces (phones/tablets), regardless of screen orientation */
@media (hover: none) and (pointer: coarse) {
	.keyboard-btn {
		display: none !important;
	}
}

/* Sleek, Modern Lightbox Corner Counter Overlay (Centered Bottom) */
.lightbox-counter {
	position: absolute;
	/* Pin to the bottom center */
	bottom: 12px !important;
	left: 50% !important;
	/* Perfect horizontal centering trick independent of element width */
	transform: translateX(-50%) !important;
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #e0e0e0;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	z-index: 10;
	white-space: nowrap;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	
	/* Global layout resets to prevent any leftover interference */
	margin: 0 !important;
	right: auto !important;
	top: auto !important;

	/* Flexbox Engine to bundle primary tracking and nested Item ID variables */
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 3px !important;
	padding: 8px 14px 8px 14px !important;

	/* INTERACTIVE UPGRADE UPDATES: */
	pointer-events: auto !important; /* Enable layout click/tap capturing capability */
	cursor: pointer !important;       /* Displays interactive hand pointer on desktop pointer devices */
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease !important;
}

/* Subtle physical interactive pop feedback effect on hover/press */
.lightbox-counter:hover {
	background-color: rgba(0, 0, 0, 0.85);
	border-color: rgba(255, 255, 255, 0.3);
}
.lightbox-counter:active {
	transform: translateX(-50%) scale(0.97) !important; /* Retains central position anchors while pulsing downward slightly */
}

/* Primary Navigation Tracker Line Style */
#lightbox-counter-text {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	display: block !important;
	line-height: 1.2 !important;
}

/* Nested Asset Identifier Code Style */
#lightbox-item-id {
	color: #b3b3b3; /* Softer layout tint to establish clean visual hierarchy */
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: 0.5px;
	text-transform: none; /* Safely retains native alphanumeric code casings */
	display: block !important;
	line-height: 1.2 !important;
}


/* Ensure perfect layout spacing on tight mobile screens */
@media (max-width: 768px) {
	.lightbox-counter {
		position: fixed !important;
		bottom: 12px !important; /* Neatly anchors it just above the screen edge */
		left: 50% !important;
		transform: translateX(-50%) !important;
		padding: 7px 12px 7px 12px !important;
		right: auto !important;
	}
	
	#lightbox-counter-text {
		font-size: 10.5px;
	}
	
	#lightbox-item-id {
		font-size: 10px;
	}
}

/* Micro-Signifier Clipboard Icon inside Lightbox Pillbox Capsule */
.pillbox-copy-icon {
	font-size: 10px !important;
	margin-right: 4px !important;
	opacity: 0.5; /* Keeps it completely discreet and non-intrusive */
	vertical-align: middle;
	transition: opacity 0.2s ease, transform 0.2s ease !important;
	display: inline-block !important;
}

/* Subtle hover enhancement on pointer hardware devices */
.lightbox-counter:hover .pillbox-copy-icon {
	opacity: 0.85;
	transform: scale(1.1);
}

/* Highlight style when the asset is successfully copied */
.pillbox-copy-icon.success {
	opacity: 1 !important;
	color: #ffffff !important;
	transform: scale(1.15);
}

/* Lightbox Flag Button Standard Modifications */
.flag-btn {
	background: none !important;
	border: none !important;
	color: #ffffff !important;
	font-size: 20px !important;
	cursor: pointer !important;
	padding: 8px !important;
	transition: color 0.2s ease, transform 0.2s ease !important;
}
.flag-btn:hover {
	color: #3498db !important; /* Elegant architectural blue shift on hover */
	transform: scale(1.1);
}
.flag-btn.active {
	color: #f1c40f !important; /* Radiant gold palette assignment when item is flagged */
}

/* Floating Glassmorphic Proofing Status Tray Panel (Moved to Top) */
.proofing-panel {
	position: fixed;
	/* Hide out of frame above the top edge instead of the bottom */
	top: -80px; 
	bottom: auto !important;
	left: 50%;
	transform: translateX(-50%);
	width: 92%;          /* Allows a clean margin on medium-sized screens */
	max-width: 460px;    /* INCREASED from 365px to cleanly accommodate both buttons */
	background-color: rgba(20, 20, 20, 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 30px;
	padding: 12px 12px 12px 15px;  /* Balanced horizontal interior padding */
	z-index: 9999;       /* Keeps it layered cleanly over scrolling elements */
	box-shadow: 0 10px 30px rgba(0,0,0,0.5);
	
	/* Smooth bounce transition down into the viewport frame */
	transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; 
}

/* CHANGE: Slide down from the top when items are actively shortlisted */
.proofing-panel.show {
	top: 10px !important; 
	bottom: auto !important;
}

/* Ensure perfect layout handling on small phone viewports */
@media (max-width: 768px) {
	.proofing-panel {
		/* On mobile, shift it down slightly further (e.g., 75px) if it needs to clear your top layout navigation items */
		top: -80px;
	}
	.proofing-panel.show {
		top: 75px !important; /* Clears the top capsule nicely when both are visible on mobile */
		bottom: auto !important;
	}
}

.proofing-panel-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: #f5f5f5;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	font-weight: 500;
}
/* ==========================================================================
   UNIFIED PROOFING PANEL BUTTONS
   ========================================================================== */

/* Shared structural rules to lock in pixel-perfect symmetry */
.proofing-copy-btn,
.proofing-email-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	
	/* Explicit height + zeroed vertical padding completely eliminates line-height drift */
	height: 32px;
	padding: 0 12px;
	box-sizing: border-box;
	
	border: none;
	border-radius: 20px; /* Unifies both buttons into your sleek capsule aesthetic */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	
	/* Uniform smooth transitions for both hover and tactile press states */
	transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Identical physics scale effect on active click for both actions */
.proofing-copy-btn:active,
.proofing-email-btn:active {
	transform: scale(0.96);
}

/* Individual Color Rollouts */
.proofing-copy-btn {
	background-color: #0066cc;
	color: #ffffff;
}
.proofing-copy-btn:hover {
	background-color: #0052a3;
}

.proofing-email-btn {
	background-color: #5d7917;
	color: #ffffff;
}
.proofing-email-btn:hover {
	background-color: #4a6112;
}

/* LAYOUT TRICK: Because .proofing-panel-content uses space-between,
   setting a left margin of auto on the first button cleanly anchors the counter 
   to the far left, while clustering both action buttons tightly on the right.
*/
#proofing-copy-all-btn {
	margin-left: auto;
	margin-right: 4px; /* Crisp spacing between the two button capsules */
}

/* Shift down layout elements slightly on mobile devices to optimize handling bounds */
@media (max-width: 480px) {
	.proofing-panel {
		width: 95%;
		padding: 10px 12px;
	}
	.proofing-panel-content {
		font-size: 12px;
		gap: 8px;
	}
	/* Extra compact padding on tiny mobile viewports to prevent overflow */
	.proofing-copy-btn,
	.proofing-email-btn {
		padding: 0 10px;
		font-size: 11px;
		height: 30px;
	}
}

/* ==========================================================================
   3. LIGHTBOX CONTENT (THE IMAGE AND CAPTION CONTAINER)
   ========================================================================== */
/* Premium Fade-In Animation for New Photo Insertion */
#lightbox-img {
	/* animation: lightboxFadeIn 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; */
	animation: lightboxFadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	will-change: opacity;
}

@keyframes lightboxFadeIn {
	from {
		opacity: 0;
		transform: scale(0.97);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.lightbox-content {
	width: 100%;
	height: 100%;
	max-width: 95vw;  
	max-height: 85vh; 
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* Big Image Scale adjustments during Fullscreen Mode */
#lightbox:fullscreen .lightbox-content {
	max-width: 98vw;  
	max-height: 90vh; 
}

/* Managed entirely by our JS runtime sizing engine */
.lightbox-image-container {
	position: relative;
	display: block;
	max-width: 100%;
	max-height: 100%;
	/* HARDWARE ACCELERATION: Synchronizes the box layer boundaries with */
	/* the image pixels on scaled displays, eliminating subpixel gaps */
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	will-change: width, height;
	/* Smooth glide animation transition curve */
	/* transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); */
	transition: none;
}

/* Helper utility utility added dynamically by JS to kill lag during raw touch dragging */
.lightbox-image-container.is-dragging {
	transition: none !important;
}

.lightbox-image-container.is-snapping {
	transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* The actual high-res image element */
#lightbox-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Photo Caption Text */
#lightbox-caption {
	color: #fff;
	margin-top: 15px;
	font-size: 1.1rem;
	text-align: center;
}

#lightbox:fullscreen #lightbox-caption {
	margin-top: 15px;
	font-size: 18px;    
}

.nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.1);
	color: white;
	border: none;
	padding: 16px;
	font-size: 24px;
	cursor: pointer;
	border-radius: 4px;
	user-select: none;
	transition: background 0.2s;
}
.nav-btn:hover { background: rgba(255, 255, 255, 0.25); }
.prev-btn { left: 20px; }
.next-btn { right: 20px; }

/* Hide mobile nav buttons on small mobile displays to avoid accidental taps */
@media (max-width: 600px) {
	.nav-btn { display: none; } 
}
/* Icons */
ul.icons {
	cursor: default;
	list-style: none;
	padding-left: 0;
}
ul.icons li {
	display: inline-block;
	padding: 0 1em 0 0;
}
ul.icons li:last-child {
	padding-right: 0;
}
ul.icons li .icon:before {
	font-size: 1.5rem;
}
.fa-home, .fas {
	color: #68861b !important;
}
.icons li a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	font-size: 14px;
}
.link-text {
	font-weight: 500 !important;
	color: #68861b !important;
}

/* Style alignment override for the primary gallery share button */
.main-share-btn {
	display: inline-flex;
	align-items: center;
	background: transparent;
	border: none;
	color: #4b6b2c; /* Matches your beautiful green branding icon accents */
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	padding: 4px 8px;
	transition: color 0.2s ease, opacity 0.2s ease;
	text-decoration: underline; /* Keeps typography treatment identical to links */
}

.main-share-btn i {
	margin-right: 6px;
	color: #555; /* Default gray for font-awesome layout node tracking icons */
	transition: color 0.2s ease;
}

/* Elegant micro-interaction states */
.main-share-btn:hover {
	color: #2e441b; /* Darker green fallback on active desktop focus */
	opacity: 0.9;
}

.main-share-btn:hover i {
	color: #2e441b;
}

/* Clean formatting adjustment for the link copied success accent state */
.main-share-btn.copied {
	color: #28a745; /* Success green notification */
	text-decoration: none;
}
.main-share-btn.copied i {
	color: #28a745;
}

/* Footer */
#footer {
	padding: 2.25em 2.25em 1em 2.25em;
	text-align: center;
	font-size: 18px;
}
#footer .footer-content {
	display: inline-block;
	font-size: 0.8em;
	line-height: 1.7;
	padding: 0;
	margin: 0;
}
/* Base Style for links and Footer Credit Link */
.link-text, 
.footer-credit {
	color: #68861b;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 4px; /* Sets precise 4px distance from text */
	transition: color 0.2s ease, text-decoration-style 0.2s ease;
}

.icons li a:has(.link-text) {
	text-decoration: none !important;
}

/* Hover Style (Fixed Selector Syntax) */
@media (hover: hover) {
	/* 1. Standard hover for standalone items like the footer link */
	.link-text:hover, 
	.footer-credit:hover {
		color: #4b6213; /* A beautiful, readable darker olive shade */
		text-decoration-style: solid; /* Switches dotting to solid on hover */
	}

	/* 2. Unified button hover: Hovering anywhere on the parent anchor 'a' 
	      triggers the smooth style transition on the text inside it. */
	.icons li a:hover .link-text {
		color: #4b6213;
		text-decoration-style: solid;
	}
}
/* Scroll to Top Button */
.scroll-to-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 45px;
	height: 45px;
	background-color: #333333; /* Matches your footer/dark aesthetic */
	color: #ffffff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.2s ease;
	z-index: 99; /* Just below the lightbox modal layer */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.scroll-to-top:hover {
	background-color: #555555; /* Subtle hover state */
}
.scroll-to-top.show {
	opacity: 1;
	visibility: visible;
}
/* Mobile adjustments */
@media (max-width: 768px) {
	.scroll-to-top {
		bottom: 20px;
		right: 20px;
		width: 40px;
		height: 40px;
		font-size: 16px;
	}
}
/* --- No-JavaScript Resilient Fallbacks --- */
.no-js .gallery-item {
	display: block !important;
	opacity: 1 !important;
}

/* Hide the lazy-load images since their JS triggers won't execute */
.no-js img.js-gallery-img {
	display: none !important;
}

/* Ensure the fallback mirror images look beautiful and fill your grid */
.no-js noscript img {
	display: block !important;
	width: 100%;
	height: auto;
	opacity: 1 !important;
}

.no-js .tab-btn, 
.no-js .gallery-tabs,
.no-js #scrollToTopBtn {
	display: none !important; 
}
/* Miscellaneous */
.no-break {
  white-space: nowrap;
}
/* Margin and Padding */
.mt-0 {
	margin-top: 0px !important;
}
.mt-2 {
	margin-top: 2px !important;
}
.mt-4 {
	margin-top: 4px !important;
}
.mt-6 {
	margin-top: 6px !important;
}
.mt-8 {
	margin-top: 8px !important;
}
.mt-10 {
	margin-top: 10px !important;
}
.mt-12 {
	margin-top: 12px !important;
}
.mt-14 {
	margin-top: 14px !important;
}
.mt-16 {
	margin-top: 16px !important;
}
.mt-18 {
	margin-top: 18px !important;
}
.mt-20 {
	margin-top: 20px !important;
}
.mt-22 {
	margin-top: 22px !important;
}
.mt-24 {
	margin-top: 24px !important;
}
.mt-26 {
	margin-top: 26px !important;
}
.mt-28 {
	margin-top: 28px !important;
}
.mt-30 {
	margin-top: 30px !important;
}
.mt-32 {
	margin-top: 32px !important;
}
.mt-34 {
	margin-top: 34px !important;
}
.mt-36 {
	margin-top: 36px !important;
}
.mt-38 {
	margin-top: 38px !important;
}
.mt-40 {
	margin-top: 40px !important;
}
.mt-42 {
	margin-top: 42px !important;
}
.mt-44 {
	margin-top: 44px !important;
}
.mt-46 {
	margin-top: 46px !important;
}
.mt-48 {
	margin-top: 48px !important;
}
.mt-50 {
	margin-top: 50px !important;
}
.mt-52 {
	margin-top: 52px !important;
}
.mt-54 {
	margin-top: 54px !important;
}
.mt-56 {
	margin-top: 56px !important;
}
.mt-58 {
	margin-top: 58px !important;
}
.mt-60 {
	margin-top: 60px !important;
}
.mr-0 {
	margin-right: 0px !important;
}
.mr-2 {
	margin-right: 2px !important;
}
.mr-4 {
	margin-right: 4px !important;
}
.mr-6 {
	margin-right: 6px !important;
}
.mr-8 {
	margin-right: 8px !important;
}
.mr-10 {
	margin-right: 10px !important;
}
.mr-12 {
	margin-right: 12px !important;
}
.mr-14 {
	margin-right: 14px !important;
}
.mr-16 {
	margin-right: 16px !important;
}
.mr-18 {
	margin-right: 18px !important;
}
.mr-20 {
	margin-right: 20px !important;
}
.mr-22 {
	margin-right: 22px !important;
}
.mr-24 {
	margin-right: 24px !important;
}
.mb-0 {
	margin-bottom: 0px !important;
}
.mb-1 {
	margin-bottom: 1px !important;
}
.mb-2 {
	margin-bottom: 2px !important;
}
.mb-3 {
	margin-bottom: 3px !important;
}
.mb-4 {
	margin-bottom: 4px !important;
}
.mb-5 {
	margin-bottom: 5px !important;
}
.mb-6 {
	margin-bottom: 6px !important;
}
.mb-12 {
	margin-bottom: 12px !important;
}
.mb-14 {
	margin-bottom: 14px !important;
}
.mb-16 {
	margin-bottom: 16px !important;
}
.mb-18 {
	margin-bottom: 18px !important;
}
.mb-20 {
	margin-bottom: 20px !important;
}
.mb-22 {
	margin-bottom: 22px !important;
}
.mb-24 {
	margin-bottom: 24px !important;
}
.mb-26 {
	margin-bottom: 26px !important;
}
.mb-28 {
	margin-bottom: 28px !important;
}
.mb-30 {
	margin-bottom: 30px !important;
}
.mb-32 {
	margin-bottom: 32px !important;
}
.mb-34 {
	margin-bottom: 34px !important;
}
.mb-36 {
	margin-bottom: 36px !important;
}
.mb-38 {
	margin-bottom: 38px !important;
}
.mb-40 {
	margin-bottom: 40px !important;
}
.mb-42 {
	margin-bottom: 42px !important;
}
.mb-46 {
	margin-bottom: 46px !important;
}
.mb-48 {
	margin-bottom: 48px !important;
}
.mb-50 {
	margin-bottom: 50px !important;
}
.mb-52 {
	margin-bottom: 52px !important;
}
.mb-54 {
	margin-bottom: 54px !important;
}
.mb-56 {
	margin-bottom: 56px !important;
}
.mb-58 {
	margin-bottom: 58px !important;
}
.mb-60 {
	margin-bottom: 60px !important;
}
.mb-62 {
	margin-bottom: 62px !important;
}
.mb-64 {
	margin-bottom: 64px !important;
}
.mb-66 {
	margin-bottom: 66px !important;
}
.mb-68 {
	margin-bottom: 68px !important;
}
.mb-70 {
	margin-bottom: 70px !important;
}
.mb-72 {
	margin-bottom: 72px !important;
}
.mb-74 {
	margin-bottom: 74px !important;
}
.mb-76 {
	margin-bottom: 76px !important;
}
.mb-78 {
	margin-bottom: 78px !important;
}
.mb-80 {
	margin-bottom: 80px !important;
}
.ml-0 {
	margin-left: 0px !important;
}
.ml-2 {
	margin-left: 2px !important;
}
.ml-4 {
	margin-left: 4px !important;
}
.ml-6 {
	margin-left: 6px !important;
}
.ml-8 {
	margin-left: 8px !important;
}
.ml-10 {
	margin-left: 10px !important;
}
.ml-12 {
	margin-left: 12px !important;
}
.ml-14 {
	margin-left: 14px !important;
}
.ml-16 {
	margin-left: 16px !important;
}
.ml-18 {
	margin-left: 18px !important;
}
.ml-20 {
	margin-left: 20px !important;
}
.ml-22 {
	margin-left: 22px !important;
}
.ml-24 {
	margin-left: 24px !important;
}
.pl-0 {
	padding-left: 0px !important;
}
.pl-2 {
	padding-left: 2px !important;
}
.pl-4 {
	padding-left: 4px !important;
}
.pl-6 {
	padding-left: 6px !important;
}
.pl-8 {
	padding-left: 8px !important;
}
.pr-0 {
	padding-right: 0px !important;
}
.pr-2 {
	padding-right: 2px !important;
}
.pr-4 {
	padding-right: 4px !important;
}
.pr-6 {
	padding-right: 6px !important;
}
.pr-8 {
	padding-right: 8px !important;
}
.pt-0 {
	padding-top: 0px !important;
}
.pt-2 {
	padding-top: 2px !important;
}
.pt-4 {
	padding-top: 4px !important;
}
.pt-6 {
	padding-top: 6px !important;
}
.pt-8 {
	padding-top: 8px !important;
}
.pt-10 {
	padding-top: 10px !important;
}
.pt-12 {
	padding-top: 12px !important;
}
.pt-14 {
	padding-top: 14px !important;
}
.pt-16 {
	padding-top: 16px !important;
}
.pt-18 {
	padding-top: 18px !important;
}
.pt-20 {
	padding-top: 20px !important;
}
.pt-22 {
	padding-top: 22px !important;
}
.pb-0 {
	padding-bottom: 0px !important;
}
.pb-2 {
	padding-bottom: 2px !important;
}
.pb-4 {
	padding-bottom: 4px !important;
}
.pb-6 {
	padding-bottom: 6px !important;
}
.pb-8 {
	padding-bottom: 8px !important;
}
.pb-10 {
	padding-bottom: 10px !important;
}
.pb-12 {
	padding-bottom: 12px !important;
}
.pb-14 {
	padding-bottom: 14px !important;
}
.pb-16 {
	padding-bottom: 16px !important;
}
.pb-18 {
	padding-bottom: 18px !important;
}
.pb-20 {
	padding-bottom: 20px !important;
}
.pb-22 {
	padding-bottom: 22px !important;
}
.pb-24 {
	padding-bottom: 24px !important;
}
.pb-26 {
	padding-bottom: 26px !important;
}
.pb-28 {
	padding-bottom: 28px !important;
}
.pb-30 {
	padding-bottom: 30px !important;
}
.pb-32 {
	padding-bottom: 32px !important;
}
.pb-34 {
	padding-bottom: 34px !important;
}
.pb-36 {
	padding-bottom: 36px !important;
}
.pb-38 {
	padding-bottom: 38px !important;
}
.pb-40 {
	padding-bottom: 40px !important;
}
.pb-42 {
	padding-bottom: 42px !important;
}
.pb-44 {
	padding-bottom: 44px !important;
}
.pb-46 {
	padding-bottom: 46px !important;
}
.pb-48 {
	padding-bottom: 48px !important;
}
.fc-black {
	color: black;
}
.fc-262626 {
	color: #262626;
}
.fc-3a3a3a {
	color: #3a3a3a;
}
.fc-404040 {
	color: #404040;
}
.fc-262626 {
	color: #4c4c4c;
}
.fc-green {
	color: green;
}
.fc-red {
	color: red;
}
.fs-10 {
	font-size: 10px !important;
}
.fs-12 {
	font-size: 12px !important;
}
.fs-14 {
	font-size: 14px !important;
}
.fs-16 {
	font-size: 16px !important;
}
.fs-18 {
	font-size: 18px !important;
}
.fs-20 {
	font-size: 20px !important;
}
.fs-22 {
	font-size: 22px !important;
}
.fw-normal {
	font-weight: normal !important;
}
.fw-bold {
	font-weight: bold !important;
}
.fw-lighter {
	font-weight: lighter !important;
}
.fw-bolder {
	font-weight: bolder !important;
}
.fw-100, a.fw-100, a.fw-100:hover {
	font-weight: 100;
}
.fw-200, a.fw-200, a.fw-200:hover {
	font-weight: 200;
}
.fw-300, a.fw-300, a.fw-300:hover {
	font-weight: 300;
}
.fw-400, a.fw-400, a.fw-400:hover {
	font-weight: 400; /* Normal */
}
.fw-500, a.fw-500, a.fw-500:hover {
	font-weight: 500;
}
.fw-600, a.fw-600, a.fw-600:hover {
	font-weight: 600;
}
.fw-700, a.fw-700, a.fw-700:hover {
	font-weight: 700; /* Bold */
}
.fw-800, a.fw-800, a.fw-800:hover {
	font-weight: 800;
}
.fw-900, a.fw-900, a.fw-900:hover {
	font-weight: 900;
}

/* Font Styles */
.font-normal {
	font-style: normal;
}
.font-italic {
	font-style: italic;
}
.font-oblique {
	font-style: oblique;
}
.font-initial {
	font-style: initial;
}
.font-inherit {
	font-style: inherit;
}
/* Custom rules applied ONLY when native fullscreen is active */
#lightbox:fullscreen .lightbox-content {
	max-width: 98vw;  /* Push the image closer to the left/right screen edges */
	max-height: 90vh; /* Push the image closer to the top/bottom screen edges */
}

#lightbox:fullscreen #lightbox-img {
	max-height: 88vh; /* Keeps the image large but stops it from crowding the caption */
}

#lightbox:fullscreen #lightbox-caption {
	margin-top: 15px;
	font-size: 18px;  /* Make the caption slightly larger and easier to read on a large TV/Monitor */
}

/* ==========================================================================
   SCROLLBAR RECLAMATION PATCH (REVISED)
   Forces absolute scrollbar track eviction across all browser engine layers
   ========================================================================== */

/* Target the layout root AND any active fullscreen element layers */
html.lightbox-open,
body.lightbox-open,
:-webkit-full-screen,
:fullscreen {
	overflow: hidden !important;
	padding-right: 0px !important;
	margin-right: 0px !important;
}

/* Eliminate scrollbar track allocations in Chrome, Edge, and Brave on Windows */
html.lightbox-open::-webkit-scrollbar,
body.lightbox-open::-webkit-scrollbar,
:fullscreen::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}


/* Full-bleed background band that matches the visual language of the philosophy row */
.gallery-utility-band {
	background-color: #eff2ee; /* Premium, clean soft-gray tint */
	margin-left: -20px;        /* Spans past body padding left edge */
	margin-right: -20px;       /* Spans past body padding right edge */
	padding: 40px 44px 30px 46px;        /* Deep vertical padding for breathing room */
	border-top: 1px solid #eff2ee;
	border-bottom: 1px solid #eff2ee;
	text-align: center;
}

/* Stripped down Gallery Focus box styling to look sharp against a solid background color */
.gallery-summary {
	font-size: 16px !important;
	color: #555;
	max-width: 575px;
	margin: 2px auto 28px auto;
	/* padding: 22px 18px; */
	padding: 28px 30px 30px 30px !important;
	line-height: 1.5;
	text-align: center;
	border: 1px dotted #a6a6a6;
	border-radius: 6px;
}

/* Upgrade "Share Gallery" to a Clean Action Button */
#main-gallery-share-btn {
	background-color: #5d7917 !important; /* Your brand green */
	color: #ffffff !important;
	border: none;
	border-radius: 4px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px; /* Gives it clear breathing room below the text */
	transition: background-color 0.2s ease, transform 0.1s ease;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Subtle Hover & Interactive States */
#main-gallery-share-btn:hover {
	background-color: #4a6112 !important; /* Slightly deeper green on hover */
}

#main-gallery-share-btn:active {
	transform: scale(0.98); /* Tactile press feedback */
}

/* Base structural rules to enforce pixel-perfect matching */
.print-action-btn, 
.print-action-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 34px; /* Hard targets the exact same vertical box footprint */
	padding: 0 14px;
	font-family: inherit; /* FORCES the button to use the exact same font face as the link */
	font-size: 13.5px;
	font-weight: 700;
	text-rendering: optimizeLegibility; /* Enhances letter spacing and crispness */
	-webkit-font-smoothing: antialiased; /* Cleans up subpixel anti-aliasing on Chrome/Safari */
	-moz-osx-font-smoothing: grayscale; /* Cleans up subpixel anti-aliasing on Firefox */
	text-decoration: none;
	border-radius: 4px;
	box-sizing: border-box;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Default state: Green border, green text, clean background */
.print-action-btn {
	background: none;
	border: 1px solid #5d7917;
	color: #5d7917;
	cursor: pointer;
	padding-top: 0px;
	padding-bottom: 0;
}

.print-action-link {
	background-color: transparent;
	border: 1px solid #5d7917;
	color: #5d7917;
}

/* Hover state: Solid green background, crisp white text & icons */
.print-action-btn:hover,
.print-action-link:hover {
	background-color: #5d7917;
	color: #ffffff !important;
}

/* Ensure Font Awesome icons inherit the parent hover color change seamlessly */
.print-action-btn:hover i,
.print-action-link:hover i {
	color: #ffffff !important;
}

#contact {
	/* 1. Sets the ideal breathing room from the top edge once the ceiling is lifted */
	scroll-margin-top: 40px; 
	
	/* 2. CRITICAL: Creates a large visual runway at the bottom of the page.
				This gives the scrollbar the space it needs to push your form up. */
	padding-bottom: 35vh; 
}