/*
Theme Name:        BearEvno
Theme URI:         https://github.com/your-username/bearevno
Author:            BearEvno Editorial Team
Author URI:        https://tvhs.edu
Description:       A vintage scrapbook / newspaper aesthetic WordPress theme for the TVHS Research Archive. Features torn paper edges, kraft paper textures, Playfair Display headings, and a warm earthy palette. Built for the block editor (Gutenberg) with full template file support.
Version:           1.0.0
Requires at least: 6.0
Tested up to:      6.5
Requires PHP:      8.0
License:           GNU General Public License v2 or later
License URI:       http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       bearevno
Tags:              blog, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-width-template, sticky-post, translation-ready, block-styles, wide-blocks

/* ============================================================
   BearEvno WordPress Theme — Main Stylesheet
   Vintage Collage / Scrapbook / Newspaper Aesthetic
   ============================================================ */

/* ─── CUSTOM PROPERTIES ─────────────────────────────────── */
:root {
	--clr-bg:           #F2E9DC;
	--clr-bg-warm:      #EDE0CC;
	--clr-bg-pale:      #FAF5EE;
	--clr-kraft:        #C8A87A;
	--clr-kraft-dark:   #A8845A;
	--clr-header:       #2E2118;
	--clr-brown-deep:   #3C2F2F;
	--clr-brown-mid:    #5C3D2E;
	--clr-brown-light:  #8B6347;
	--clr-accent:       #C8860A;
	--clr-gold:         #D4A030;
	--clr-text:         #2B1D0E;
	--clr-text-mid:     #4A3728;
	--clr-text-light:   #6B5244;
	--clr-white:        #FDF8F0;
	--clr-border:       rgba(92, 61, 46, 0.25);

	--font-display:     'Playfair Display', Georgia, 'Times New Roman', serif;
	--font-body:        'Lora', Georgia, serif;
	--font-mono:        'Courier Prime', 'Courier New', Courier, monospace;

	--space-xs:  0.25rem;
	--space-sm:  0.5rem;
	--space-md:  1rem;
	--space-lg:  2rem;
	--space-xl:  3rem;
	--space-2xl: 5rem;

	--shadow-paper: 2px 4px 12px rgba(43, 29, 14, 0.18), 0 1px 3px rgba(43, 29, 14, 0.12);
	--shadow-lift:  4px 8px 24px rgba(43, 29, 14, 0.22), 0 2px 6px rgba(43, 29, 14, 0.16);
	--transition:   0.2s ease;
}

/* ─── RESET & BASE ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	background-color: var(--clr-bg);
	color: var(--clr-text);
	font-family: var(--font-body);
	line-height: 1.75;
	min-height: 100vh;
	position: relative;
	overflow-x: hidden;
}

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

a { color: var(--clr-brown-mid); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--clr-accent); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	line-height: 1.2;
	color: var(--clr-brown-deep);
}

p { margin-bottom: var(--space-md); }
ul, ol { padding-left: var(--space-lg); margin-bottom: var(--space-md); }
li { margin-bottom: var(--space-xs); }

/* ─── ACCESSIBILITY ──────────────────────────────────────── */
.screen-reader-text {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-md);
	background: var(--clr-header);
	color: var(--clr-white);
	padding: 8px 16px;
	font-family: var(--font-mono);
	font-size: 0.8rem;
	z-index: 9999;
	transition: top 0.2s;
}
.skip-link:focus { top: var(--space-md); }

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

/* ─── PAPER TEXTURE OVERLAY ──────────────────────────────── */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
	opacity: 0.6;
}

/* ─── SITE WRAPPER ───────────────────────────────────────── */
#page { position: relative; z-index: 1; }

/* ─── SITE HEADER ────────────────────────────────────────── */
.site-header {
	background-color: var(--clr-header);
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

.site-header .header-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--space-lg);
	height: 62px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
}

/* Logo / Brand */
.site-branding {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.site-branding a { text-decoration: none; }

.custom-logo-link img {
	max-height: 38px;
	width: auto;
	display: block;
}

.logo-fallback {
	display: flex;
	align-items: center;
}

.site-title {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.2;
	margin: 0;
}

.site-title a {
	color: var(--clr-white);
	text-decoration: none;
}
.site-title a:hover { color: var(--clr-gold); }

.site-description { display: none; }

/* Main Navigation */
.main-navigation {
	display: flex;
	align-items: center;
}

.main-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 2px;
}

.main-navigation ul li a {
	color: var(--clr-white);
	text-decoration: none;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 6px 12px;
	border: 1px solid transparent;
	display: block;
	transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current-page-ancestor > a {
	color: var(--clr-gold);
	border-color: rgba(212, 160, 48, 0.5);
	background: rgba(212, 160, 48, 0.08);
}

/* Search toggle button */
.nav-search-toggle {
	background: none;
	border: none;
	color: var(--clr-white);
	cursor: pointer;
	padding: 6px 10px;
	font-size: 1rem;
	line-height: 1;
	transition: color var(--transition);
	margin-left: 4px;
}
.nav-search-toggle:hover { color: var(--clr-gold); }

/* Mobile menu button */
.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}
.menu-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--clr-white);
	transition: transform var(--transition), opacity var(--transition);
}

