/* =========================================================
   KeKe's Art Space — gallery.css
   Gallery page · Warm editorial gallery aesthetic
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
	--paper:       #f6f2ea;
	--paper-2:     #fffdf9;
	--ink:         #1c1a17;
	--ink-soft:    #6b635a;
	--line:        rgba(28,26,23,.13);
	--accent:      #12666e;
	--accent-soft: #e4eeef;
	--gold:        #b9873f;

	--radius-sm: 8px;
	--radius:    14px;
	--radius-lg: 20px;

	--shadow:      0 1px 2px rgba(28,26,23,.04), 0 18px 40px -28px rgba(28,26,23,.35);
	--shadow-soft: 0 22px 55px -32px rgba(28,26,23,.5);

	--transition: .35s cubic-bezier(.22,.61,.36,1);
	--container: 1180px;

	--font-display: "Fraunces", "Times New Roman", serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

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

body{
	font-family:var(--font-body);
	font-size:16px;
	font-weight:400;
	line-height:1.75;
	background:var(--paper);
	color:var(--ink);
	overflow-x:hidden;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

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

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

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

::selection{
	background:var(--accent);
	color:var(--paper);
}

/* ---------- Shared type ---------- */
h2{
	font-family:var(--font-display);
	font-weight:400;
	font-size:clamp(1.9rem, 4vw, 2.9rem);
	line-height:1.1;
	letter-spacing:-.015em;
	color:var(--ink);
}

.eyebrow{
	font-size:.7rem;
	font-weight:500;
	letter-spacing:.26em;
	text-transform:uppercase;
	color:var(--accent);
	margin-bottom:.6rem;
}

.section-head{
	text-align:center;
	max-width:680px;
	margin:0 auto 42px;
}

.section-head::after{
	content:"";
	display:block;
	width:40px;
	height:1px;
	margin:14px auto 0;
	background:var(--line);
}

.section-sub{
	margin-top:14px;
	font-size:1.02rem;
	color:var(--ink-soft);
}

/* ---------- Sections ---------- */
.section{
	max-width:var(--container);
	margin-inline:auto;
	padding:64px clamp(20px, 5vw, 40px);
}

.js section{
	opacity:0;
	transform:translateY(22px);
	transition:opacity .75s ease, transform .75s cubic-bezier(.22,.61,.36,1);
}

.js section.show{
	opacity:1;
	transform:none;
}

/* ---------- Buttons ---------- */
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	padding:14px 30px;
	border-radius:999px;
	font-size:.78rem;
	font-weight:500;
	letter-spacing:.14em;
	text-transform:uppercase;
	transition:transform var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
}

.btn-light{
	background:var(--paper);
	color:var(--ink);
	box-shadow:0 10px 30px -14px rgba(0,0,0,.5);
}

.btn-light:hover{
	background:#fff;
	transform:translateY(-2px);
	box-shadow:0 18px 38px -16px rgba(0,0,0,.55);
}

/* =========================================================
   Header
   ========================================================= */
header{
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:1000;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;
	padding:16px clamp(20px, 5vw, 56px);
	border-bottom:1px solid transparent;
	transition:background var(--transition), padding var(--transition), border-color var(--transition);
}

header.scrolled{
	padding-top:9px;
	padding-bottom:9px;
	background:rgba(246,242,234,.88);
	-webkit-backdrop-filter:blur(16px) saturate(1.3);
	backdrop-filter:blur(16px) saturate(1.3);
	border-bottom-color:var(--line);
}

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

.logo img{
	height:46px;
	width:auto;
	object-fit:contain;
	transition:height var(--transition);
}

header.scrolled .logo img{
	height:38px;
}

nav{
	display:flex;
	align-items:center;
	gap:28px;
}

nav a{
	position:relative;
	font-size:.82rem;
	font-weight:500;
	letter-spacing:.03em;
	color:#fff;
	transition:color var(--transition), opacity var(--transition);
}

header.scrolled nav a{
	color:var(--ink);
}

nav a::after{
	content:"";
	position:absolute;
	left:0;
	bottom:-6px;
	width:100%;
	height:1px;
	background:currentColor;
	transform:scaleX(0);
	transform-origin:left;
	transition:transform var(--transition);
}

nav a:hover::after,
nav a.active::after{
	transform:scaleX(1);
}

nav a:hover{
	opacity:.85;
}

nav a.active{
	opacity:1;
}

