/*
Theme Name: Smokey Rooms
Author: P. Casey
Author URI: https://thoughtpunks.com
*/

/* --- TABLE OF CONTENTS ---

	1.  FOUNDATION & GLOBALS
		- Variables
		- Global Resets
		- Body Background & Typography
		- Headings & Fluid Type Scale

	2.  LAYOUT
		- #page wrapper
		- .site-main (The Scrapbook Object)
		- .site-header (The Bakelite Device)
		- .site-footer (The Bakelite Device)

	3.  CORE TYPOGRAPHY & LINKS
		- Link Styles
		- Entry Content Links

	4.  THEMATIC TYPOGRAPHY
		- .single-post (Typed Note)
		- .page (Newspaper Clipping)
		- blockquote (Handwritten Note)

	5.  NAVIGATION
		- .main-navigation (Physical Switches)
		- .rolodex-navigation (Rolodex Cards)
		- .menu-toggle (Mobile Button)

	6.  COMPONENTS
		- Buttons (Machined Brass)
		- Forms (Dossier Interface)
		- Images (Polaroids)

	7.  TEMPLATES
		- Archives (File Folders)
		- 404 Page (Missing Dossier)
		- Search Results

	8.  COMMENTS
		- Comments Area Container (Paperclipped)
		- Individual Comments (Case Notes)
		- Comment Form

	9.  WIDGETS
		- Footer Widget Area (Recessed Panel)
		- Widget Titles & Content

	10. MISC & EFFECTS
		- Aquamarine Accents (Bezels, Jewels)
		- Typewriter Effect

	11. ACCESSIBILITY
		- Skip to Content Link
		- Focus States

	12. RESPONSIVE DESIGN
		- Mobile First Base Styles
		- Tablet & Up Overrides

--- */

/* --- 1. FOUNDATION & GLOBALS --- */

:root {
	/* Layout */
	--site-max-width: 1600px;

	/* Color Palette */
	--ink-black: #0D0D0D;
	--ink-soft-black: #2a2a2a;
	--leather-bg: #1A1A1A;
	--newsprint-bg: #f5f5dc;
	--brass: #c0a062;
	--brass-dark: #a17d3a;
	--brass-light: #e6c88b;
	--aquamarine: #00c4b4;
	--aquamarine-glow: rgba(0, 196, 180, 0.7);
	--aquamarine-glow1: rgba(0, 186, 170, 0.5);
	--aquamarine-glow2: rgba(0, 176, 160, 0.3);	
	--polaroid-frame: #fcfaf2;
	--manila-folder: #f0e6d6;
	--manila-darker: #dcd0b8;
	--blood-red-rich: #980002;

	/* Typography */
	--font-typewriter: 'Special Elite', monospace;
	--font-newsprint: 'Oswald', sans-serif;
	--font-handwriting: 'IM Fell English', serif;
	--font-ui: 'Plateia', sans-serif;

	/* Textures (Optimized) */
	--noise-png: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAAIYSURBVHhe7ZLRbhoxEEV/aEskx4AjdAROkB25A05Q3AGG6Bg4QZ6gU0QKJ2hDqCQUJRqgZcRJa895G4h5/zZz+f0y3M6Zmfl3FoIgCIIgCIIgCILwD6y9/9L39/v7u/y21gYAnP2y1lrrY723t/v7/b78tqgJAAC/b/f2ttrba/v766W1p5/v93t722t/7fT0/v5wb3f69X2t/bXWdnb2/T4A4PJqrd7eXgBwZms/z/OaAIAjW/v5fr/e3t7W2gAA8Pus/QCAQGr9ff8Fg0GAaZpe73+xcVFRFEXfA1D/FQBQrVb707tCoR+n+D0YDAa5b78Gg0G5XG43G/D/Gg0G5XIZDAa5XC5+nb7P2n+fnp5+f/9wb3f2XgBwYWt/v79fa+2na2t/b79Xaw0ACADw/zYBAFwbAICrAQBcGwCAqwEAXBsAgKsBAFwbAICrAQBcGwCAqwEAXBsAgKsBAFwbAICrAQBcGwCAqwEAXBsAgKsBAFwbAICrAQBcGwCAqwEAXBsAgKsBAFwbAICrAQBcGwCAqwEAXBsAgKsBAFwbAICrAQBcGwCAqwEAXBsAgKsBAFwbAICrAQBcGwCAqwEAXBsAgKsBAFwbAICrAQBcGwCAqwEAXBsAwP/bDOC7BEEQBEEQBEEQBEH4N/gGLp7gI4f0AaIAAAAASUVORKCYII=");

	/* Masks */
	--mask-edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1000 1000'%3E%3Cfilter id='rough-edge'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.03' numOctaves='2' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='15' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='20' y='5' width='960' height='990' rx='1' ry='1' fill='white' filter='url(%23rough-edge)'/%3E%3C/svg%3E");
	--mask-edge-mobile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1000 1000'%3E%3Cfilter id='rough-edge-mobile'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.04' numOctaves='2' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='6' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='10' y='10' width='980' height='980' rx='2' ry='2' fill='white' filter='url(%23rough-edge-mobile)'/%3E%3C/svg%3E");
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--font-handwriting);
	color: var(--ink-soft-black);
	background-color: #1a110a; /* Dark base color, provides depth */
	background-image:
		/* Simulates a top-down light source (soft-light effect) */
		radial-gradient(ellipse at 50% 0%, rgba(255, 255, 240, 0.08) 0%, transparent 50%),
		/* Darkens the overall texture (multiply effect) */
		radial-gradient(ellipse at 50% 50%, rgba(10, 5, 0, 0.4) 0%, transparent 100%),
		/* Adds a subtle sheen/highlight from the side */
		linear-gradient(170deg, rgba(255,255,255,0.03) 0%, transparent 15%),
		/* The base leather texture image */
		url('assets/images/leather-texture.png');
	font-size: clamp(16px, 1.5vw + 0.5rem, 19px);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* --- 2. LAYOUT --- */

#page.site {
	max-width: var(--site-max-width);
	margin: 0 auto;
	perspective: 1500px;
	position: relative;
}

/* The Main Scrapbook Object - Bottom Layer (Leather) */
.site-main {
	contain: layout style;
	background-color: #4a3728; /* Richer leather color */
	background-image:
		/* Leather Staining */
		radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0.3) 0%, transparent 60%),
		radial-gradient(ellipse at 10% 90%, rgba(0, 0, 0, 0.4) 0%, transparent 50%),
		/* Leather Texture */
		url('assets/images/leather-texture.png'),
		/* Noise for grain */
		var(--noise-png);
	padding: 2rem; /* Requested Padding */
	max-width: 1200px;
	margin: 2rem auto;
	border: 1px solid rgba(0,0,0,0.4);
	border-radius: 4px;
	box-shadow:
		inset 0 0 20px rgba(0,0,0,0.8), /* Deep edge darkening */
		0 2px 5px rgba(0,0,0,0.5);
	transition: transform 0.1s ease-out;
}

/* The Inner Layer (Textile/Paper behind content) */
.site-main-inner {
	background-color: #dcd0b8; /* Slightly grayer */
	background-image:
		/* Textile/Paper Texture & Noise */
		var(--noise-png);
	padding: 2rem;
	border-radius: 2px;
	box-shadow:
		inset 0 0 10px rgba(0,0,0,0.1),
		0 1px 2px rgba(0,0,0,0.2);
}

/* The Header "Bakelite Device" */
.site-header {
	--bakelite-base: #1a1a1a;
	--bakelite-highlight: #333;
	--bakelite-shadow: #000;

	background-color: var(--bakelite-base);
	background-image:
		radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.08) 0%, transparent 50%),
		radial-gradient(ellipse at 20% 80%, rgba(50,30,20,0.1) 0%, transparent 60%),
		var(--noise-png);
	background-blend-mode: normal, normal, overlay;
	padding: 0.75rem 1rem;
	border-radius: 12px;
	position: relative;
	z-index: 2; /* Ensures header dropdowns appear above the main content's stacking context */
	margin: 0 1.5rem 1.5rem;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	box-shadow:
		/* Inset Bezel & Pinstripe */
		inset 0 0 0 5px var(--brass-dark),
		inset 0 1px 0 6px var(--brass-light),
		inset 0 0 0 6px #000,
		inset 0 0 1px 7px rgba(220, 255, 250, 0.7),
		inset 0 0 4px 7px var(--aquamarine-glow),
		inset 0 0 5px 8px rgba(0,0,0,0.6),

		/* Bakelite Material Depth */
		inset 0 2px 1px 8px rgba(255,255,255,0.07),
		inset 0 -5px 4px 8px rgba(0,0,0,0.6),
		inset 0 10px 25px 8px rgba(0,0,0,0.7),

		/* NEW: Aquamarine Backlight Glow (top-left) */
		-7px -7px 13px -5px var(--aquamarine-glow),
		-4px -4px 8px -8px rgba(255,255,255,0.4),

		/* Main Cast Shadow (bottom-right) */
		15px 15px 25px -5px rgba(0,0,0,0.8),

		/* NEW: Textured Shadow Layers */
		10px 10px 10px -10px rgba(0,0,0,0.6), /* Softer main shadow */
		5px 5px 5px -5px rgba(0,0,0,0.4); /* Contact shadow */

	/* Optimization: Contain paint/layout */
	contain: layout style;
}

.site-branding {
	background: linear-gradient(135deg, var(--brass-light), var(--brass-dark) 80%);
	padding: 0.4rem 1.5rem;
	border-radius: 4px;
	border: 2px solid #000;
	border-top-color: #1a1a1a;
	box-shadow:
		inset 0 0 10px rgba(0,0,0,0.9),
		1px 1px 1px rgba(255,255,255,0.1);
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 80px; /* Ensure there is space for the layout */
}

.site-branding::before,
.site-branding::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	background: #000;
	border-radius: 50%;
	box-shadow: inset 1px 1px 1px rgba(255,255,255,0.1);
}
.site-branding::before { left: 10px; }
.site-branding::after { right: 10px; }

.site-branding {
	justify-self: start;
}

.center-console {
	justify-self: center;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.indicator-panel {
	position: relative;
	z-index: 102;
}

.main-navigation {
	justify-self: end;
}

.site-title {
	margin: 0;
}

.site-title a {
	font-family: "Plateia", var(--font-ui);
	font-size: clamp(1.5rem, 4vw, 2rem);
	font-weight: bold;
	color: var(--ink-black);
	text-transform: uppercase;
	text-shadow:
		/* New: Softened blur for realism */
		1px 1px 1px rgba(255, 255, 255, 0.2),
		-1px -1px 1px rgba(0, 0, 0, 0.9);
}

.site-description {
	font-family: var(--font-typewriter);
	font-size: clamp(0.6rem, 1vw + 0.4rem, 0.7rem);
	color: rgba(0,0,0,0.6);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: center;
	text-shadow: 1px 1px 0px rgba(255,255,255,0.1);
	margin: 0;
}

/* The Footer "Bakelite Device" */
.site-footer {
	contain: layout style;
	--bakelite-base: #1a1a1a;
	--bakelite-highlight: #333;
	--bakelite-shadow: #000;

	background-color: var(--bakelite-base);
	background-image:
		/* A subtler top highlight for the footer */
		radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.06) 0%, transparent 50%),
		radial-gradient(ellipse at 20% 80%, rgba(50,30,20,0.1) 0%, transparent 60%),
		var(--noise-png);
	background-blend-mode: normal, normal, overlay;
	padding: 1.5rem;
	border-radius: 12px;
	position: relative;
	margin: 2rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	box-shadow:
		/* New Subsurface Scattering Layers */
		inset 0 1px 0 1px rgba(255,255,240,0.02), /* A subtler highlight for the footer */
		inset 0 -1px 0 1px rgba(50,30,20,0.04),

		/* A shallower, simpler shadow stack */
		inset 0 0 0 3px var(--brass-dark),
		inset 0 1px 0 4px var(--brass-light),
		inset 0 0 0 4px #000,
		inset 0 0 1px 5px rgba(220, 255, 250, 0.5),
		inset 0 0 2px 5px var(--aquamarine-glow),
		inset 0 0 3px 6px rgba(0,0,0,0.6),
		inset 0 1px 1px 6px rgba(255,255,255,0.07),
		inset 0 -2px 2px 6px rgba(0,0,0,0.6),
		inset 0 5px 15px 6px rgba(0,0,0,0.7),
		0 0 1px rgba(255,255,255,0.1),
		0 15px 25px rgba(0,0,0,0.8);
}