/* WordPress admin bar adjustment */
.admin-bar .site-header { top: 32px; }

/* ─── SEARCH OVERLAY ─────────────────────────────────────── */
.search-overlay {
	display: none;
	position: fixed;
	top: 62px;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(30, 18, 10, 0.94);
	z-index: 200;
	padding: var(--space-xl) var(--space-lg);
}
.admin-bar .search-overlay { top: 94px; }
.search-overlay.is-open { display: block; }

.search-overlay .search-form-wrapper {
	max-width: 640px;
	margin: 0 auto;
}

.search-overlay .search-field {
	width: 100%;
	background: var(--clr-bg-pale);
	border: 2px solid var(--clr-kraft);
	padding: 14px 16px;
	font-family: var(--font-body);
	font-size: 1.1rem;
	color: var(--clr-text);
	outline: none;
	margin-bottom: var(--space-md);
}
.search-overlay .search-field:focus { border-color: var(--clr-accent); }

.search-overlay .search-submit {
	font-family: var(--font-mono);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--clr-brown-mid);
	color: var(--clr-white);
	border: none;
	padding: 10px 24px;
	cursor: pointer;
}

.search-close {
	background: none;
	border: none;
	color: rgba(253,248,240,0.6);
	font-size: 0.8rem;
	font-family: var(--font-mono);
	cursor: pointer;
	margin-top: var(--space-sm);
	display: block;
	letter-spacing: 0.08em;
}
.search-close:hover { color: var(--clr-white); }

/* ─── HERO SECTION (homepage) ────────────────────────────── */
.hero-section {
	position: relative;
	min-height: 460px;
	background-color: var(--clr-bg-warm);
	overflow: hidden;
	display: flex;
	align-items: center;
	padding: var(--space-2xl) var(--space-lg);
}