.nav-cta{
	padding:9px 20px;
	border:1px solid rgba(255,255,255,.45);
	border-radius:999px;
	transition:background var(--transition), color var(--transition), border-color var(--transition);
}

header.scrolled .nav-cta{
	border-color:var(--line);
}

.nav-cta::after{
	display:none;
}

header .nav-cta:hover{
	background:var(--ink);
	border-color:var(--ink);
	color:var(--paper);
	opacity:1;
}

/* burger */
.nav-toggle{
	display:none;
	flex-direction:column;
	justify-content:center;
	gap:6px;
	width:42px;
	height:42px;
	background:transparent;
	border:none;
	cursor:pointer;
	padding:0;
}

.nav-toggle span{
	display:block;
	width:24px;
	height:1.5px;
	margin-inline:auto;
	background:#fff;
	transition:transform var(--transition), background var(--transition), opacity var(--transition);
}

header.scrolled .nav-toggle span,
header.menu-open .nav-toggle span{
	background:var(--ink);
}

header.menu-open .nav-toggle span:first-child{
	transform:translateY(3.75px) rotate(45deg);
}

header.menu-open .nav-toggle span:last-child{
	transform:translateY(-3.75px) rotate(-45deg);
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
	position:relative;
	display:grid;
	place-items:center;
	text-align:center;
	padding:130px 24px 80px;
	background:
		linear-gradient(180deg, rgba(14,13,11,.62) 0%, rgba(14,13,11,.34) 42%, rgba(14,13,11,.68) 100%),
		url("images/keke27.jpeg") center/cover no-repeat;
	color:#fff;
}

.gallery-hero{
	min-height:52vh;
	min-height:52svh;
}

.hero-inner{
	max-width:820px;
}

.hero .eyebrow{
	color:rgba(255,255,255,.78);
}

.hero h1{
	font-family:var(--font-display);
	font-weight:300;
	font-size:clamp(2.4rem, 7vw, 4.8rem);
	line-height:1.02;
	letter-spacing:-.025em;
	margin-bottom:.5rem;
}

.hero-sub{
	font-size:clamp(.85rem, 1.8vw, 1rem);
	font-weight:300;
	letter-spacing:.2em;
	text-transform:uppercase;
	opacity:.9;
}

/* =========================================================
   Gallery masonry
   ========================================================= */
.gallery-section{
	max-width:var(--container);
	margin-inline:auto;
	padding:64px clamp(20px, 5vw, 40px) 30px;
}

.gallery-masonry{
	columns:3 260px;
	column-gap:20px;
}

/* ---------- Gallery item ---------- */
.gallery-item{
	position:relative;
	display:block;
	width:100%;
	margin:0 0 20px;
	padding:0;
	border:none;
	background:var(--paper-2);
	border-radius:var(--radius);
	overflow:hidden;
	cursor:zoom-in;
	line-height:0;
	break-inside:avoid;
	-webkit-column-break-inside:avoid;
	page-break-inside:avoid;
	box-shadow:var(--shadow);
	transition:
		transform .5s cubic-bezier(.22,.61,.36,1),
		box-shadow .5s ease,
		opacity .8s ease;
}

.gallery-item img{
	width:100%;
	height:auto;
	display:block;
	transition:transform 1.1s cubic-bezier(.22,.61,.36,1), filter .5s ease;
	filter:saturate(.96);
}

/* soft gradient veil */
.gallery-item::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(to top, rgba(14,13,11,.42), rgba(14,13,11,0) 55%);
	opacity:0;
	transition:opacity var(--transition);
	pointer-events:none;
}

.gallery-item:hover{
	transform:translateY(-4px);
	box-shadow:var(--shadow-soft);
}

.gallery-item:hover img{
	transform:scale(1.045);
	filter:saturate(1.04);
}

.gallery-item:hover::after{
	opacity:1;
}

/* zoom badge */
.gallery-zoom{
	position:absolute;
	left:50%;
	top:50%;
	z-index:2;
	display:grid;
	place-items:center;
	width:48px;
	height:48px;
	margin:-24px 0 0 -24px;
	border-radius:50%;
	background:rgba(246,242,234,.94);
	color:var(--ink);
	font-family:var(--font-display);
	font-size:1.4rem;
	font-weight:300;
	line-height:1;
	box-shadow:0 10px 26px -12px rgba(0,0,0,.5);
	opacity:0;
	transform:scale(.7);
	transition:opacity var(--transition), transform var(--transition);
	pointer-events:none;
}