.site-footer .site-info {
	background-color: var(--brass-dark);
	background-image:
		linear-gradient(135deg, var(--brass-light), var(--brass-dark) 80%),
		var(--noise-png);
	color: var(--ink-black);
	font-family: var(--font-ui);
	font-size: clamp(0.7rem, 1vw + 0.4rem, 0.8rem);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-align: center;
	padding: 0.75rem;
	border-radius: 2px;
	border: 1px solid #000;
	text-shadow:
		/* New: Softened blur for realism */
		-1px -1px 1px rgba(0,0,0,0.7),
		1px 1px 1px rgba(255, 255, 255, 0.2);
	box-shadow:
		/* Inset plate effect */
		inset 0 2px 5px rgba(0,0,0,0.6),
		/* Plate edge */
		1px 1px 1px rgba(255,255,255,0.1);
	position: relative;
}

.site-footer .site-info::before,
.site-footer .site-info::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 6px;
	height: 6px;
	background: #000;
	border-radius: 50%;
	transform: translateY(-50%);
	box-shadow: inset 1px 1px 1px rgba(255,255,255,0.1);
}

.site-footer .site-info::before { left: 10px; }
.site-footer .site-info::after { right: 10px; }

/* --- 3. CORE TYPOGRAPHY & LINKS --- */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-newsprint);
	text-transform: lowercase;
	-webkit-font-variant: small-caps;
	font-variant: small-caps;
	letter-spacing: 0.05em;
	line-height: 1.2;
	margin-bottom: 1.25rem;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1), 0 0 1px rgba(0,0,0,0.1);
}

/* Paragraphs & Block Spacing */
p {
	margin-bottom: 1.5rem;
}

ul, ol {
	margin-bottom: 1.5rem;
	margin-left: 1.5rem;
}

li {
	margin-bottom: 0.5rem;
}

hr {
	border: 0;
	border-top: 1px dashed rgba(0,0,0,0.2);
	margin: 2rem 0;
	height: 1px;
}

h1, .h1 { font-size: clamp(2.5rem, 5vw + 1rem, 4rem); }
h2, .h2 { font-size: clamp(2rem, 4vw + 1rem, 3.25rem); }
h3, .h3 { font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem); }
h4, .h4 { font-size: clamp(1.25rem, 2vw + 1rem, 2rem); }
h5, .h5 { font-size: clamp(1.1rem, 1.5vw + 1rem, 1.5rem); }
h6, .h6 { font-size: clamp(1rem, 1.2vw + 0.7rem, 1.4rem); }

a {
	color: inherit;
	text-decoration: none;
	position: relative;
}

.entry-content a {
	position: relative;
	display: inline-block; /* Allows padding and transform */
	background-color: #f8f5e6; /* Tab paper color */
	color: #222; /* Dark Ink */
	padding: 0.1em 0.4em;
	margin: 0 0.2em;
	border: 1px solid rgba(0,0,0,0.2);
	box-shadow:
		2px 2px 0 rgba(0,0,0,0.5), /* Heavy hard shadow */
		0 0 1px rgba(0,0,0,0.2);
	text-decoration: none;
	font-weight: bold;
	transform: rotate(-1deg); /* Slight messiness */
	transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
	z-index: 1;
}

/* The Tape Pseudo-element */
.entry-content a::before {
	content: '';
	position: absolute;
	top: -6px;
	left: 50%;
	transform: translateX(-50%) rotate(2deg);
	width: 60%;
	height: 12px;
	background-color: rgba(255, 255, 255, 0.4); /* Translucent tape */
	border-left: 1px solid rgba(255,255,255,0.3);
	border-right: 1px solid rgba(255,255,255,0.3);
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	pointer-events: none;
}

.entry-content a:hover {
	transform: rotate(0deg) translateY(1px); /* Press down effect */
	box-shadow:
		1px 1px 0 rgba(0,0,0,0.6), /* Compressed shadow */
		inset 0 0 2px rgba(0,0,0,0.1);
	background-color: #fff;
	z-index: 2;
}

/* --- 4. THEMATIC TYPOGRAPHY --- */

/* Unified "Irregularly Stained/Aged Newspaper" Style for Single Posts & Pages */
.single-post .hentry,
.page .hentry {
	/* Layout Constraints: Force unified single column "sheet" look - WIDENED */
	max-width: 1200px !important;
	margin: 0 auto !important;
	float: none !important;
	padding: 4rem 3rem; /* Requested Padding */
	position: relative;
	border: none;
	background: transparent; /* Background moved to pseudo-element */
	z-index: 1; /* Ensure content sits above shadows/bg */
}

/* The Paper Layer (Background & Mask) - Separated for Performance */
.single-post .hentry::before,
.page .hentry::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;

	/* Visuals: Deep Professional Texture Emulation (Inspiration: Remote SVGs) */
	background-color: #eae2c6; /* Base aged paper */

	/*
	   LAYER STACK (Top to Bottom):
	   1. Wrinkles (Additional Texture) - Low frequency turbulence
	   2. Dirt Stains (Dirtfold) - Irregular stains
	   3. Grit & Grain - High frequency noise
	   4. Fold - Linear gradient crease
	   5. Main Stained Base (Rotated 90deg) - Complex gradients
	*/
	background-image:
		/* 1. Wrinkles: Tactile texture */
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='turb-wrinkles'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='2' result='n'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23turb-wrinkles)'/%3E%3C/svg%3E"),

		/* 2. Dirt Stains: Scattered blobs */
		radial-gradient(circle at 20% 80%, rgba(90, 70, 50, 0.08) 0%, transparent 30%),
		radial-gradient(ellipse at 80% 20%, rgba(90, 70, 50, 0.06) 0%, transparent 40%),

		/* 3. Grit & Grain: High frequency noise */
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='turb-grit'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23turb-grit)' opacity='0.08'/%3E%3C/svg%3E"),

		/* 4. The Fold: Subtle vertical crease (simulated 90deg rotation) */
		linear-gradient(to right, transparent 49%, rgba(0,0,0,0.05) 50%, rgba(255,255,255,0.1) 51%, transparent 52%),

		/* 5. Main Stained Base (Rotated 90deg simulation):
		   Original was #A07D52 (brown). We use gradients running horizontal (to right) to mimic rotation.
		*/
		linear-gradient(to right, rgba(160, 125, 82, 0.1), rgba(160, 125, 82, 0) 20%, rgba(160, 125, 82, 0.05) 40%, rgba(160, 125, 82, 0.15) 100%),
		radial-gradient(circle at 50% 50%, #eae2c6, #dcd0b8);

	background-blend-mode: multiply, multiply, multiply, overlay, multiply, normal, normal;
	background-size:
		300px 300px, /* Wrinkles */
		100% 100%,   /* Stain 1 */
		100% 100%,   /* Stain 2 */
		150px 150px, /* Grit */
		100% 100%,   /* Fold */
		100% 100%,   /* Base Gradient 1 */
		100% 100%;   /* Base Gradient 2 */

	/* --- Organic Edges Mask (Optimized) --- */
	/* Using mask-border to slice the mask, preventing massive texture rasterization on Chrome */
	-webkit-mask-box-image: var(--mask-edge) 50 repeat;
	mask-border: var(--mask-edge) 50 repeat;
	mask-image: none;
	-webkit-mask-image: none;

	/* Asymmetric Paper Shadow (Optimized: Removed to prevent Chrome rasterization hang) */
}

/* The Shadow Layer - Separated for Performance & Extreme Depth */
.single-post .hentry::after,
.page .hentry::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -2;
	background: transparent;
	/* Directional Shadow Stack: Thinner Top/Left, Wider Bottom/Right */
	box-shadow:
		/* Top/Left: Visible, sharp, directional shadow (Negative offsets) */
		-4px -4px 8px rgba(0,0,0,0.25),
		/* Bottom/Right: Deep, diffuse shadow (Positive offsets) */
		6px 6px 12px rgba(0,0,0,0.35),
		12px 12px 24px rgba(0,0,0,0.2),
		/* Atmospheric */
		25px 35px 70px rgba(0,0,0,0.15);
	border-radius: 4px; /* Approximation of the rough edge */
}

/* Fallback for browsers with poor mask support */
@supports not (mask-image: url('')) {
	.single-post .hentry,
	.page .hentry {
		border: 1px solid rgba(0,0,0,0.1);
		border-radius: 2px;
		box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	}
}

/* Typography: Headlines (Newsprint Style) */
.single-post .entry-title,
.page .entry-title {
	font-family: var(--font-newsprint); /* Oswald */
	font-size: clamp(2.5rem, 5vw, 4rem);
	text-transform: uppercase;
	line-height: 0.9;
	color: #1a1a1a;
	text-align: center;
	margin-bottom: 1.5rem;

	/* Ink Bleed & Stamp Effect */
	text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
	opacity: 0.9;
}

/* Typography: Body Text (Typed Notes) */
.single-post .entry-content,
.page .entry-content {
	font-family: var(--font-typewriter); /* Special Elite */
	font-size: clamp(1rem, 1.5vw + 0.1rem, 1.1rem); /* Readable size */
	line-height: 1.7;
	color: #222; /* Dark Charcoal Ink */
	text-align: left;

	/* Force Single Column */
	column-count: 1 !important;
	column-gap: 0;
	column-rule: none;

	visibility: visible;
	isolation: isolate; /* Performance: Prevent layer squashing */
}

/* Typography: Meta (Dateline Style) */
.entry-meta {
	font-family: var(--font-newsprint);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-align: center;
	margin-bottom: 2.5rem;
	padding: 0.5rem 0;
	border-top: 2px solid #333;
	border-bottom: 1px solid #333;
	color: #444;
}

/* Quote as a "Handwritten Note" Card */
blockquote,
.wp-block-quote {
	font-family: var(--font-handwriting);
	font-size: clamp(1.1em, 2vw + 0.8em, 1.25em);
	line-height: 1.4;
	text-align: center;
	border: 0;
	padding: 1em;
	position: relative;
	background-color: #fbfaf0;
	/* Texture: Construction paper/Manila folder */
	background-image: var(--noise-png);
	background-blend-mode: overlay;
	/* Multi-layer shadow for depth and physicality - Deepened per request */
	box-shadow:
		0 1px 2px rgba(0,0,0,0.3),   /* Tight contact shadow */
		0 5px 10px rgba(0,0,0,0.2),  /* Mid-range shadow */
		0 15px 25px rgba(0,0,0,0.15); /* Diffuse long shadow */
	margin: 1rem auto;
	max-width: 85%;
	transform: rotate(-1deg);

	/* Refined Shape: Notecard with rough edges */
	border-radius: 2px 255px 3px 25px / 255px 5px 225px 3px; /* Organic/Rough radius */
}

blockquote p,
.wp-block-quote p {
	margin-bottom: 0; /* Tighten content - Explicitly requested for quote blocks only */
}

/* Top-Left Tape - Horizontal, centered on corner */
blockquote::before,
.wp-block-quote::before {
	content: '';
	position: absolute;
	top: -15px;
	left: -15px; /* Centered on the corner point */
	width: 70px;
	height: 30px;
	background-color: rgba(255, 255, 240, 0.6); /* Translucent tape */
	background-image: var(--noise-png);
	background-blend-mode: overlay;
	border-left: 1px solid rgba(255,255,255,0.2);
	border-right: 1px solid rgba(255,255,255,0.2);
	transform: rotate(-2deg); /* Human imperfect placement */
	box-shadow: 0 1px 2px rgba(0,0,0,0.15);
	z-index: 2;
}