.hero-collage {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.hero-clip {
	position: absolute;
	overflow: hidden;
}
.hero-clip-1 {
	width: 200px; height: 260px;
	top: -20px; right: 70px;
	transform: rotate(3deg);
	background: repeating-linear-gradient(0deg, transparent, transparent 13px, rgba(100,80,50,.08) 13px, rgba(100,80,50,.08) 14px);
	border: 1px solid rgba(140,110,70,.12);
}
.hero-clip-2 {
	width: 155px; height: 195px;
	bottom: 20px; right: 16px;
	transform: rotate(-2.5deg);
	background: repeating-linear-gradient(0deg, transparent, transparent 13px, rgba(100,80,50,.07) 13px, rgba(100,80,50,.07) 14px);
	border: 1px solid rgba(140,110,70,.1);
}
.hero-clip-3 {
	width: 115px; height: 175px;
	top: 45px; right: 250px;
	transform: rotate(-5deg);
	background: repeating-linear-gradient(0deg, transparent, transparent 13px, rgba(100,80,50,.06) 13px, rgba(100,80,50,.06) 14px);
	border: 1px solid rgba(140,110,70,.09);
}

.hero-city {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 100px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M0,100 L0,70 L30,70 L30,50 L50,50 L50,30 L70,30 L70,50 L90,50 L90,60 L120,60 L120,40 L140,40 L140,20 L160,20 L160,40 L180,40 L180,60 L200,60 L200,45 L220,45 L220,25 L235,25 L235,45 L250,45 L250,60 L280,60 L280,35 L300,35 L300,55 L320,55 L320,65 L350,65 L350,30 L370,30 L370,10 L385,10 L385,30 L400,30 L400,65 L430,65 L430,50 L455,50 L455,70 L480,70 L480,55 L500,55 L500,35 L515,35 L515,55 L530,55 L530,70 L560,70 L560,45 L580,45 L580,65 L600,65 L600,40 L620,40 L620,60 L640,60 L640,70 L670,70 L670,50 L690,50 L690,30 L705,30 L705,50 L720,50 L720,70 L750,70 L750,55 L770,55 L770,35 L785,35 L785,55 L800,55 L800,65 L830,65 L830,45 L850,45 L850,65 L870,65 L870,50 L890,50 L890,70 L920,70 L920,40 L940,40 L940,60 L960,60 L960,75 L990,75 L990,55 L1010,55 L1010,35 L1025,35 L1025,55 L1040,55 L1040,70 L1070,70 L1070,50 L1090,50 L1090,65 L1110,65 L1110,55 L1130,55 L1130,70 L1160,70 L1160,60 L1180,60 L1180,75 L1200,75 L1200,100 Z' fill='rgba(60,47,47,0.06)'/%3E%3C/svg%3E");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom;
}

.hero-content { position: relative; z-index: 1; max-width: 800px; }

.hero-title-row {
	display: flex;
	align-items: baseline;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.hero-main-title {
	font-family: var(--font-display);
	font-size: clamp(3.2rem, 9vw, 6rem);
	font-weight: 900;
	color: var(--clr-brown-deep);
	line-height: 1;
	text-shadow: 2px 3px 0 rgba(92, 61, 46, 0.15);
	letter-spacing: -0.01em;
	margin: 0;
}
.hero-colon { color: var(--clr-accent); }

.hero-icons {
	font-size: 1.8rem;
	display: flex;
	align-items: center;
	gap: 4px;
	padding-bottom: 8px;
}
.icon-notes {
	font-family: serif;
	color: var(--clr-brown-mid);
	letter-spacing: -2px;
	opacity: 0.85;
}

.hero-greek {
	font-family: var(--font-body);
	font-size: clamp(0.95rem, 2.5vw, 1.2rem);
	font-style: italic;
	font-weight: 600;
	color: var(--clr-brown-deep);
	margin-top: var(--space-sm);
	margin-bottom: 0;
}
.hero-transliteration { font-style: italic; color: var(--clr-brown-mid); }

.hero-tagline-wrap {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: var(--space-md);
	max-width: 620px;
}
.paperclip { font-size: 1.4rem; flex-shrink: 0; margin-top: -2px; filter: sepia(0.6); }
.hero-tagline {
	font-family: var(--font-mono);
	font-size: clamp(0.8rem, 1.8vw, 0.92rem);
	line-height: 1.7;
	color: var(--clr-text-mid);
	margin: 0;
}

/* ─── OUR ORGANIZATION SECTION ───────────────────────────── */
.organization-section {
	position: relative;
	background-color: var(--clr-kraft);
	background-image:
		repeating-linear-gradient(0deg, transparent, transparent 20px, rgba(80,55,30,.06) 20px, rgba(80,55,30,.06) 21px),
		repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(80,55,30,.03) 20px, rgba(80,55,30,.03) 21px);
	padding-top: 8px;
}

.torn-edge-top {
	height: 30px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' preserveAspectRatio='none'%3E%3Cpath d='M0,30 Q15,5 30,20 Q45,35 60,15 Q75,0 90,18 Q105,35 120,12 Q135,-2 150,20 Q165,38 180,10 Q195,-5 210,22 Q225,38 240,8 Q255,-3 270,18 Q285,35 300,14 Q315,0 330,22 Q345,38 360,10 Q375,-4 390,20 Q405,38 420,12 Q435,-2 450,18 Q465,35 480,15 Q495,0 510,20 Q525,38 540,10 Q555,-3 570,22 Q585,38 600,8 Q615,-2 630,20 Q645,38 660,15 Q675,0 690,18 Q705,35 720,12 Q735,-2 750,22 Q765,38 780,10 Q795,-4 810,20 Q825,38 840,15 Q855,0 870,18 Q885,35 900,12 Q915,-2 930,22 Q945,38 960,8 Q975,-3 990,20 Q1005,38 1020,15 Q1035,0 1050,18 Q1065,35 1080,12 Q1095,-2 1110,20 Q1125,38 1140,10 Q1155,-4 1170,22 Q1185,38 1200,15 L1200,30 Z' fill='%23C8A87A'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	margin-bottom: -2px;
}

.torn-edge-bottom {
	height: 30px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' preserveAspectRatio='none'%3E%3Cpath d='M0,0 Q15,22 30,8 Q45,-5 60,18 Q75,35 90,10 Q105,-3 120,20 Q135,38 150,8 Q165,-2 180,22 Q195,38 210,12 Q225,-2 240,20 Q255,38 270,15 Q285,0 300,18 Q315,35 330,10 Q345,-4 360,22 Q375,38 390,12 Q405,-2 420,20 Q435,38 450,15 Q465,0 480,18 Q495,35 510,10 Q525,-4 540,22 Q555,38 570,12 Q585,-2 600,20 Q615,38 630,15 Q645,0 660,18 Q675,35 690,10 Q705,-4 720,22 Q735,38 750,12 Q765,-2 780,20 Q795,38 810,15 Q825,0 840,18 Q855,35 870,10 Q885,-4 900,22 Q915,38 930,12 Q945,-2 960,20 Q975,38 990,15 Q1005,0 1020,18 Q1035,35 1050,10 Q1065,-4 1080,22 Q1095,38 1110,15 Q1125,0 1140,18 Q1155,35 1170,12 Q1185,-2 1200,20 L1200,30 L0,30 Z' fill='%23C8A87A'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	margin-top: -2px;
}

.organization-inner {
	max-width: 960px;
	margin: 0 auto;
	padding: var(--space-2xl) var(--space-lg);
	position: relative;
}

.organization-heading {
	font-family: var(--font-display);
	font-size: clamp(2rem, 5vw, 3.2rem);
	font-weight: 900;
	color: var(--clr-brown-deep);
	margin-bottom: var(--space-xl);
	text-shadow: 1px 2px 0 rgba(92, 61, 46, 0.15);
}

.org-points { display: flex; flex-direction: column; gap: var(--space-lg); max-width: 680px; }

.org-point {
	display: flex;
	align-items: flex-start;
	gap: var(--space-md);
	font-family: var(--font-mono);
	font-size: 0.9rem;
	line-height: 1.65;
	color: var(--clr-brown-deep);
}
.org-point-bullet { font-size: 1.3rem; flex-shrink: 0; margin-top: -2px; }
.org-point-title { font-weight: 700; }

.organization-decor {
	position: absolute;
	bottom: var(--space-lg);
	right: var(--space-xl);
	display: flex;
	align-items: flex-end;
	gap: 8px;
	font-size: 2rem;
	pointer-events: none;
}
.decor-sf { filter: saturate(1.4) drop-shadow(1px 2px 3px rgba(0,0,0,.18)); }
.decor-sf-lg { font-size: 2.8rem; }
.decor-paw { font-size: 2.2rem; opacity: 0.75; }

/* ─── POSTS / BLOG SECTION ───────────────────────────────── */
.posts-section {
	padding: var(--space-2xl) var(--space-lg);
}
.posts-section-inner { max-width: 1100px; margin: 0 auto; }

.section-heading {
	font-family: var(--font-display);
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--clr-brown-mid);
	text-align: center;
	display: flex;
	align-items: center;
	gap: var(--space-md);
	margin-bottom: var(--space-xl);
}
.section-heading-line {
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--clr-border));
}
.section-heading-line.reverse {
	background: linear-gradient(to left, transparent, var(--clr-border));
}