.gallery-item:hover .gallery-zoom,
.gallery-item:focus-visible .gallery-zoom{
	opacity:1;
	transform:scale(1);
}

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

/* staggered reveal */
.js .gallery-item{
	opacity:0;
	transform:translateY(24px);
}

.js .gallery-item.show{
	opacity:1;
	transform:none;
}

/* =========================================================
   Lightbox
   ========================================================= */
body.lightbox-open{
	overflow:hidden;
}

.lightbox{
	position:fixed;
	inset:0;
	z-index:2000;
	display:grid;
	grid-template-columns:auto 1fr auto;
	grid-template-rows:1fr auto;
	align-items:center;
	justify-items:center;
	gap:0 clamp(10px, 3vw, 40px);
	padding:clamp(60px, 8vh, 90px) clamp(16px, 4vw, 60px) clamp(50px, 7vh, 70px);
	background:rgba(12,11,10,.95);
	-webkit-backdrop-filter:blur(14px) saturate(1.1);
	backdrop-filter:blur(14px) saturate(1.1);
	opacity:0;
	visibility:hidden;
	transition:opacity .35s ease, visibility .35s ease;
}

.lightbox.open{
	opacity:1;
	visibility:visible;
}

.lightbox-figure{
	grid-column:2;
	grid-row:1;
	display:grid;
	place-items:center;
	max-width:min(1100px, 100%);
	max-height:100%;
	margin:0;
}

.lightbox-figure img{
	max-width:100%;
	max-height:calc(100svh - 170px);
	width:auto;
	height:auto;
	object-fit:contain;
	border-radius:var(--radius-sm);
	box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
	animation:lightboxIn .45s cubic-bezier(.22,.61,.36,1);
}

@keyframes lightboxIn{
	from{ opacity:0; transform:scale(.965); }
	to{ opacity:1; transform:none; }
}

/* close */
.lightbox-close{
	position:absolute;
	top:22px;
	right:26px;
	display:grid;
	place-items:center;
	width:46px;
	height:46px;
	border-radius:50%;
	background:rgba(246,242,234,.1);
	color:var(--paper);
	font-size:1.7rem;
	font-weight:300;
	line-height:1;
	transition:background var(--transition), color var(--transition), transform var(--transition);
}

.lightbox-close:hover{
	background:var(--paper);
	color:var(--ink);
	transform:rotate(90deg);
}

/* arrows */
.lightbox-arrow{
	display:grid;
	place-items:center;
	width:52px;
	height:52px;
	border-radius:50%;
	border:1px solid rgba(246,242,234,.22);
	background:transparent;
	color:var(--paper);
	font-size:.85rem;
	transition:background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}

.lightbox-arrow:hover{
	background:var(--paper);
	border-color:var(--paper);
	color:var(--ink);
	transform:scale(1.06);
}

.lightbox-prev{ grid-column:1; grid-row:1; }
.lightbox-next{ grid-column:3; grid-row:1; }

/* counter */
.lightbox-counter{
	grid-column:1 / -1;
	grid-row:2;
	margin-top:clamp(18px, 3vh, 30px);
	font-size:.74rem;
	font-weight:500;
	letter-spacing:.3em;
	text-transform:uppercase;
	color:rgba(246,242,234,.6);
}

/* =========================================================
   CTA
   ========================================================= */
.cta-section{
	max-width:100%;
	padding:80px clamp(20px, 5vw, 40px);
	background:var(--ink);
	color:var(--paper);
	text-align:center;
}

.cta-inner{
	max-width:640px;
	margin-inline:auto;
}

.cta-section .eyebrow{
	color:rgba(246,242,234,.6);
}

.cta-section h2{
	color:var(--paper);
	margin-bottom:14px;
}

.cta-section p{
	margin-bottom:30px;
	font-size:1.02rem;
	color:rgba(246,242,234,.72);
}

/* =========================================================
   Footer
   ========================================================= */
footer{
	margin-top:0;
	padding:44px 24px;
	background:var(--ink);
	color:rgba(246,242,234,.72);
	text-align:center;
	border-top:1px solid rgba(246,242,234,.1);
}

footer p:first-child{
	font-family:var(--font-display);
	font-size:1.15rem;
	letter-spacing:-.005em;
	color:var(--paper);
	margin-bottom:6px;
}