/* Top-Right Tape - Horizontal, centered on corner */
blockquote::after,
.wp-block-quote::after {
	content: '';
	position: absolute;
	top: -15px;
	right: -15px; /* Centered on the corner point */
	width: 70px;
	height: 30px;
	background-color: rgba(255, 255, 240, 0.6);
	background-image: var(--noise-png);
	background-blend-mode: overlay;
	border-left: 1px solid rgba(255,255,255,0.2);
	border-right: 1px solid rgba(255,255,255,0.2);
	transform: rotate(1deg); /* Human imperfect placement */
	box-shadow: 0 1px 2px rgba(0,0,0,0.15);
	z-index: 2;
}

/* --- 5. NAVIGATION --- */

/* Primary Nav "Physical Switches" */
.main-navigation {
	display: flex;
	align-items: center;
	position: relative;
}

.main-navigation ul {
	list-style: none;
	display: flex;
	flex-flow: wrap; /* Requested: Wrap */
	overflow: visible; /* Requested: Visible overflow */
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	align-items: flex-start;
}

.main-navigation li {
	padding: 0;
	background: none;
	box-shadow: none;
	position: relative; /* For dropdown positioning */
}

.main-navigation a {
	display: flex;
	flex-direction: column-reverse; /* Stack switch above label */
	align-items: center;
	gap: 0.25rem; /* Tighter vertical gap */
	text-decoration: none;
	white-space: nowrap; /* Prevent wrap */
}

.dropdown-indicator {
	font-size: 0.8em;
	opacity: 0.6;
	margin-left: 2px;
}

.nav-label {
	background: linear-gradient(180deg, #f0f0f0, #d9d9d9); /* Lighter tape color */
	color: var(--ink-black);
	font-family: var(--font-typewriter);
	font-size: clamp(0.75rem, 1vw + 0.5rem, 0.8rem);
	font-weight: bold; /* Heavier text */
	text-transform: uppercase;
	padding: 0.4rem 0.8rem;
	border-radius: 2px;
	border: 1px solid rgba(0,0,0,0.3); /* Softer border */
	box-shadow:
		/* Inner shadow for tape thickness */
		inset 0 1px 1px rgba(255,255,255,0.8),
		inset 0 -1px 1px rgba(0,0,0,0.15),
		/* Cast shadow for physicality */
		1px 1px 1px rgba(0,0,0,0.3),
		2px 2px 3px rgba(0,0,0,0.2);
	text-shadow:
		/* Raised/stamped text effect */
		1px 1px 0px rgba(255,255,255,0.9),
		-1px -1px 0px rgba(0,0,0,0.1);
	transition: background-color 0.2s ease, color 0.2s ease, text-shadow 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	position: relative; /* For z-indexing if needed */
}

.nav-switch-housing {
	display: block;
	width: 44px;
	height: 24px;
	background: #000;
	border-radius: 12px;
	padding: 4px;
	box-shadow: inset 0 3px 8px rgba(0,0,0,0.9);
	border: 1px solid #000;
	border-bottom-color: #222;
}

.nav-switch {
	display: block;
	width: 16px;
	height: 16px;
	background: linear-gradient(180deg, #444, #111);
	border-radius: 50%;
	border: 1px solid #000;
	box-shadow: 0 3px 3px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.1);
	transition: all 0.2s ease-in-out;
}

.main-navigation a:hover .nav-label {
	background-color: #111;
	color: var(--aquamarine);
	/* Pseudo-inset Glow Effect:
	   1. Black shadow to create depth/inset feel
	   2. Tight aquamarine glow
	   3. Wider soft glow
	*/
	text-shadow:
		0 1px 3px #000, /* Deep inset shadow */
		0 0 5px var(--aquamarine), /* Core glow */
		0 0 10px var(--aquamarine-glow); /* Ambient glow */
	border-color: var(--aquamarine);
	box-shadow:
		inset 0 0 10px rgba(0,0,0,0.9),
		0 0 5px var(--aquamarine-glow2);
}

.main-navigation .current-menu-item > a .nav-switch,
.main-navigation a:hover .nav-switch,
.main-navigation li:hover > a .nav-switch,
.main-navigation li:focus-within > a .nav-switch {
	background: radial-gradient(ellipse at center, var(--aquamarine) 0%, #008f82 100%);
	box-shadow:
		inset 0 1px 1px rgba(255,255,255,0.5),
		0 3px 3px rgba(0,0,0,0.5);
	transform: translateX(20px);
}

/* Optimization: Glow is moved to pseudo-element to animate opacity instead of box-shadow */
.nav-switch::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-shadow: 0 0 12px 2px var(--aquamarine-glow);
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
	pointer-events: none;
}

.main-navigation .current-menu-item > a .nav-switch::after,
.main-navigation a:hover .nav-switch::after,
.main-navigation li:hover > a .nav-switch::after,
.main-navigation li:focus-within > a .nav-switch::after {
	opacity: 1;
}

/* --- Sub-Menus (Animated Bakelite Panel) --- */

/* Default Hidden State */
.main-navigation .sub-menu {
	position: absolute;
	top: 100%;
	left: 0; /* Align to left edge of parent */
	transform: translateY(-10px) scaleY(0.95); /* Slide and slight scale for effect */
	transform-origin: top center;
	min-width: 220px;
	padding: 1rem;
	background-color: #111; /* Dark Bakelite */
	background-image:
		/* Subtle texture */
		var(--noise-png);
	background-blend-mode: overlay;
	border: 2px solid #000;
	border-top: 1px solid #333;
	border-radius: 0 0 4px 4px;
	box-shadow:
		0 15px 30px rgba(0,0,0,0.9),
		inset 0 1px 0 rgba(255,255,255,0.05);
	opacity: 0;
	visibility: hidden;
	z-index: 200;
	transition:
		opacity 0.2s ease-out,
		transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
		visibility 0.2s;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	pointer-events: none; /* Prevent accidental clicks when hidden */
}

/* The "Wire/Connector" visual - Removed for cleaner left-aligned look, or adjusted?
   Let's keep it but align left if we want, or remove. User asked for "smooth animated dropdown".
   Removing the "wire" to avoid alignment headaches with the new redundant link.
*/
.main-navigation .sub-menu::before {
	display: none;
}

/* Reveal on Hover */
.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scaleY(1);
	pointer-events: auto;
}

/* Sub-menu Items */
.main-navigation .sub-menu li {
	width: 100%;
	margin: 0;
}

.main-navigation .sub-menu a {
	flex-direction: row; /* Text left, switch right */
	justify-content: flex-start; /* Align left */
	width: 100%;
	gap: 1rem;
	padding: 0.5rem;
	border-radius: 2px;
	transition: background 0.2s;
}

.main-navigation .sub-menu a:hover {
	background: rgba(255,255,255,0.05);
}

/* Redundant Parent Link Styling */
.main-navigation .sub-menu .parent-link-redundant a {
	font-family: var(--font-ui);
	font-size: 0.7rem;
	color: var(--brass-light);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border-bottom: 1px solid #333;
	padding-bottom: 0.75rem;
	margin-bottom: 0.25rem;
}

.main-navigation .sub-menu .parent-link-redundant a:hover {
	background: none;
	color: var(--aquamarine);
	text-shadow: 0 0 5px var(--aquamarine-glow);
}

.main-navigation .sub-menu .nav-label {
	background: none;
	border: none;
	box-shadow: none;
	color: #aaa;
	text-shadow: 1px 1px 0 #000;
	padding: 0;
	font-size: 0.8rem;
	text-transform: none; /* Less aggressive */
	font-weight: normal;
}

.main-navigation .sub-menu .nav-switch-housing {
	width: 30px;
	height: 16px;
	padding: 2px;
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.9);
	border: 1px solid #333;
}

.main-navigation .sub-menu .nav-switch {
	width: 10px;
	height: 10px;
}

.main-navigation .sub-menu a:hover .nav-label {
	color: var(--aquamarine);
	text-shadow: 0 0 5px rgba(0, 196, 180, 0.5);
}

.main-navigation .sub-menu .current-menu-item > a .nav-switch,
.main-navigation .sub-menu a:hover .nav-switch {
	transform: translateX(12px); /* Smaller travel distance */
}

/* Secondary Nav "Rolodex" */
.indicator-panel {
	display: flex;
	gap: 8px;
	padding: 8px;
	cursor: pointer;
}

/* Rolodex Default State (Closed) */
.rolodex-navigation {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    pointer-events: none; /* Prevent clicks when hidden */
}

/* Rolodex Open State (Toggled by Controller) */
.rolodex-navigation.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.rolodex-navigation {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	padding: 0.5rem; /* Tighter padding for compactness */
	background: linear-gradient(180deg, #111, #000);
	border: 2px solid #000;
	border-top-width: 1px;
	border-bottom-color: #333;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 10px 20px rgba(0,0,0,0.5);
	width: max-content;
	min-width: 200px;
}

.rolodex-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0; /* Removed gap for stacked effect */
	position: relative;
}

.rolodex-menu::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 15px; /* Aligns with the punch-holes */
	width: 2px;
	background-image: repeating-linear-gradient(
		to bottom,
		#555,
		#555 2px,
		transparent 2px,
		transparent 6px
	);
	z-index: 1;
}

.rolodex-menu li a {
	display: block;
	position: relative;
	padding: 0.5rem 1rem; /* Compact padding */
	margin-bottom: -1px; /* Overlap borders for physical stack effect */
	color: var(--ink-soft-black);
	font-family: var(--font-typewriter);
	font-size: 0.8rem; /* Smaller text */
	text-decoration: none;
	background-color: #e8e2d6; /* Aged cardstock base */
	background-image:
		/* Subtle top highlight */
		linear-gradient(180deg, rgba(255,255,255,0.7) 0%, transparent 20%),
		/* Fibrous paper texture */
		var(--noise-png);
	background-blend-mode: normal, overlay;
	border: 1px solid #dcd0b8;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	clip-path: polygon(0% 20%, 15% 0%, 85% 0%, 100% 20%, 100% 80%, 85% 100%, 15% 100%, 0% 80%);
	transition: all 0.2s ease-in-out;
}

.rolodex-menu li a:hover {
	background-color: #fff;
	transform: translateY(-2px);
	box-shadow: 2px 4px 8px rgba(0,0,0,0.3);
	z-index: 10; /* Pop to front */
}

.rolodex-menu li a::before,
.rolodex-menu li a::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	background: radial-gradient(circle at 30% 30%, #fff, #dcd0b8); /* Beveled highlight */
	border: 1px solid rgba(0,0,0,0.2);
	border-radius: 50%;
	box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4); /* Inner shadow for depth */
}
.rolodex-menu li a::before { left: 12px; }
.rolodex-menu li a::after { right: 12px; }

/* Mobile Menu Toggle */
.menu-toggle {
	display: none;
	font-family: var(--font-ui);
	background: var(--brass);
	color: var(--ink-black);
	border: none;
	padding: 0.5rem 1rem;
	cursor: pointer;
}

/* --- Mobile Service Panel & Backdrop (Off-Canvas) --- */

/* Default States (Closed) */
.mobile-service-panel {
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: transform;
}

.panel-backdrop {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
    pointer-events: none;
}

/* Open States (Toggled via JS on body) */
body.drawer-open .mobile-service-panel {
    transform: translateX(0);
}

body.drawer-open .panel-backdrop {
    opacity: 0.5;
    visibility: visible;
    pointer-events: auto;
}

/* --- 6. COMPONENTS --- */