/* ─── POST CARD GRID ─────────────────────────────────────── */
.posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--space-lg);
}

.post-card {
	position: relative;
	background: var(--clr-white);
	padding: var(--space-lg) var(--space-lg) calc(var(--space-lg) + 8px);
	box-shadow: var(--shadow-paper);
	transition: transform var(--transition), box-shadow var(--transition);
}
.post-card:hover {
	transform: translateY(-4px) rotate(0.3deg);
	box-shadow: var(--shadow-lift);
}

.post-card-torn {
	position: absolute;
	top: -12px; left: 0; right: 0;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M0,14 Q8,2 16,10 Q24,18 32,6 Q40,-2 48,10 Q56,18 64,5 Q72,-1 80,10 Q88,18 96,6 Q104,-2 112,10 Q120,18 128,5 Q136,-1 144,10 Q152,18 160,6 Q168,-2 176,10 Q184,18 192,5 Q200,-1 208,10 Q216,18 224,6 Q232,-2 240,10 Q248,18 256,5 Q264,-1 272,10 Q280,18 288,6 Q296,-2 300,8 L300,14 Z' fill='%23FDF8F0'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.post-card-thumbnail {
	margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)) var(--space-md);
	overflow: hidden;
	max-height: 180px;
}
.post-card-thumbnail img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.post-card:hover .post-card-thumbnail img { transform: scale(1.03); }

.post-card-categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-bottom: var(--space-sm);
}
.post-card-cat {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--clr-brown-light);
	background: rgba(200, 168, 122, 0.2);
	padding: 2px 8px;
	text-decoration: none;
}
.post-card-cat:hover { background: rgba(200, 168, 122, 0.4); color: var(--clr-brown-deep); }

.post-card-title {
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--clr-brown-deep);
	margin-bottom: var(--space-sm);
	line-height: 1.3;
}
.post-card-title a { text-decoration: none; color: inherit; }
.post-card-title a:hover { color: var(--clr-accent); }

.post-card-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-family: var(--font-mono);
	font-size: 0.74rem;
	color: var(--clr-text-light);
	margin-bottom: var(--space-sm);
}
.post-card-meta a { color: inherit; text-decoration: none; }
.post-card-meta a:hover { color: var(--clr-accent); }

.post-card-excerpt {
	font-family: var(--font-body);
	font-size: 0.88rem;
	color: var(--clr-text-mid);
	line-height: 1.65;
	margin-bottom: var(--space-md);
}

.post-card-read-more {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--clr-brown-mid);
	text-decoration: none;
	border-bottom: 1px solid var(--clr-border);
	padding-bottom: 1px;
	transition: color var(--transition), border-color var(--transition);
}
.post-card-read-more:hover { color: var(--clr-accent); border-color: var(--clr-accent); }

/* No posts message */
.no-posts {
	text-align: center;
	padding: var(--space-2xl);
	font-family: var(--font-body);
	font-style: italic;
	color: var(--clr-text-light);
}

/* View All button */
.posts-view-all {
	text-align: center;
	margin-top: var(--space-xl);
}

/* ─── VINTAGE BUTTON ─────────────────────────────────────── */
.btn-vintage {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--clr-brown-deep);
	border: 2px solid var(--clr-brown-mid);
	padding: 10px 28px;
	background: transparent;
	box-shadow: 3px 3px 0 var(--clr-brown-light);
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}
.btn-vintage:hover {
	background: var(--clr-brown-mid);
	color: var(--clr-white);
	text-decoration: none;
}