footer p:last-child{
	font-size:.74rem;
	letter-spacing:.26em;
	text-transform:uppercase;
}

/* =========================================================
   Floating WhatsApp
   ========================================================= */
.floating-whatsapp{
	position:fixed;
	right:22px;
	bottom:22px;
	z-index:999;
	display:grid;
	place-items:center;
	width:56px;
	height:56px;
	border-radius:50%;
	background:#1faa59;
	color:#fff;
	box-shadow:0 14px 34px -12px rgba(31,170,89,.7);
	transition:transform var(--transition), box-shadow var(--transition);
}

.floating-whatsapp:hover{
	transform:translateY(-3px) scale(1.05);
	box-shadow:0 20px 40px -14px rgba(31,170,89,.8);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px){
	.gallery-masonry{
		columns:3 200px;
		column-gap:16px;
	}

	.gallery-item{
		margin-bottom:16px;
	}
}

@media (max-width: 980px){

	.nav-toggle{
		display:flex;
	}

	nav#siteNav{
		position:absolute;
		top:100%;
		left:0;
		right:0;
		flex-direction:column;
		align-items:stretch;
		gap:0;
		padding:10px clamp(20px, 5vw, 40px) 20px;
		background:rgba(246,242,234,.98);
		-webkit-backdrop-filter:blur(16px);
		backdrop-filter:blur(16px);
		border-bottom:1px solid var(--line);
		opacity:0;
		transform:translateY(-10px);
		pointer-events:none;
		transition:opacity var(--transition), transform var(--transition);
	}

	header.menu-open nav#siteNav{
		opacity:1;
		transform:none;
		pointer-events:auto;
	}

	header.menu-open{
		background:rgba(246,242,234,.98);
		border-bottom-color:var(--line);
	}

	nav#siteNav a{
		width:100%;
		padding:12px 0;
		border-bottom:1px solid var(--line);
		color:var(--ink);
	}

	nav#siteNav a::after{
		display:none;
	}

	nav#siteNav a.active{
		color:var(--accent);
	}

	nav#siteNav a:last-child{
		border-bottom:none;
	}

	.nav-cta{
		margin-top:12px;
		text-align:center;
		justify-content:center;
		display:flex;
		border-color:var(--line);
	}

	.hero{
		min-height:auto;
		padding:120px 22px 66px;
	}

	.gallery-hero{
		min-height:auto;
	}

	.section,
	.gallery-section{
		padding:52px clamp(20px, 5vw, 32px) 24px;
	}

	.section-head{
		margin-bottom:30px;
	}

	.cta-section{
		padding:60px 22px;
	}
}

@media (max-width: 720px){
	.gallery-masonry{
		columns:2 150px;
		column-gap:14px;
	}

	.gallery-item{
		margin-bottom:14px;
		border-radius:12px;
	}

	.gallery-zoom{
		width:42px;
		height:42px;
		margin:-21px 0 0 -21px;
		font-size:1.2rem;
	}

	.lightbox{
		grid-template-columns:1fr;
		grid-template-rows:1fr auto auto;
		padding:70px 16px 30px;
		gap:0;
	}

	.lightbox-figure{
		grid-column:1;
		grid-row:1;
	}

	.lightbox-prev,
	.lightbox-next{
		grid-row:2;
		position:absolute;
		bottom:24px;
		width:46px;
		height:46px;
	}

	.lightbox-prev{ left:calc(50% - 62px); }
	.lightbox-next{ right:calc(50% - 62px); }

	.lightbox-counter{
		grid-row:3;
		margin-top:16px;
	}
}

@media (max-width: 520px){

	.hero h1{
		font-size:2.4rem;
	}

	.gallery-masonry{
		columns:1;
		column-gap:0;
	}

	.gallery-item{
		margin-bottom:16px;
	}

	.btn{
		width:100%;
	}

	.floating-whatsapp{
		width:50px;
		height:50px;
		right:16px;
		bottom:16px;
	}

	footer{
		padding:36px 20px;
	}

	.lightbox-close{
		top:16px;
		right:16px;
		width:42px;
		height:42px;
		font-size:1.5rem;
	}
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){

	html{
		scroll-behavior:auto;
	}

	*,
	*::before,
	*::after{
		animation-duration:.001ms !important;
		animation-iteration-count:1 !important;
		transition-duration:.001ms !important;
	}

	.js section,
	.js .gallery-item{
		opacity:1;
		transform:none;
	}
}