/* Machined Brass Buttons */
button,
input[type="submit"],
.wp-block-button__link,
.comment-reply-link,
.search-submit {
	display: inline-block;
	position: relative;
	padding: 0.8em 1.5em;
	font-family: var(--font-ui);
	font-size: clamp(0.9rem, 1.5vw + 0.6rem, 1rem);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	color: var(--ink-black);
	background-color: var(--brass);
	background-image:
		radial-gradient(ellipse at 50% 10%, var(--brass-light) 0%, transparent 80%),
		linear-gradient(180deg, var(--brass-light), var(--brass-dark)),
		var(--noise-png);
	background-blend-mode: normal, normal, overlay;
	border-radius: 6px;
	border: 2px solid #000;
	border-top-color: #1a1a1a;
	box-shadow:
		inset 0 1px 1px rgba(255,255,255,0.3),
		0 2px 0 var(--brass-dark),
		0 3px 5px rgba(0,0,0,0.5);
	text-shadow: 1px 1px 0px rgba(255,255,255,0.2);
	transition: all 0.15s ease-out;
}

.dossier-button {
	position: relative; /* already here */
}

button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.comment-reply-link:hover,
.search-submit:hover,
.dossier-button:hover {
	background: linear-gradient(180deg, #fff, var(--brass-light));
	color: #000;
	transform: translateY(-2px);
	box-shadow:
		inset 0 1px 1px rgba(255,255,255,0.3),
		0 1px 0 rgba(255,255,255,0.1),
		0 5px 10px 2px rgba(0,0,0,0.6);
}

button:active,
input[type="submit"]:active,
.wp-block-button__link:active,
.comment-reply-link:active,
.search-submit:active,
.dossier-button:active {
	background-image:
		radial-gradient(ellipse at 50% 80%, var(--brass-light) 0%, transparent 80%), /* Light shifts down */
		linear-gradient(180deg, var(--brass-dark), var(--brass)),
		var(--noise-png);
	background-blend-mode: normal, normal, overlay;
	box-shadow:
		/* New: More realistic multi-layered press effect */
		inset 1px 1px 1px rgba(255,255,255,0.1), /* Top-left inner highlight */
		inset -2px -2px 5px rgba(0,0,0,0.7); /* Bottom-right inner shadow */
	text-shadow: -1px -1px 0px rgba(0,0,0,0.4);
}

/* Dossier Interface Forms */
.dossier-form-container {
	background-color: var(--manila-folder);
	background-image:
		linear-gradient(45deg, rgba(0,0,0,0.02) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.02) 75%),
		linear-gradient(45deg, rgba(0,0,0,0.02) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.02) 75%);
	background-size: 4px 4px;
	background-position: 0 0, 2px 2px;
	border: 1px solid var(--manila-darker);
	padding: 2rem;
	margin: 2rem 0;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
	border-radius: 2px;
}

.search-form {
	display: flex;
	gap: 0.5rem;
	position: relative;
	margin-top: 2rem;
	padding: 1.5rem;
	border: 1px solid var(--manila-darker);
	background-color: rgba(0,0,0,0.02);
}

.search-form::before {
	content: 'Case File Search';
	position: absolute;
	top: -1rem;
	left: 1rem;
	font-family: var(--font-ui);
	font-size: clamp(0.7rem, 1vw + 0.5rem, 0.8rem);
	text-transform: uppercase;
	color: var(--ink-soft-black);
	background: var(--manila-folder);
	padding: 0.2rem 0.5rem;
	text-shadow: 1px 1px 0 rgba(255,255,255,0.7);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="color"],
textarea,
.search-field {
	flex-grow: 1;
	width: 100%;
	padding: 0.75rem 1rem;
	font-family: var(--font-typewriter);
	color: var(--ink-black);
	font-size: clamp(0.9rem, 1.5vw + 0.6rem, 1rem);
	-webkit-appearance: none;
	appearance: none;
	background-color: #e9e2d4;
	background-image:
		/* Fibrous paper texture */
		var(--noise-png);
	background-blend-mode: overlay;
	border: 1px solid rgba(0,0,0,0.2);
	border-radius: 3px;
	box-shadow: inset 1px 1px 4px rgba(0,0,0,0.4);
	transition: all 0.2s ease-in-out;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="color"]:focus,
textarea:focus,
.search-field:focus {
	background-color: #f2efe8; /* A lighter shade of the paper */
	box-shadow:
		inset 2px 2px 6px rgba(0,0,0,0.5),
		0 0 0 2px var(--brass-dark); /* Focus ring */
	outline: none;
}

/* Global Focus Visible */
:focus-visible {
	outline: 2px solid var(--brass-dark);
	outline-offset: 2px;
	box-shadow: 0 0 8px var(--aquamarine-glow);
}

/* Tables */
table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 2rem;
	font-family: var(--font-typewriter);
	font-size: 0.9rem;
}

th, td {
	padding: 0.75rem;
	border: 1px solid rgba(0,0,0,0.1);
	text-align: left;
}

th {
	background: rgba(0,0,0,0.05);
	font-weight: bold;
	text-transform: uppercase;
}

caption {
	caption-side: bottom;
	font-size: 0.8rem;
	margin-top: 0.5rem;
	color: rgba(0,0,0,0.6);
}

/* Code & Pre: Tickertape Aesthetic */
pre {
	background: #f0f0f0;
	padding: 1rem 2rem;
	overflow: hidden; /* No scrollbars */
	border: none;
	/* Perforation lines top and bottom */
	border-top: 2px dashed #bbb;
	border-bottom: 2px dashed #bbb;
	margin: 2rem auto; /* Centered strip */
	font-family: var(--font-typewriter); /* Monospace typewriter */
	font-size: 0.85rem;
	color: #333;
	white-space: pre-wrap; /* Wrap text */
	word-break: break-word;
	width: fit-content; /* Hug content like a strip */
	max-width: 100%;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

code {
	background: rgba(0,0,0,0.05);
	padding: 0.1rem 0.3rem;
	font-family: monospace;
}

pre code {
	background: none;
	padding: 0;
}

/* Definition Lists */
dl {
	margin-bottom: 1.5rem;
}

dt {
	font-weight: bold;
	margin-top: 1rem;
}

dd {
	margin-left: 0;
	margin-bottom: 0.5rem;
}

.search-submit,
.dossier-button {
	flex-shrink: 0;
}

/* Embeds & Iframes */
.wp-block-embed {
	margin-bottom: 1.5rem;
	display: block;
}

.entry-content iframe,
.entry-content object,
.entry-content embed {
	display: block;
	max-width: 100%;
}

/* Polaroid Images */
.gallery,
.wp-block-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	justify-content: center;
	align-items: center;
	margin: 2rem 0;
}

/* Standard WordPress Alignment Fixes (High Specificity) */
.site-main .entry-content .alignleft {
	float: left;
	margin-right: 2rem;
	margin-bottom: 1.5rem;
	max-width: 50%;
}

.site-main .entry-content .alignright {
	float: right;
	margin-left: 2rem;
	margin-bottom: 1.5rem;
	max-width: 50%;
}

.site-main .entry-content .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	clear: both;
	margin-bottom: 2rem;
}

/* Clear floats for new sections */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	clear: both;
}

/* Polaroid Base Styles (Shared by Blocks & Classic) */
:where(.wp-block-image, .wp-caption, .polaroid-wrapper):not(.wp-block-cover__image-background, .wp-block-media-text__media *) {
	background-color: var(--polaroid-frame);
	background-image:
		/* --- Optimized 3-Layer Polaroid Stack --- */
		/* Layer 1: Glossy Sheen (Preserves the most prominent lighting effect) */
		linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 40%),
		/* Layer 2: Atmospheric Gradient (Simulates overall lighting and mild discoloration) */
		linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, transparent 20%, transparent 80%, rgba(0,0,0,0.05) 100%),
		/* Layer 3: Performant Noise Texture */
		var(--noise-png);
	background-blend-mode: normal, normal, overlay;
	padding: 1rem 1rem 3.5rem 1rem;
	border: 1px solid #ccc;
	border-radius: 2px; /* Softened corners */
	box-shadow: 5px 5px 15px rgba(0,0,0,0.35);
	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	position: relative;
	/* Center by default */
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Handle Raw Images (Classic) - reset padding if no caption space is needed?
   Actually, Polaroid style implies white space at bottom.
   If it's just an img tag, we need a wrapper to do this properly,
   but CSS can fake it with padding on the img itself if we are careful.
   However, targeting just 'img' is risky.
   Let's stick to wrappers or classes we know.
   Standard WP classic editor inserts img with 'wp-image-ID' class.
   So targeting .entry-content img[class*="wp-image-"] works.
*/

.wp-block-image:nth-child(4n+1),
.wp-caption:nth-child(4n+1),
.polaroid-wrapper:nth-child(4n+1) { transform: rotate(-3deg); }

.wp-block-image:nth-child(4n+2),
.wp-caption:nth-child(4n+2),
.polaroid-wrapper:nth-child(4n+2) { transform: rotate(2.5deg); }

.wp-block-image:nth-child(4n+3),
.wp-caption:nth-child(4n+3),
.polaroid-wrapper:nth-child(4n+3) { transform: rotate(-1.5deg); }

.wp-block-image:nth-child(4n+4),
.wp-caption:nth-child(4n+4),
.polaroid-wrapper:nth-child(4n+4) { transform: rotate(4deg); }

.wp-block-image:hover,
.wp-caption:hover,
.polaroid-wrapper:hover {
	transform: rotate(0.5deg) scale(1.02); /* More subtle shift */
	box-shadow: 8px 8px 20px rgba(0,0,0,0.4);
	z-index: 10;
}

.wp-block-image img,
.wp-caption img,
.polaroid-wrapper img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #1a1a1a; /* Modest black border */
	box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Deep but subtle shadow */
	padding: 0;
	background: none;
}

/* Ensure the link inside wrapper behaves */
.polaroid-wrapper a {
	display: block;
	box-shadow: none !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	transform: none !important;
}
.polaroid-wrapper a::before { content: none !important; }

.wp-block-image figcaption,
.wp-caption-text {
	font-family: var(--font-handwriting);
	font-size: clamp(1rem, 2vw + 0.5rem, 1.1rem);
	text-align: center;
	color: #3a506b;
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	right: 1rem;
	line-height: 1;
}