/* ─── SIDEBAR ────────────────────────────────────────────── */
.content-sidebar-wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: var(--space-xl) var(--space-lg);
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: var(--space-xl);
	align-items: start;
}

.widget-area { display: flex; flex-direction: column; gap: var(--space-xl); }

.widget {
	background: var(--clr-white);
	padding: var(--space-lg);
	box-shadow: var(--shadow-paper);
	position: relative;
}

.widget::before {
	content: '';
	position: absolute;
	top: -12px; left: 0; right: 0;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M0,14 Q8,2 16,10 Q24,18 32,6 Q40,-2 48,10 Q56,18 64,5 Q72,-1 80,10 Q88,18 96,6 Q104,-2 112,10 Q120,18 128,5 Q136,-1 144,10 Q152,18 160,6 Q168,-2 176,10 Q184,18 192,5 Q200,-1 208,10 Q216,18 224,6 Q232,-2 240,10 Q248,18 256,5 Q264,-1 272,10 Q280,18 288,6 Q296,-2 300,8 L300,14 Z' fill='%23FDF8F0'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.widget-title {
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--clr-brown-deep);
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid var(--clr-border);
}

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

.widget ul li {
	font-family: var(--font-body);
	font-size: 0.88rem;
	padding: 6px 0;
	border-bottom: 1px solid rgba(92,61,46,.1);
	margin: 0;
}

.widget ul li:last-child { border-bottom: none; }

.widget ul li a {
	color: var(--clr-brown-mid);
	text-decoration: none;
	font-family: var(--font-body);
	font-size: 0.88rem;
}
.widget ul li a:hover { color: var(--clr-accent); }

/* ─── SINGLE POST ────────────────────────────────────────── */
.single-post-wrap {
	max-width: 780px;
	margin: 0 auto;
	padding: var(--space-xl) var(--space-lg);
}

/* Breadcrumb */
.breadcrumb {
	font-family: var(--font-mono);
	font-size: 0.76rem;
	color: var(--clr-text-light);
	margin-bottom: var(--space-lg);
}
.breadcrumb a { color: var(--clr-brown-light); text-decoration: none; }
.breadcrumb a:hover { color: var(--clr-accent); }
.breadcrumb span { opacity: 0.5; margin: 0 4px; }

/* Post header */
.single-post-header {
	position: relative;
	background: var(--clr-white);
	padding: var(--space-xl);
	margin-bottom: var(--space-xl);
	box-shadow: var(--shadow-paper);
}

.single-post-header-torn {
	position: absolute;
	bottom: -14px; left: 0; right: 0;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M0,0 Q8,12 16,4 Q24,-4 32,8 Q40,18 48,5 Q56,-2 64,8 Q72,16 80,4 Q88,-2 96,8 Q104,18 112,5 Q120,-2 128,8 Q136,18 144,4 Q152,-2 160,8 Q168,18 176,5 Q184,-2 192,8 Q200,18 208,4 Q216,-2 224,8 Q232,18 240,5 Q248,-2 256,8 Q264,18 272,4 Q280,-2 288,8 Q296,18 300,6 L300,16 L0,16 Z' fill='%23F2E9DC'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.post-categories-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-bottom: var(--space-md);
}
.post-cat-badge {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--clr-white);
	background: var(--clr-brown-mid);
	padding: 3px 10px;
	text-decoration: none;
}
.post-cat-badge:hover { background: var(--clr-accent); color: var(--clr-white); }

.single-post-title {
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 5vw, 2.8rem);
	font-weight: 900;
	color: var(--clr-brown-deep);
	line-height: 1.15;
	margin-bottom: var(--space-md);
}

.single-post-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
	font-family: var(--font-mono);
	font-size: 0.78rem;
	color: var(--clr-text-light);
	margin-bottom: var(--space-md);
}
.single-post-meta .sep { opacity: 0.4; }
.single-post-meta a { color: inherit; text-decoration: none; }
.single-post-meta a:hover { color: var(--clr-accent); }

.single-post-excerpt {
	font-family: var(--font-body);
	font-size: 1.05rem;
	font-style: italic;
	color: var(--clr-text-mid);
	line-height: 1.7;
	border-left: 3px solid var(--clr-gold);
	padding-left: var(--space-md);
	margin-top: var(--space-md);
	margin-bottom: 0;
}

/* Featured image */
.single-featured-image {
	margin-bottom: var(--space-xl);
	box-shadow: var(--shadow-paper);
}
.single-featured-image img {
	width: 100%;
	max-height: 420px;
	object-fit: cover;
}

/* Post body content */
.entry-content {
	font-family: var(--font-body);
	font-size: 1.05rem;
	line-height: 1.85;
	color: var(--clr-text);
}

.entry-content > * { margin-bottom: var(--space-md); }
.entry-content > *:last-child { margin-bottom: 0; }