/* Align Wide & Full Support (Desktop Only) */
@media (min-width: 768px) {
	.alignwide {
		margin-left: -100px;
		margin-right: -100px;
		max-width: calc(100% + 200px);
		width: calc(100% + 200px);
	}

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

/* --- 7. TEMPLATES --- */

/* Archive "File Folders" - Stacked Folder Aesthetic */
.archive .site-main,
.blog .site-main,
.search .site-main {
	padding: 4rem 2rem 2rem; /* Extra top padding for first tab */
	max-width: 1200px; /* Requested: Full width */
	margin: 0 auto;
}

/* The Folder Container */
.folder-entry,
.search article {
	background-color: var(--manila-folder);
	background-image:
		/* Subtle crease highlight */
		linear-gradient(90deg, transparent 48%, rgba(255,255,255,0.3) 50%, transparent 52%),
		/* Fibrous paper texture */
		var(--noise-png);
	background-blend-mode: normal, overlay;
	border: 1px solid var(--manila-darker);
	border-radius: 2px 2px 4px 4px;
	padding: 0; /* Padding moved to .folder-body */
	margin-bottom: -2rem; /* Stack them vertically */
	position: relative;
	box-shadow:
		0 -2px 5px rgba(0,0,0,0.1), /* Top shadow for stacking */
		0 5px 15px rgba(0,0,0,0.3);
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover Effect: Efficient Pull */
/* Using translate3d for GPU acceleration */
/* We will use a simpler transform strategy to avoid complex recalculations */
.folder-entry:hover,
.search article:hover {
	/* We override the specific transform below, so this block handles shared props */
	box-shadow:
		0 20px 30px rgba(0,0,0,0.3),
		0 -2px 5px rgba(0,0,0,0.1);
	z-index: 10;
}

/* Alternating Offsets for Messy Stack */
/* We incorporate the rotation into the base state */
.folder-entry:nth-child(3n+1) { margin-left: 0; transform: rotate3d(0, 0, 1, -0.5deg); }
.folder-entry:nth-child(3n+2) { margin-left: 1.5rem; transform: rotate3d(0, 0, 1, 0.5deg); }
.folder-entry:nth-child(3n+3) { margin-left: -1.5rem; transform: rotate3d(0, 0, 1, -0.2deg); }

/* On hover, we apply the translation while PRESERVING the rotation.
   This prevents the "jump" effect.
*/
.folder-entry:nth-child(3n+1):hover { transform: translate3d(0, -15px, 0) rotate3d(0, 0, 1, -0.5deg); }
.folder-entry:nth-child(3n+2):hover { transform: translate3d(0, -15px, 0) rotate3d(0, 0, 1, 0.5deg); }
.folder-entry:nth-child(3n+3):hover { transform: translate3d(0, -15px, 0) rotate3d(0, 0, 1, -0.2deg); }

/* The Tab (Manila Folder Tab) */
.folder-tab {
	position: absolute;
	top: -30px;
	left: 0;
	width: 220px;
	height: 35px;
	background-color: var(--manila-folder);
	background-image: inherit; /* Match body texture */
	border: 1px solid var(--manila-darker);
	border-bottom: 1px solid var(--manila-folder); /* Blend with body */
	border-radius: 8px 8px 0 0;
	padding: 0.5rem 1rem;
	box-shadow: inset 0 1px 1px rgba(255,255,255,0.4);
	z-index: 1;
}

/* Staggered Tabs */
.folder-entry:nth-child(3n+2) .folder-tab { left: 33%; }
.folder-entry:nth-child(3n+3) .folder-tab { left: auto; right: 0; }

.folder-tab .entry-title {
	margin: 0;
	font-family: var(--font-typewriter);
	font-size: clamp(0.8rem, 1.5vw + 0.4rem, 0.95rem);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}

.folder-tab a {
	text-decoration: none;
	color: var(--ink-soft-black);
}

/* Folder Body Content */
.folder-body {
	padding: 2rem 2.5rem;
}

.folder-entry .entry-content {
	font-family: var(--font-typewriter);
	font-size: 0.95rem;
	color: var(--ink-black);
	margin-bottom: 1.5rem;
	/* Limit to ~3 lines */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.folder-entry .entry-footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	border-top: 1px dashed rgba(0,0,0,0.1);
	padding-top: 1rem;
}

/* "Open File" Button styling updates */
.open-file-button {
	font-size: 0.8rem;
	padding: 0.6em 1.2em;
	background: #333; /* Darker contrast against manila */
	color: #fff;
	background-image: linear-gradient(180deg, #444, #222);
	border: 1px solid #000;
	transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
}

.open-file-button:hover {
	background: var(--aquamarine);
	color: #000;
	box-shadow: 0 0 10px var(--aquamarine-glow);
	transform: translateY(-1px) scale(1.05);
	will-change: transform;
}

.open-file-button:active {
	transform: translateY(1px) scale(0.98);
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}

/* Archive Header "Brass Nameplate" */
.archive-header.dossier-header {
    text-align: center;
    padding: 1.5rem 3rem;
    margin-bottom: 4rem;
	/* Brass Plate Background */
	background-color: var(--brass-dark);
	background-image:
		linear-gradient(135deg, var(--brass-light), var(--brass-dark) 80%),
		var(--noise-png);
	background-blend-mode: normal, overlay;
	border-radius: 4px;
	border: 1px solid #000;

	/* Physical Plate Shadows */
	box-shadow:
		/* Inset plate bevel */
		inset 0 2px 5px rgba(0,0,0,0.6),
		/* Highlight edge */
		1px 1px 1px rgba(255,255,255,0.1),
		/* Cast shadow */
		0 10px 20px rgba(0,0,0,0.5);

	position: relative;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

/* Screws for the Nameplate */
.archive-header.dossier-header::before,
.archive-header.dossier-header::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 12px;
	height: 12px;
	background: radial-gradient(circle at 30% 30%, #888, #111); /* Steel screw head */
	border-radius: 50%;
	transform: translateY(-50%);
	box-shadow:
		inset 1px 1px 2px rgba(255,255,255,0.4),
		0 1px 2px rgba(0,0,0,0.5);
	border: 1px solid #000;
}

/* Screw Slots */
.archive-header.dossier-header::before {
	left: 15px;
	background-image: linear-gradient(45deg, transparent 45%, #000 45%, #000 55%, transparent 55%); /* Slot */
}
.archive-header.dossier-header::after {
	right: 15px;
	background-image: linear-gradient(-45deg, transparent 45%, #000 45%, #000 55%, transparent 55%); /* Slot */
}

.archive-header.dossier-header .page-title {
    font-family: var(--font-ui);
    color: var(--ink-black);
    font-size: clamp(1.5rem, 3vw + 1rem, 2.5rem);
    text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0;

	/* Engraved/Stamped Effect */
    text-shadow:
		-1px -1px 1px rgba(0,0,0,0.7), /* Inner shadow top/left */
		1px 1px 1px rgba(255,255,255,0.2); /* Highlight bottom/right */
}

/* 404 Page "Missing Dossier" */
.dossier-case-file-missing {
	background-color: var(--manila-folder);
	background-image:
		linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 10%),
		var(--noise-png);
	background-blend-mode: normal, overlay;
	border: 1px solid var(--manila-darker);
	padding: 3rem;
	text-align: center;
	box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
	border-radius: 2px;
}

.dossier-case-file-missing .dossier-header {
	border-bottom: none;
	margin-bottom: 1.5rem;
	position: relative;
}

.dossier-case-file-missing .dossier-header::after {
	content: 'MISSING';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-15deg);
	font-family: var(--font-ui);
	font-size: clamp(4rem, 15vw + 1rem, 10rem);
	color: rgba(152, 0, 2, 0.3);
	border: 10px solid rgba(152, 0, 2, 0.3);
	padding: 0.25em 0.5em;
	border-radius: 3px;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	z-index: 1;
	pointer-events: none;
}

.dossier-case-file-missing .page-title {
	position: relative;
	z-index: 2;
	font-family: var(--font-ui);
	color: var(--ink-black);
	text-shadow: 1px 1px 0px rgba(255,255,255,0.7);
}

.dossier-instructions {
	font-family: var(--font-typewriter);
	font-size: clamp(1rem, 1.5vw + 0.7rem, 1.1rem);
	max-width: 60ch;
	margin: 0 auto 2rem;
}

/* Search Results */
.search .no-results {
	background-color: #faf3e8;
	border: 1px dashed var(--manila-darker);
	padding: 3rem;
	margin: 2rem;
	text-align: center;
}

.search .no-results .page-title {
	color: var(--blood-red-rich);
	letter-spacing: 0.1em;
	font-size: clamp(1.2rem, 2vw + 0.8rem, 1.5rem);
}

/* Pagination styling as Case File Tabs */
.nav-links {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin-top: 4rem;
}

.nav-links a,
.nav-links span {
	display: inline-block;
	padding: 0.8rem 1.5rem;
	background-color: var(--manila-folder);
	border: 1px solid var(--manila-darker);
	border-bottom: none;
	border-radius: 8px 8px 0 0; /* Tab shape */
	font-family: var(--font-typewriter);
	color: var(--ink-soft-black);
	text-transform: uppercase;
	box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
	transition: transform 0.2s;
	text-decoration: none;
}

.nav-links a:hover {
	transform: translateY(-5px);
	background-color: #fff;
}

.nav-links .current {
	background-color: #fff;
	font-weight: bold;
	box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
	transform: scale(1.1) translateY(-5px);
	z-index: 2;
}

/* --- 8. COMMENTS --- */

.comments-area {
	margin-top: 4rem;
	padding: 3rem 2rem;
	position: relative;
	background: rgba(0,0,0,0.03);
	border-top: 1px solid rgba(0,0,0,0.1);
	box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
}

/* The Paperclip */
.comments-area::before,
.comments-area::after {
	content: '';
	position: absolute;
	left: 50%;
	background: linear-gradient(180deg, #ccc, #888);
	box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

/* Outer loop */
.comments-area::before {
	top: -20px;
	transform: translateX(-50%);
	width: 25px;
	height: 60px;
	border: 4px solid #888;
	border-radius: 12px;
	border-bottom-color: transparent;
}

/* Inner loop */
.comments-area::after {
	top: -15px;
	transform: translateX(2px) rotate(180deg);
	width: 15px;
	height: 45px;
	border: 4px solid #888;
	border-radius: 8px;
	border-bottom-color: transparent;
	z-index: -1; /* Tucks behind the outer loop */
}

.comments-title,
.comment-reply-title {
	font-family: var(--font-ui);
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0.1em;
	color: var(--ink-soft-black);
	text-shadow: 1px 1px 0 rgba(255,255,255,0.7);
	margin-bottom: 2.5rem;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	padding-bottom: 1rem;
}

.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: comment-counter;
}

.comment-body {
	background: #fdfbf5;
	padding: 1.5rem 1.5rem 1.5rem 3rem;
	margin-bottom: 1.5rem;
	border: 1px solid rgba(0,0,0,0.1);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
	position: relative;
	border-radius: 2px;
}

/* The Stamped "Case #" */
.comment-body::before {
	counter-increment: comment-counter;
	content: 'CASE #' counter(comment-counter);
	position: absolute;
	top: 1.5rem;
	left: -10px;
	transform: rotate(-90deg);
	font-family: var(--font-ui);
	font-size: clamp(0.6rem, 1vw + 0.4rem, 0.7rem);
	color: var(--blood-red-rich);
	letter-spacing: 0.05em;
	opacity: 0.7;
	text-shadow: 1px 1px 1px rgba(152, 0, 2, 0.3); /* Ink bleed effect */
}

.comment-author .fn {
	font-family: var(--font-handwriting);
	font-style: normal;
	font-size: clamp(1.1em, 2vw + 0.8em, 1.3em);
	font-weight: bold;
}

.comment-content {
	font-family: var(--font-typewriter);
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px dashed rgba(0,0,0,0.1);
}

.cat-links,
.tags-links,
.posted-on,
.byline {
	/* Hide the "Posted in", "by", etc. text */
	text-indent: -9999px;
	display: inline-block;
	line-height: 0; /* Collapse the space */
}

.cat-links a,
.tags-links a,
.posted-on a,
.byline a {
	background: var(--manila-folder);
	color: var(--ink-black);
	font-family: var(--font-typewriter);
	font-size: clamp(0.5rem, 1vw + 0.3rem, 0.6rem);
	text-transform: uppercase;
	padding: 0.2rem 0.5rem;
	border-radius: 2px;
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.5);
	text-shadow: 1px 1px 0 rgba(255,255,255,0.7);
	text-decoration: none;
	display: inline-block;
	margin: 0.2rem;
	text-indent: 0; /* Reset for the link */
	line-height: initial; /* Reset for the link */
}

.comment-metadata {
	font-family: var(--font-typewriter);
	font-size: clamp(0.7em, 1.5vw + 0.4em, 0.8em);
	opacity: 0.7;
}

.comment-reply-link {
	font-size: clamp(0.7rem, 1vw + 0.5rem, 0.8rem);
	margin-top: 1rem;
	padding: 0.3em 0.8em;
}

.comment .children {
	list-style: none;
	padding-left: 2rem;
	margin-top: 1.5rem;
	border-left: 2px dashed rgba(0,0,0,0.1);
}

.comment-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* --- 9. WIDGETS --- */

/* The Recessed Footer Panel */
.footer-widget-area {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2.5rem;
	padding: 2.5rem;
	background-color: #050505;
	border-radius: 6px;
	box-shadow:
		/* Top beveled highlight */
		inset 0 1px 1px rgba(255,255,255,0.1),
		/* Bottom shadow */
		inset 0 -1px 1px rgba(0,0,0,0.6),
		/* Main deep shadow */
		inset 0 5px 15px rgba(0,0,0,0.8);
}

.site-footer .widget {
	color: var(--brass-light);
	background: none;
	padding: 0;
	border: 0;
	box-shadow: none;
}

.site-footer .widget-title {
	font-family: "Plateia", var(--font-ui);
	font-size: clamp(1rem, 2vw + 0.5rem, 1.1rem);
	text-transform: uppercase;
	color: var(--brass-dark);
	text-shadow: 1px 1px 0px rgba(255,255,255,0.05);
	padding-bottom: 0.75rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--brass-dark);
}

.site-footer .widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.site-footer .widget li {
	padding: 0.25rem 0;
}

.site-footer .widget a {
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}

.site-footer .widget a:hover {
	color: var(--aquamarine);
	text-shadow: 0 0 5px var(--aquamarine-glow);
}


/* --- 9.1 Default Widget Overrides --- */

/* List-based Widgets (Archives, Categories, Meta, Pages, Recent Posts, etc.) */
.site-footer .widget ul {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.site-footer .widget li a {
	display: inline-block;
	padding: 0.1rem 0;
	border-bottom: 1px solid var(--brass-dark);
}

/* Calendar Widget */
.site-footer .widget_calendar table {
	width: 100%;
	text-align: center;
	border-collapse: collapse;
	font-family: var(--font-ui);
}
.site-footer .widget_calendar th,
.site-footer .widget_calendar td {
	padding: 0.4em;
	border: 1px solid var(--brass-dark);
	text-shadow: 1px 1px 0px rgba(255,255,255,0.05);
}
.site-footer .widget_calendar thead {
	color: var(--brass-light);
}
.site-footer .widget_calendar tbody td#today {
	background-color: var(--brass-dark);
	color: var(--ink-black);
	text-shadow: 1px 1px 0px rgba(255,255,255,0.1);
}
.site-footer .widget_calendar tbody a {
	color: var(--aquamarine);
	text-decoration: none;
	font-weight: bold;
}

/* Tag Cloud Widget */
.site-footer .widget_tag_cloud .tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}
.site-footer .widget_tag_cloud .tag-cloud-link {
	/* Override WP's inline font-size */
	font-size: clamp(0.7rem, 1vw + 0.5rem, 0.8rem) !important;
	display: inline-block;
	padding: 0.3rem 0.6rem;
	background-color: var(--brass-dark);
	color: var(--ink-black);
	border-radius: 2px;
	text-shadow: 1px 1px 0px rgba(255,255,255,0.1);
	border: 1px solid #000;
	box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
}

/* Search Widget */
.site-footer .widget_search .search-form {
	display: flex;
	gap: 0.5rem;
	background: none;
	padding: 0;
	margin: 0;
	border: 0;
}
.site-footer .widget_search .search-form::before {
	display: none;
}
.site-footer .widget_search .search-field {
	background-color: #000;
	color: var(--brass-light);
	border-color: var(--brass-dark);
}

/* --- 10. MISC & EFFECTS --- */

/* Aquamarine Bezel & Jewels */

/* --- Mobile First Styles for Frame --- */
.content-area {
	position: relative;
	padding: 10px; /* A simpler, tighter padding for mobile */
	background: var(--brass-dark);
	border-radius: 8px; /* A less dramatic radius */
	box-shadow: 0 10px 25px rgba(0,0,0,0.6);
}

/* Hide complex desktop elements on mobile */
.content-area::before,
.frame-jewel {
	display: none;
}

/* --- Desktop Styles for Frame (Progressive Enhancement) --- */
@media (min-width: 768px) {
	.content-area {
		padding: 30px;
		border-radius: 20px / 40px;
		background-color: var(--brass);
		background-image:
			/* New: Sharper, more realistic specular highlight */
			radial-gradient(ellipse 100% 80% at 15% 20%, rgba(255, 255, 240, 0.4) 0%, rgba(255, 255, 240, 0.2) 40%, transparent 60%),
			/* Adjusted shadowed area for better contrast */
			radial-gradient(ellipse at 90% 80%, rgba(0,0,0,0.15) 0%, transparent 70%),
			/* Base metallic gradient */
			linear-gradient(to bottom, var(--brass-light), var(--brass-dark) 80%),
			/* Noise for texture */
			var(--noise-png);
		background-blend-mode: soft-light, normal, normal, overlay;
		box-shadow:
			/* Milled edge effect */
			inset 0 0 0 12px var(--brass-dark),
			inset 0 1px 0 13px var(--brass-light),
			inset 0 0 0 13px #000,
			inset 0 -2px 2px 13px rgba(0,0,0,0.4),

			/* NEW: Deep, layered inner shadow */
			inset 0 0 10px 14px rgba(0,0,0,0.65), /* Sharp, dark edge */
			inset 0 0 25px 18px rgba(0,0,0,0.5),  /* Mid-level fade */
			inset 0 0 45px 20px rgba(0,0,0,0.35), /* Soft, deep fade */

			/* Inner shadow for thickness */
			inset 0 5px 15px rgba(0,0,0,0.5),
			/* Cast shadow - soft & diffuse */
			0 30px 60px -20px rgba(0,0,0,0.7),
			/* Contact shadow - sharp & dark */
			0 5px 15px rgba(0,0,0,0.5);
	}

	.content-area::before,
	.content-area::after {
		display: block; /* Show pinstripe on desktop */
		content: '';
		position: absolute;
		top: 13px;
		left: 13px;
		right: 13px;
		bottom: 13px;
		border-radius: 10px / 20px;
		pointer-events: none;
	}

	.content-area::before {
		top: 13px;
		left: 13px;
		right: 13px;
		bottom: 13px;
		border-radius: inherit; /* Match the parent's border radius */
		box-shadow:
			inset 0 0 1px 1px rgba(0,0,0,0.5),
			inset 0 0 2px 2px rgba(220, 255, 250, 0.7),
			inset 0 0 3px 3px var(--aquamarine-glow1), /* Soft, wide inner glow */
			inset 0 0 5px 5px var(--aquamarine-glow2); /* Softer, wider falloff */
	}

	.content-area::after {
		top: 5%;
		left: 5%;
		width: 90%;
		height: 90%;
		background: var(--aquamarine);
		filter: blur(60px);
		transform: scale(1.1, 0.9); /* Widen the glow */
		z-index: -1; /* Position it behind the frame */
		opacity: 0.4; /* Make it more subtle */
	}

	.frame-jewel {
		display: block; /* Show jewels on desktop */
		--jewel-size: 14px;
		--jewel-offset: 5px;
		position: absolute;
		width: var(--jewel-size);
		height: var(--jewel-size);
		border-radius: 50%;
		background: radial-gradient(ellipse at center, var(--aquamarine) 0%, #008f82 100%);
		box-shadow:
			inset 0 0 3px rgba(0,0,0,0.5),
			inset 0 1px 1px rgba(255,255,255,0.5),
			/* Focused inner glow */
			inset 0 0 2px 1px rgba(var(--aquamarine-glow), 0.8),
			/* Hard inner reflection */
			inset 1px 1px 2px rgba(255,255,255,0.5),
			/* Inner shadow for depth */
			inset -1px -1px 2px rgba(0,0,0,0.5);
		z-index: 2;
		will-change: transform;
		animation: jewel-pulse-scale 2.5s ease-in-out;
	}

	/* Separated Glow Layer for Performance */
	.frame-jewel::after {
		content: '';
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		border-radius: 50%;
		background: radial-gradient(circle, var(--aquamarine-glow) 0%, transparent 70%);
		opacity: 0.7;
		z-index: -1;
		will-change: opacity;
		animation: jewel-pulse-glow 2.5s ease-in-out;
	}

	.frame-jewel:nth-child(1) { top: var(--jewel-offset); left: var(--jewel-offset); }
	.frame-jewel:nth-child(2) { top: var(--jewel-offset); right: var(--jewel-offset); }
	.frame-jewel:nth-child(3) { bottom: var(--jewel-offset); left: var(--jewel-offset); }
	.frame-jewel:nth-child(4) { bottom: var(--jewel-offset); right: var(--jewel-offset); }
}

.site-main {
	position: relative; /* Ensure it establishes a stacking context */
	z-index: 1; /* Place scrapbook page above the bezel's base */
}

@keyframes jewel-pulse-scale {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

@keyframes jewel-pulse-glow {
	0%, 100% { opacity: 0.7; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.2); }
}

/* Header Indicator Lights */
.indicator-light {
	width: 8px;
	height: 8px;
	background-color: var(--aquamarine);
	border-radius: 50%;
	border: 1px solid #000;
	box-shadow: 0 0 8px var(--aquamarine-glow);
	animation: pulse 2s ease-in-out;
}

.indicator-light:nth-child(2) {
	animation-delay: -1s;
}

@keyframes pulse {
	0%, 100% { opacity: 0.7; }
	50% { opacity: 1; transform: scale(1.1); }
}

/* Typewriter Effect - Removed & Background Cleanup */
/* Ensure no unwanted "white tape" layers or extra backgrounds on single posts */
.single-post .entry-content::after,
.single-post .entry-content::before {
    content: none !important;
    display: none !important;
}

.single-post .hentry,
.single-post .entry-content {
    background-color: transparent !important;
    /* We do NOT set background-image: none !important here because it might conflict
       if the user decides to add a texture later, but for now we rely on the pseudo-element.
       The main issue is likely a solid color. */
}

/* --- 11. ACCESSIBILITY --- */

.skip-link:focus {
	position: absolute;
	top: 0; /* Aligns with the top of the page */
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(180deg, var(--brass-light), var(--brass-dark));
	color: var(--ink-black);
	padding: 0.5rem 2rem 0.8rem;
	z-index: 99999;
	text-decoration: none;
	font-family: var(--font-ui);
	clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); /* Bookmark shape */
	box-shadow: 0 5px 15px rgba(0,0,0,0.5);
	text-shadow: 1px 1px 0px rgba(255,255,255,0.2);
}

:focus-visible {
	position: relative;
	z-index: 9999;
	outline: 4px solid var(--brass-dark);
	outline-offset: 4px;
	box-shadow: 0 0 0 5px var(--brass-light), 0 0 10px 5px var(--aquamarine-glow);
}

:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* --- 12. RESPONSIVE DESIGN --- */

/* High Contrast Mode Overrides (Accessibility) */
@media (prefers-contrast: more) {
	body, .site-main, .site-main-inner, .site-header, .site-footer, .site-info, .widget, .nav-label, .folder-entry, .folder-tab {
		background-image: none !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}

	body {
		background-color: #000;
		color: #fff;
	}

	.site-main, .site-main-inner {
		background-color: #fff;
		color: #000;
		border: 2px solid #000;
	}

	.site-header, .site-footer {
		background-color: #222;
		border: 2px solid #fff;
	}

	a {
		text-decoration: underline;
	}

	.nav-label {
		background: #fff;
		color: #000;
		border: 2px solid #000;
	}

	.folder-entry {
		border: 2px solid #000;
	}
}

/* Mobile First Base Styles */
body {
	padding: 12px;
}

.site-header {
	flex-direction: column;
	gap: 1rem;
	align-items: center;
	margin: 0 0.5rem 1rem;
}

.site-branding {
	margin: 0 auto;
}

.main-navigation {
	display: none; /* Hidden on mobile, replaced by Service Panel */
}

.menu-toggle {
	display: block;
}


.panel-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #000;
	opacity: 0.5;
	z-index: 9998;
}

.mobile-service-panel {
	position: fixed;
	top: 0;
	right: 0;
	width: 85vw;
	max-width: 350px;
	height: 100vh;
	height: 100dvh; /* Dynamic viewport height for mobile browsers */
	background-color: #1a1a1a;
	background-image:
		var(--noise-png);
	background-blend-mode: overlay;
	border-left: 2px solid #000;
	box-shadow: -10px 0 30px rgba(0,0,0,0.8);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	will-change: transform;
}

.panel-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.5rem;
	background: linear-gradient(180deg, #222, #111);
	border-bottom: 1px solid #000;
	box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.panel-title {
	font-family: var(--font-ui);
	color: var(--brass-light);
	font-size: 1rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-shadow: 0 0 2px rgba(192, 160, 98, 0.5);
}

.panel-close {
	background: none;
	border: 1px solid #333;
	color: #888;
	font-family: var(--font-typewriter);
	font-weight: bold;
	padding: 0.5rem 1rem;
	box-shadow: none;
}

.panel-content {
	padding: 1.5rem;
}

.mobile-menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.mobile-menu-list li {
	margin: 0;
}

.mobile-menu-list > li > a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem;
	background: #0a0a0a;
	border: 1px solid #333;
	border-radius: 2px;
	color: #ccc;
	font-family: var(--font-typewriter);
	text-transform: uppercase;
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
	transition: all 0.2s;
}

.mobile-menu-list > li > a:hover,
.mobile-menu-list > li.current-menu-item > a {
	border-color: var(--aquamarine);
	color: var(--aquamarine);
	box-shadow: 0 0 10px rgba(0, 196, 180, 0.2);
}

.mobile-menu-list .nav-label {
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
	color: inherit;
	font-weight: normal;
	text-shadow: none;
}

/* Hide physical switches on mobile panel to reduce clutter */
.mobile-menu-list .nav-switch-housing {
	display: none;
}

/* Submenus in Service Panel */
.mobile-menu-list .sub-menu {
	display: none; /* Hidden by default, toggled via JS */
	background: rgba(0,0,0,0.3);
	margin: 0.5rem 0 0 1rem;
	padding: 0.5rem;
	border-left: 1px dashed #444;
}

.mobile-menu-list .sub-menu.is-open {
	display: block;
	animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}

.mobile-menu-list .sub-menu a {
	padding: 0.5rem;
	color: #888;
	font-size: 0.9em;
}

/* Rolodex on Mobile - Relative Flow */
.rolodex-navigation {
	position: static; /* Reset absolute */
	transform: none;
	width: 100%;
	max-width: 100%;
	margin-top: 1rem;
	border-radius: 4px;
}
/* Old Mobile Sub-menu block removed - replaced by Service Panel above */

.site-main {
	padding: 1.5rem;
	margin: 1rem auto;
	box-shadow:
		/* --- MOBILE SHADOW STACK --- */
		/* The page's inner shadow, giving it thickness and defining the edge */
		inset 0 1px 2px rgba(255,255,255,0.75), /* Top highlight */
		inset 0 -1px 1px rgba(0,0,0,0.1),       /* Bottom shadow */
		/* Shadow cast by the bezel onto the page */
		inset 1px 1px 3px rgba(0,0,0,0.3),
		/* A simpler drop shadow for mobile performance */
		0 10px 25px rgba(0,0,0,0.4);
}

.page .entry-content {
	column-count: 1 !important;
}

.archive article, .search article {
	margin: 0 0 1.5rem 0;
}

.archive article::before, .search article::before,
.archive article .entry-title a, .search article .entry-title a {
	left: 2rem;
}


/* --- Touch Optimization (Tier 3, 4, 5) --- */
@media (max-width: 991px) {
	button,
	input[type="submit"],
	.menu-toggle,
	.rolodex-menu li a,
	.mobile-menu-list > li > a {
		min-height: 44px; /* Apple HIG touch target size */
	}

	.rolodex-menu li a {
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}
}

/* --- TIER 3: Small Tablet / Large Phone (768px - 991px) --- */
@media (min-width: 768px) {
	.site-header {
		flex-direction: row;
		margin: 0 1.5rem 2rem;
		/* TIER 3: Maintain flex layout, do not force grid yet */
	}

	/* NOTE: Menu toggle REMAINS visible in Tier 3 to prevent broken layouts */
	/* The "Main Navigation" switch block is moved to Tier 2 (992px) */

	.rolodex-navigation {
		/* TIER 3: Keep it relative or absolute? Absolute but constrained. */
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		width: max-content;
		min-width: 200px;
		margin-top: 0;
		border-radius: 0 0 8px 8px;
	}

	.site-main {
		padding: 2rem; /* TIER 3: Moderate padding */
		max-width: 900px; /* Constrain width */
		margin: 2rem auto;
		/* TIER 3: Improved Shadow Stack (Step up from Mobile) */
		box-shadow:
			inset 0 1px 2px rgba(255,255,255,0.75),
			inset 0 -1px 1px rgba(0,0,0,0.1),
			inset 1px 1px 3px rgba(0,0,0,0.3),
			0 5px 15px rgba(0,0,0,0.4);
	}
}

/* --- TIER 2: Netbook / Laptop / Large Tablet (992px - 1199px) --- */
@media (min-width: 992px) {
	/* --- VISUAL TELEPORT (Fixes Desktop Navigation) --- */
	/* 1. Unbox the menu from its mobile containers */
	.mobile-service-panel,
	.panel-content {
		display: contents !important;
	}

	/* 2. Reposition the now-unboxed menu into the header area */
	.main-navigation {
		display: flex !important; /* Overrides mobile 'none' */
		position: absolute;
		top: 2rem;
		right: 2rem;
		z-index: 500;
		opacity: 1 !important;
		transform: none !important;
		pointer-events: auto;
		visibility: visible !important;
	}
	/* --- End Visual Teleport --- */

	.site-header {
		/* Restore Grid Layout for Desktop */
		display: grid;
		grid-template-columns: auto 1fr auto;
		flex-direction: row; /* Fallback */
	}

	.menu-toggle {
		display: none; /* Hide Hamburger */
	}

	/* TARGET ONLY TOP LEVEL UL */
	.main-navigation > ul,
	.main-navigation > div > ul {
		display: flex !important;
		position: static;
		width: auto;
		background: transparent;
		padding: 0;
		flex-direction: row;
		overflow: visible;
	}

	/* Desktop Sub-menus */
	.main-navigation .sub-menu {
		position: absolute;
		display: flex;
		background-color: #0a0a0a;
		opacity: 0;
		visibility: hidden;
		border: 2px solid #000;
		border-top: 1px solid #222;
		box-shadow: 0 10px 25px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.1);
		padding: 1rem;
	}

	.main-navigation .sub-menu::before {
		display: block;
	}

	/* Rolodex Animation for Desktop */
	.rolodex-navigation {
		max-height: none;
		overflow-y: visible;
		transform-origin: top center;
		animation: unfoldMenu 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	}

	@keyframes unfoldMenu {
		0% { opacity: 0; transform: translateX(-50%) scaleY(0.7); }
		100% { opacity: 1; transform: translateX(-50%) scaleY(1); }
	}

	/* Restore Scrollbar Styles */
	.rolodex-navigation::-webkit-scrollbar { width: 8px; }
	.rolodex-navigation::-webkit-scrollbar-track { background: #000; }
	.rolodex-navigation::-webkit-scrollbar-thumb {
		background-color: var(--brass-dark);
		border-radius: 4px;
		border: 1px solid #000;
	}

	/* TIER 2 Layout */
	.site-main {
		padding: 3rem; /* TIER 2: 3rem Padding */
		max-width: 1100px;
		/* TIER 2: Deeper Shadows */
		box-shadow:
			inset 0 1px 2px rgba(255,255,255,0.75),
			inset 0 -1px 1px rgba(0,0,0,0.1),
			inset 1px 1px 3px rgba(0,0,0,0.3),
			0 2px 3px rgba(0,0,0,0.3),
			0 10px 25px rgba(0,0,0,0.4),
			0 20px 40px -10px rgba(0,0,0,0.5);
	}

	/* Restore Frame Jewels & Pinstripes for Tier 2+ */
	.content-area::before,
	.content-area::after,
	.frame-jewel {
		display: block;
	}
}

/* --- TIER 1: Full Desktop (1200px+) --- */
@media (min-width: 1200px) {
	.site-main {
		padding: 4rem; /* TIER 1: Max Padding */
		max-width: 1200px;
		/* TIER 1: Maximum Depth Shadows */
		box-shadow:
			inset 0 1px 2px rgba(255,255,255,0.75),
			inset 0 -1px 1px rgba(0,0,0,0.1),
			inset 1px 1px 3px rgba(0,0,0,0.3),
			0 2px 3px rgba(0,0,0,0.3),
			0 10px 25px rgba(0,0,0,0.4),
			0 30px 60px -30px rgba(0,0,0,0.6);
	}

	/* Archive Stacking Logic (Optimized for Wide Screens) */
	.archive article:nth-child(3n+1) { margin-left: 1rem; margin-right: -1rem; }
	.archive article:nth-child(3n+2) { margin-left: -1rem; margin-right: 1rem; }

	.archive article:nth-child(3n+2)::before { left: calc(2rem + 210px); }
	.archive article:nth-child(3n+3)::before { left: calc(2rem + 420px); }
	.archive article:nth-child(3n+2) .entry-title a { left: calc(2.5rem + 210px); }
	.archive article:nth-child(3n+3) .entry-title a { left: calc(2.5rem + 420px); }
}

/* --- TIER 4 & 5: Mobile Shared Styles (< 768px) --- */
@media (max-width: 767px) {
	.single-post .hentry,
	.page .hentry {
		/* Default Mobile Mask (Tier 4) - Optimized */
		-webkit-mask-box-image: var(--mask-edge-mobile) 30 repeat;
		mask-border: var(--mask-edge-mobile) 30 repeat;
		mask-image: none;
		-webkit-mask-image: none;
	}

	/* Widen Quote Blocks on small screens to match normal content width */
	blockquote,
	.wp-block-quote {
		max-width: 100%;
	}
}

/* --- TIER 4: Midsize Cellphone (480px - 767px) --- */
@media (min-width: 480px) and (max-width: 767px) {
	.site-main {
		padding: 1.5rem; /* Reduced from 2rem */
		/* Simplified shadow for mid-range mobile */
		box-shadow:
			inset 0 1px 2px rgba(255,255,255,0.6),
			inset 0 -1px 1px rgba(0,0,0,0.1),
			0 5px 15px rgba(0,0,0,0.3);
	}

	.site-main-inner {
		padding: 1.5rem; /* Match outer padding reduction */
	}

	/* TIER 4 Mobile Texture Optimization: Remove heavy turbulence layers */
	.single-post .hentry::before,
	.page .hentry::before {
		/* Simplified stack: Dirt 1, Dirt 2, Fold, Base Grad 1, Base Grad 2 */
		background-image:
			radial-gradient(circle at 20% 80%, rgba(90, 70, 50, 0.08) 0%, transparent 30%),
			radial-gradient(ellipse at 80% 20%, rgba(90, 70, 50, 0.06) 0%, transparent 40%),
			linear-gradient(to right, transparent 49%, rgba(0,0,0,0.05) 50%, rgba(255,255,255,0.1) 51%, transparent 52%),
			linear-gradient(to right, rgba(160, 125, 82, 0.1), rgba(160, 125, 82, 0) 20%, rgba(160, 125, 82, 0.05) 40%, rgba(160, 125, 82, 0.15) 100%),
			radial-gradient(circle at 50% 50%, #eae2c6, #dcd0b8);
		background-blend-mode: multiply, multiply, overlay, multiply, normal;
		background-size: 100% 100%;
	}
}

/* --- TIER 5: Small/Cheap Cellphone (< 480px) --- */
@media (max-width: 479px) {
	/* Aggressive Space Saving */
	.site-main {
		padding: 0.75rem;
		/* Minimal Shadow Stack */
		box-shadow:
			inset 0 1px 1px rgba(255,255,255,0.5),
			0 2px 5px rgba(0,0,0,0.2);
	}

	.site-main-inner {
		padding: 0.75rem;
	}

	/* TIER 5 Mobile Texture Optimization: Even simpler stack */
	.single-post .hentry::before,
	.page .hentry::before {
		/* Simplified stack: Just Base Gradients and one faint stain */
		background-image:
			radial-gradient(circle at 20% 80%, rgba(90, 70, 50, 0.08) 0%, transparent 30%),
			linear-gradient(to right, rgba(160, 125, 82, 0.1), rgba(160, 125, 82, 0) 20%, rgba(160, 125, 82, 0.05) 40%, rgba(160, 125, 82, 0.15) 100%),
			radial-gradient(circle at 50% 50%, #eae2c6, #dcd0b8);
		background-blend-mode: multiply, multiply, normal;
		background-size: 100% 100%;
	}

	/* Micro Edge Mask: Very low displacement to maximize reading area */
	.single-post .hentry,
	.page .hentry {
		-webkit-mask-box-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1000 1000'%3E%3Cfilter id='rough-edge-micro'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.05' numOctaves='2' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='3' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='5' y='5' width='990' height='990' rx='1' ry='1' fill='white' filter='url(%23rough-edge-micro)'/%3E%3C/svg%3E") 20 repeat;
		mask-border: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1000 1000'%3E%3Cfilter id='rough-edge-micro'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.05' numOctaves='2' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='3' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='5' y='5' width='990' height='990' rx='1' ry='1' fill='white' filter='url(%23rough-edge-micro)'/%3E%3C/svg%3E") 20 repeat;
		mask-image: none;
		-webkit-mask-image: none;
	}

	/* Hide Secondary Nav entirely */
	.rolodex-navigation {
		display: none !important;
	}

	/* Flatten Header */
	.site-header {
		margin: 0 0 1rem;
		padding: 0.5rem;
		background-image: none; /* Remove noise texture for performance */
		background-color: #111;
	}

	/* Reduce Typography Base */
	body {
		font-size: 15px; /* Slightly smaller base */
		padding: 5px; /* Reduce body padding */
	}

	h1, .h1 { font-size: 1.8rem; }
	h2, .h2 { font-size: 1.6rem; }
}

@media (min-width: 1024px) {
	.page .entry-content {
		column-count: 1 !important;
	}
}

/* --- 13. PLUGIN OVERRIDES & ENFORCEMENT --- */

/*
   Boost specificity to override default plugin styles (CF7, Gravity Forms, etc.)
   Forces the "Dossier" aesthetic on third-party elements.
*/

/* Inputs & Textareas (Fibrous Paper) */
.site-main .wpcf7 input[type="text"],
.site-main .wpcf7 input[type="email"],
.site-main .wpcf7 input[type="tel"],
.site-main .wpcf7 textarea,
.site-main .gform_wrapper input[type="text"],
.site-main .gform_wrapper input[type="email"],
.site-main .gform_wrapper input[type="tel"],
.site-main .gform_wrapper input[type="number"],
.site-main .gform_wrapper textarea,
.site-main .ninja-forms-field,
.site-main .wpforms-field-large,
.site-main .wpforms-field-medium,
.site-main .wpforms-field-small,
.site-main .woocommerce input.input-text,
.site-main .woocommerce textarea {
	background-color: #e9e2d4 !important;
	background-image:
		var(--noise-png) !important;
	background-blend-mode: overlay !important;
	border: 1px solid rgba(0,0,0,0.2) !important;
	border-radius: 3px !important;
	box-shadow: inset 1px 1px 4px rgba(0,0,0,0.4) !important;
	color: var(--ink-black) !important;
	font-family: var(--font-typewriter) !important;
	padding: 0.75rem 1rem !important;
}

/* Focus State */
.site-main .wpcf7 input:focus,
.site-main .wpcf7 textarea:focus,
.site-main .gform_wrapper input:focus,
.site-main .gform_wrapper textarea:focus,
.site-main .ninja-forms-field:focus,
.site-main .wpforms-field:focus {
	background-color: #f2efe8 !important;
	box-shadow:
		inset 2px 2px 6px rgba(0,0,0,0.5),
		0 0 0 2px var(--brass-dark) !important;
	outline: none !important;
}

/* Buttons (Machined Brass) */
.site-main .wpcf7 input[type="submit"],
.site-main .gform_wrapper .gform_button,
.site-main .ninja-forms-field[type="button"],
.site-main .wpforms-submit,
.site-main .woocommerce #respond input#submit,
.site-main .woocommerce a.button,
.site-main .woocommerce button.button,
.site-main .woocommerce input.button {
	/* Font & Text */
	font-family: var(--font-ui) !important;
	text-transform: uppercase !important;
	color: var(--ink-black) !important;
	text-shadow: 1px 1px 0px rgba(255,255,255,0.2) !important;
	font-weight: normal !important;

	/* Shape */
	padding: 0.8em 1.5em !important;
	border-radius: 6px !important;
	border: 2px solid #000 !important;
	border-top-color: #1a1a1a !important;

	/* Brass Material */
	background-color: var(--brass) !important;
	background-image:
		radial-gradient(ellipse at 50% 10%, var(--brass-light) 0%, transparent 80%),
		linear-gradient(180deg, var(--brass-light), var(--brass-dark)),
		var(--noise-png) !important;
	background-blend-mode: normal, normal, overlay !important;

	/* Depth */
	box-shadow:
		inset 0 1px 1px rgba(255,255,255,0.3),
		0 2px 0 var(--brass-dark),
		0 3px 5px rgba(0,0,0,0.5) !important;

	transition: all 0.15s ease-out !important;
}

.site-main .wpcf7 input[type="submit"]:hover,
.site-main .gform_wrapper .gform_button:hover,
.site-main .ninja-forms-field[type="button"]:hover,
.site-main .wpforms-submit:hover,
.site-main .woocommerce button.button:hover {
	background-color: #fff !important; /* Fallback */
	background: linear-gradient(180deg, #fff, var(--brass-light)) !important;
	transform: translateY(-2px);
	box-shadow:
		inset 0 1px 1px rgba(255,255,255,0.3),
		0 1px 0 rgba(255,255,255,0.1),
		0 5px 10px 2px rgba(0,0,0,0.6) !important;
}

/* Labels & Legends */
.site-main .wpcf7 label,
.site-main .gform_wrapper .gfield_label,
.site-main .nf-field-label,
.site-main .wpforms-field-label {
	font-family: var(--font-typewriter) !important;
	font-weight: bold !important;
	color: var(--ink-soft-black) !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Validation Errors (Thematic) */
.site-main .wpcf7-not-valid-tip,
.site-main .gfield_error .validation_message,
.site-main .nf-error-msg,
.site-main .wpforms-error {
	font-family: var(--font-typewriter) !important;
	color: var(--blood-red-rich) !important;
	font-size: 0.85rem !important;
	border-left: 2px solid var(--blood-red-rich);
	padding-left: 0.5rem;
	margin-top: 0.5rem;
}

/* --- System Messages (Plugin Feedback) --- */
.site-main .wpcf7-response-output,
.site-main .woocommerce-message,
.site-main .woocommerce-error,
.site-main .woocommerce-info,
.site-main .gform_confirmation_message {
	background-color: #fdfbf5 !important;
	background-image: var(--noise-png) !important;
	background-blend-mode: overlay !important;
	border: 1px solid rgba(0,0,0,0.2) !important;
	border-left: 4px solid var(--brass-dark) !important;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
	color: var(--ink-black) !important;
	font-family: var(--font-typewriter) !important;
	padding: 1rem 1.5rem !important;
	margin-bottom: 2rem !important;
	border-radius: 2px !important;
}

.site-main .woocommerce-error {
	border-left-color: var(--blood-red-rich) !important;
}

.site-main .woocommerce-message::before,
.site-main .woocommerce-info::before,
.site-main .woocommerce-error::before {
	display: none !important; /* Remove default Woo icons */
}

/* --- 14. MODALS (Lightbox & Quick View) --- */

.smokey-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100000;
	background: rgba(0,0,0,0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s;
	padding: 2rem;
	backdrop-filter: blur(5px);
}

.smokey-modal.active {
	opacity: 1;
	visibility: visible;
}

.modal-close {
	position: absolute;
	top: 20px;
	right: 20px;
	background: none;
	border: none;
	color: #fff;
	font-family: var(--font-ui);
	font-size: 3rem;
	cursor: pointer;
	z-index: 100001;
	line-height: 1;
	padding: 0.5rem;
	text-shadow: 0 0 10px #000;
	opacity: 0.7;
	transition: opacity 0.2s;
}

.modal-close:hover {
	opacity: 1;
	color: var(--aquamarine);
}

/* Image Lightbox */
.smokey-lightbox-container {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center; /* Center if content is small */
	overflow-y: auto; /* Allow scrolling if content is large */
	padding: 2rem 0; /* Vertical breathing room */
}

.smokey-lightbox-figure {
	margin: auto; /* Center in flex container with overflow */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	width: 100%;
	/* Removed max-height constraint on figure to allow growth */
}

.smokey-lightbox-image {
	width: 100vw; /* Explicit Full Viewport Width as requested */
	max-width: none;
	height: auto;
	max-height: none;
	object-fit: contain;
	box-shadow: 0 10px 50px rgba(0,0,0,0.9);
	border: none;
	background: transparent;
	display: block;
}

.smokey-lightbox-caption {
	color: #fff;
	font-family: var(--font-ui);
	font-size: clamp(0.9rem, 1.5vw, 1.1rem);
	text-align: center;
	margin-top: 1rem;
	padding: 0.5rem 1rem;
	background: rgba(0,0,0,0.6);
	border-radius: 4px;
	text-shadow: 1px 1px 0 #000;
	max-width: 90vw;
	/* Ensure caption text wraps and doesn't overflow */
	white-space: pre-wrap;
}

.smokey-lightbox-container .modal-close {
	position: fixed; /* Fix to viewport so it doesn't scroll away */
	top: 20px;
	right: 20px;
	background: rgba(0,0,0,0.5);
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	z-index: 10;
}

.smokey-lightbox-container .modal-close:hover {
	background: rgba(0,0,0,0.8);
	color: var(--aquamarine);
	text-shadow: 0 0 10px var(--aquamarine-glow);
}

/* Archive Quick View Modal */
.smokey-archive-modal-content {
	background-color: var(--manila-folder);
	background-image: var(--noise-png);
	background-blend-mode: overlay;
	border: 1px solid var(--manila-darker);
	padding: 4rem 3rem 3rem; /* Extra top padding */
	max-width: 900px;
	width: 90vw; /* Responsive width */
	max-height: 85vh;
	overflow-y: auto;
	position: relative;
	border-radius: 2px 2px 4px 4px;
	box-shadow: 0 30px 60px rgba(0,0,0,0.8);
	margin-top: 2rem; /* Space for the tab */
}

/* The Tab for the Modal */
.smokey-archive-modal-content::before {
	content: 'OPEN CASE FILE';
	position: absolute;
	top: -30px;
	left: -1px; /* Align with border */
	height: 30px;
	padding: 0 2rem;
	background-color: var(--manila-folder);
	background-image: var(--noise-png);
	background-blend-mode: overlay;
	border: 1px solid var(--manila-darker);
	border-bottom: 1px solid var(--manila-folder); /* Blend */
	border-radius: 8px 8px 0 0;
	font-family: var(--font-ui);
	font-size: 0.8rem;
	color: var(--ink-soft-black);
	line-height: 30px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	box-shadow: inset 0 1px 1px rgba(255,255,255,0.4);
}

.smokey-archive-modal-content .modal-close {
	color: var(--ink-black);
	text-shadow: none;
	top: 15px;
	right: 15px;
	background: rgba(0,0,0,0.05);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
}

.smokey-archive-modal-content .modal-close:hover {
	background: var(--blood-red-rich);
	color: #fff;
}

.smokey-archive-modal-content .qv-title {
	font-family: var(--font-newsprint);
	font-size: clamp(2rem, 4vw, 3.5rem);
	margin-bottom: 1.5rem;
	border-bottom: 2px solid var(--ink-black);
	padding-bottom: 1rem;
	color: var(--ink-black);
	line-height: 1.1;
}

.smokey-archive-modal-content .qv-excerpt {
	font-family: var(--font-typewriter);
	font-size: 1.1rem;
	line-height: 1.8;
	margin-bottom: 2.5rem;
	color: var(--ink-black);
}

.smokey-archive-modal-content .qv-link {
	display: inline-block;
	text-align: right;
	width: 100%;
}