.entry-content h2 {
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--clr-brown-deep);
	margin-top: var(--space-xl);
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-xs);
	border-bottom: 1px solid var(--clr-border);
}
.entry-content h3 {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--clr-brown-mid);
	margin-top: var(--space-lg);
	margin-bottom: var(--space-sm);
}
.entry-content h4 {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--clr-brown-mid);
}

.entry-content a { color: var(--clr-accent); }

.entry-content blockquote {
	border-left: 4px solid var(--clr-gold);
	padding: var(--space-md) var(--space-lg);
	margin: var(--space-lg) 0;
	background: rgba(200, 168, 122, 0.12);
	font-style: italic;
	color: var(--clr-text-mid);
}
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content blockquote cite {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	font-style: normal;
	color: var(--clr-text-light);
	display: block;
	margin-top: var(--space-sm);
}

.entry-content code {
	font-family: var(--font-mono);
	font-size: 0.88em;
	background: rgba(92, 61, 46, 0.1);
	padding: 2px 5px;
}
.entry-content pre {
	background: var(--clr-brown-deep);
	color: #f0e6d3;
	padding: var(--space-lg);
	overflow-x: auto;
	margin: var(--space-lg) 0;
}
.entry-content pre code { background: none; color: inherit; padding: 0; }

.entry-content hr {
	border: none;
	text-align: center;
	color: var(--clr-kraft-dark);
	margin: var(--space-xl) 0;
	font-size: 1.2rem;
	letter-spacing: 0.4em;
}
.entry-content hr::after { content: '✦ ✦ ✦'; }

.entry-content figure { margin: var(--space-lg) 0; }
.entry-content figcaption {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	color: var(--clr-text-light);
	text-align: center;
	font-style: italic;
	margin-top: var(--space-sm);
}

.entry-content img { box-shadow: var(--shadow-paper); }

/* Drop cap first letter */
.entry-content > p:first-of-type::first-letter {
	font-family: var(--font-display);
	font-size: 3.8em;
	font-weight: 900;
	float: left;
	line-height: 0.75;
	margin: 0.08em 0.1em 0 0;
	color: var(--clr-brown-mid);
}

/* Gutenberg block overrides */
.entry-content .wp-block-image img { box-shadow: var(--shadow-paper); }
.entry-content .wp-block-quote {
	border-left: 4px solid var(--clr-gold);
	padding: var(--space-md) var(--space-lg);
	background: rgba(200, 168, 122, 0.12);
}
.entry-content .wp-block-pullquote {
	border-top: 2px solid var(--clr-gold);
	border-bottom: 2px solid var(--clr-gold);
	padding: var(--space-md) 0;
	text-align: center;
}
.entry-content .wp-block-pullquote blockquote {
	border: none;
	background: none;
	padding: 0;
}
.entry-content .wp-block-pullquote p {
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-style: italic;
	font-weight: 700;
	color: var(--clr-brown-mid);
}
.entry-content .wp-block-separator { /* matches our styled hr */ }

/* Tags */
.post-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	margin-top: var(--space-xl);
	padding-top: var(--space-md);
	border-top: 1px solid var(--clr-border);
}
.post-tags-label {
	font-family: var(--font-mono);
	font-size: 0.76rem;
	font-weight: 700;
	color: var(--clr-text-light);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.post-tag {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	background: rgba(200, 168, 122, 0.25);
	color: var(--clr-brown-mid);
	padding: 3px 10px;
	border: 1px solid var(--clr-border);
	text-decoration: none;
}
.post-tag:hover { background: rgba(200, 168, 122, 0.5); color: var(--clr-brown-deep); }

/* Author bio box */
.author-bio {
	background: var(--clr-white);
	padding: var(--space-lg);
	margin-top: var(--space-xl);
	box-shadow: var(--shadow-paper);
	display: flex;
	gap: var(--space-md);
	align-items: flex-start;
}
.author-bio-avatar img { border-radius: 0; box-shadow: var(--shadow-paper); }
.author-bio-name {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--clr-brown-deep);
	margin-bottom: var(--space-xs);
}
.author-bio-desc {
	font-family: var(--font-body);
	font-size: 0.88rem;
	color: var(--clr-text-mid);
	line-height: 1.65;
	margin: 0;
}

/* Post navigation */
.post-navigation {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md);
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--clr-border);
}
.nav-previous, .nav-next {
	background: var(--clr-white);
	box-shadow: var(--shadow-paper);
	padding: var(--space-md);
	transition: transform var(--transition), box-shadow var(--transition);
}
.nav-previous:hover, .nav-next:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lift);
}
.nav-next { text-align: right; }
.nav-direction {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--clr-text-light);
	display: block;
	margin-bottom: 4px;
}
.nav-post-title {
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--clr-brown-deep);
	line-height: 1.3;
	text-decoration: none;
}
.nav-post-title:hover { color: var(--clr-accent); }

/* Comments */
.comments-area {
	margin-top: var(--space-xl);
	padding-top: var(--space-xl);
	border-top: 1px solid var(--clr-border);
}
.comments-title {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--clr-brown-deep);
	margin-bottom: var(--space-lg);
}
.comment-list { list-style: none; padding: 0; }
.comment {
	background: var(--clr-white);
	padding: var(--space-md);
	margin-bottom: var(--space-md);
	box-shadow: var(--shadow-paper);
}
.comment-meta { font-family: var(--font-mono); font-size: 0.74rem; color: var(--clr-text-light); margin-bottom: var(--space-sm); }
.comment-author b { font-family: var(--font-display); color: var(--clr-brown-deep); font-size: 0.9rem; }
.comment-content { font-family: var(--font-body); font-size: 0.9rem; color: var(--clr-text-mid); }

/* Comment form */
.comment-form label {
	font-family: var(--font-mono);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--clr-text-light);
	display: block;
	margin-bottom: 4px;
	margin-top: var(--space-md);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	background: var(--clr-white);
	border: 1px solid var(--clr-border);
	padding: 10px 12px;
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: var(--clr-text);
	outline: none;
	transition: border-color var(--transition);
}
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--clr-accent); }
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form .submit {
	margin-top: var(--space-md);
	font-family: var(--font-mono);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--clr-brown-mid);
	color: var(--clr-white);
	border: none;
	padding: 10px 28px;
	cursor: pointer;
	box-shadow: 3px 3px 0 var(--clr-brown-light);
	transition: background var(--transition);
}
.comment-form .submit:hover { background: var(--clr-accent); }

/* ─── PAGES (static) ─────────────────────────────────────── */
.page-wrap {
	max-width: 960px;
	margin: 0 auto;
	padding: var(--space-xl) var(--space-lg);
}
.page-header-block {
	position: relative;
	background: var(--clr-white);
	padding: var(--space-xl);
	margin-bottom: var(--space-xl);
	box-shadow: var(--shadow-paper);
}
.page-header-torn {
	position: absolute;
	bottom: -14px; left: 0; right: 0;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M0,0 Q8,12 16,4 Q24,-4 32,8 Q40,18 48,5 Q56,-2 64,8 Q72,16 80,4 Q88,-2 96,8 Q104,18 112,5 Q120,-2 128,8 Q136,18 144,4 Q152,-2 160,8 Q168,18 176,5 Q184,-2 192,8 Q200,18 208,4 Q216,-2 224,8 Q232,18 240,5 Q248,-2 256,8 Q264,18 272,4 Q280,-2 288,8 Q296,18 300,6 L300,16 L0,16 Z' fill='%23F2E9DC'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.page-title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 900;
	color: var(--clr-brown-deep);
	margin: 0;
}

/* ─── ARCHIVE / CATEGORY PAGES ───────────────────────────── */
.archive-wrap { max-width: 1100px; margin: 0 auto; padding: var(--space-xl) var(--space-lg); }
.archive-header {
	position: relative;
	background: var(--clr-white);
	padding: var(--space-xl);
	margin-bottom: var(--space-xl);
	box-shadow: var(--shadow-paper);
}
.archive-header-torn {
	position: absolute;
	bottom: -14px; left: 0; right: 0;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M0,0 Q8,12 16,4 Q24,-4 32,8 Q40,18 48,5 Q56,-2 64,8 Q72,16 80,4 Q88,-2 96,8 Q104,18 112,5 Q120,-2 128,8 Q136,18 144,4 Q152,-2 160,8 Q168,18 176,5 Q184,-2 192,8 Q200,18 208,4 Q216,-2 224,8 Q232,18 240,5 Q248,-2 256,8 Q264,18 272,4 Q280,-2 288,8 Q296,18 300,6 L300,16 L0,16 Z' fill='%23F2E9DC'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.archive-title {
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-weight: 900;
	color: var(--clr-brown-deep);
	margin-bottom: var(--space-xs);
}
.archive-description {
	font-family: var(--font-body);
	font-size: 1rem;
	font-style: italic;
	color: var(--clr-text-light);
	margin: 0;
}

/* Pagination */
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-sm);
	margin-top: var(--space-xl);
	font-family: var(--font-mono);
	font-size: 0.82rem;
	font-weight: 700;
}
.pagination a, .pagination span {
	padding: 6px 14px;
	border: 1px solid var(--clr-border);
	color: var(--clr-brown-mid);
	text-decoration: none;
	transition: background var(--transition), color var(--transition);
}
.pagination a:hover { background: var(--clr-brown-mid); color: var(--clr-white); }
.pagination .current {
	background: var(--clr-brown-mid);
	color: var(--clr-white);
	border-color: var(--clr-brown-mid);
}

/* ─── SEARCH RESULTS PAGE ────────────────────────────────── */
.search-results-wrap { max-width: 960px; margin: 0 auto; padding: var(--space-xl) var(--space-lg); }
.search-no-results {
	text-align: center;
	padding: var(--space-2xl);
	font-family: var(--font-body);
	font-style: italic;
	color: var(--clr-text-light);
}

/* ─── 404 PAGE ───────────────────────────────────────────── */
.error-404-wrap {
	max-width: 640px;
	margin: 0 auto;
	padding: var(--space-2xl) var(--space-lg);
	text-align: center;
}
.error-404-title {
	font-family: var(--font-display);
	font-size: 6rem;
	font-weight: 900;
	color: var(--clr-brown-light);
	line-height: 1;
	margin-bottom: var(--space-md);
}
.error-404-message {
	font-family: var(--font-body);
	font-size: 1.1rem;
	font-style: italic;
	color: var(--clr-text-mid);
	margin-bottom: var(--space-xl);
}

/* ─── SITE FOOTER ────────────────────────────────────────── */
.site-footer {
	position: relative;
	background: var(--clr-header);
	color: rgba(253, 248, 240, 0.7);
	margin-top: var(--space-2xl);
}

.footer-torn {
	height: 26px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 26' preserveAspectRatio='none'%3E%3Cpath d='M0,26 Q20,5 40,18 Q60,30 80,10 Q100,-2 120,15 Q140,30 160,8 Q180,-3 200,18 Q220,35 240,10 Q260,-2 280,18 Q300,35 320,8 Q340,-2 360,18 Q380,35 400,10 Q420,-2 440,18 Q460,35 480,10 Q500,-2 520,18 Q540,35 560,10 Q580,-2 600,18 Q620,35 640,10 Q660,-2 680,18 Q700,35 720,10 Q740,-2 760,18 Q780,35 800,10 Q820,-2 840,18 Q860,35 880,10 Q900,-2 920,18 Q940,35 960,10 Q980,-2 1000,18 Q1020,35 1040,10 Q1060,-2 1080,18 Q1100,35 1120,10 Q1140,-2 1160,18 Q1180,35 1200,12 L1200,26 Z' fill='%232E2118'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	margin-top: -2px;
}

.footer-inner {
	max-width: 960px;
	margin: 0 auto;
	padding: var(--space-xl) var(--space-lg) var(--space-lg);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	text-align: center;
}

.footer-title {
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--clr-gold);
}
.footer-greek {
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-style: italic;
	opacity: 0.65;
}

.footer-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	justify-content: center;
}
.footer-navigation ul li a {
	font-family: var(--font-mono);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(253, 248, 240, 0.55);
	text-decoration: none;
	transition: color var(--transition);
}
.footer-navigation ul li a:hover { color: var(--clr-gold); }

.footer-copy {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	opacity: 0.4;
	margin: 0;
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 900px) {
	.content-sidebar-wrap { grid-template-columns: 1fr; }
	.widget-area { order: -1; }
}

@media (max-width: 768px) {
	.hero-section { padding: var(--space-xl) var(--space-md); min-height: 340px; }
	.hero-clip-3 { display: none; }
	.hero-clip-1 { width: 140px; right: 12px; }
	.hero-clip-2 { width: 110px; }
	.organization-decor { display: none; }
	.organization-inner { padding: var(--space-xl) var(--space-md); }
	.posts-grid { grid-template-columns: 1fr; }
	.post-navigation { grid-template-columns: 1fr; }
	.nav-next { text-align: left; }
	.menu-toggle { display: flex; }
	.main-navigation .nav-menu {
		display: none;
		position: absolute;
		top: 62px; left: 0; right: 0;
		background: var(--clr-header);
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--space-md) 0;
		box-shadow: 0 8px 16px rgba(0,0,0,.3);
	}
	.main-navigation .nav-menu.toggled { display: flex; }
	.main-navigation ul li a { padding: 12px 24px; }
	.single-post-wrap, .page-wrap { padding: var(--space-lg) var(--space-md); }
}

@media (max-width: 480px) {
	.hero-main-title { font-size: 2.8rem; }
	.site-title { display: none; }
	.posts-section { padding: var(--space-xl) var(--space-md); }
	.archive-wrap { padding: var(--space-lg) var(--space-md); }
}

/* ─── PRINT ──────────────────────────────────────────────── */
@media print {
	.site-header, .site-footer, body::before,
	.hero-collage, .search-overlay, .widget-area { display: none; }
	.entry-content { font-size: 12pt; }
}

/* ─── WORDPRESS REQUIRED CLASSES ─────────────────────────── */
.alignleft  { float: left; margin: 0 var(--space-md) var(--space-md) 0; }
.alignright { float: right; margin: 0 0 var(--space-md) var(--space-md); }
.aligncenter { display: block; margin: 0 auto var(--space-md); }
.alignwide  { margin-left: calc(-1 * var(--space-lg)); margin-right: calc(-1 * var(--space-lg)); }
.alignfull  { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-family: var(--font-mono); font-size: 0.78rem; color: var(--clr-text-light); font-style: italic; text-align: center; margin-top: var(--space-xs); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-sm); }
.gallery-item img { width: 100%; height: auto; }
.sticky { border-left: 4px solid var(--clr-gold); padding-left: var(--space-md); }