/* Ana Villafana — style sheet (editorial / revue theme) */

:root
{
	--paper: #f3efe7;
	--ink: #171512;
	--soft: #8b8577;
	--line: rgba(23, 21, 18, 0.18);
	--font-display: "Instrument Serif", Georgia, serif;
	--font-body: "Manrope", "Segoe UI", sans-serif;
	--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*
{
	box-sizing: border-box;
}

[hidden]
{
	display: none !important;
}

html
{
	background: var(--paper);
}

body
{
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

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

button
{
	font-family: var(--font-body);
}

@keyframes rise
{
	from
	{
		opacity: 0;
		transform: translateY(22px);
	}
	to
	{
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fade
{
	from
	{
		opacity: 0;
	}
	to
	{
		opacity: 1;
	}
}

/* ---------- Masthead ---------- */

.mast
{
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: baseline;
	gap: 32px;
	padding: 16px 40px;
	background: var(--paper);
	border-bottom: 1px solid var(--ink);
	animation: fade 0.6s ease-out both;
}

.rule
{
	margin-top: 3px;
	border-bottom: 1px solid var(--ink);
}

.mast-brand
{
	font-family: var(--font-display);
	font-size: 1.5rem;
	line-height: 1;
}

.mast-nav
{
	display: flex;
	gap: 26px;
}

.mast-nav a
{
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s;
}

.mast-nav a:hover
{
	border-bottom-color: var(--ink);
}

.mast-nav a.on
{
	border-bottom-color: var(--ink);
}

.lang
{
	margin-left: auto;
	display: flex;
	gap: 12px;
}

.lang a
{
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--soft);
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	transition: color 0.2s, border-color 0.2s;
}

.lang a.on
{
	color: var(--ink);
	border-bottom-color: var(--ink);
}

/* ---------- Page frame ---------- */

.page
{
	max-width: 1200px;
	margin: 0 auto;
	padding: 44px 40px 70px;
}

.page-label
{
	margin: 0 0 24px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--soft);
}

.foot
{
	margin-top: 70px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--soft);
}

/* ---------- Home ---------- */

.front
{
	margin-bottom: 52px;
}

.front-kicker
{
	margin: 0 0 18px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--soft);
	animation: rise 0.7s var(--ease-out) 0.05s both;
}

.front-title
{
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(3.6rem, 11vw, 8.5rem);
	line-height: 0.95;
	letter-spacing: -0.01em;
	animation: rise 0.9s var(--ease-out) 0.12s both;
}

.picks
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px 36px;
	counter-reset: pick;
}

.pick
{
	counter-increment: pick;
	display: block;
	animation: rise 0.8s var(--ease-out) both;
}

.pick:nth-child(1)
{
	animation-delay: 0.2s;
}

.pick:nth-child(2)
{
	animation-delay: 0.3s;
}

.pick:nth-child(3)
{
	animation-delay: 0.38s;
}

.pick:nth-child(4)
{
	animation-delay: 0.46s;
}

.pick:nth-child(5)
{
	animation-delay: 0.54s;
}

.pick:first-child
{
	grid-column: 1 / -1;
}

.pick-img
{
	position: relative;
	display: block;
	overflow: hidden;
}

.pick-img img
{
	width: 100%;
	transition: transform 0.8s var(--ease-out);
}

.pick:first-child .pick-img img
{
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.pick:not(:first-child) .pick-img img
{
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.pick:hover .pick-img img
{
	transform: scale(1.03);
}

.video-badge
{
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(23, 21, 18, 0.82);
	color: #ffffff;
	font-size: 11px;
	display: grid;
	place-items: center;
}

.pick-cap
{
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--line);
}

.pick-num::before
{
	content: counter(pick, decimal-leading-zero);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--soft);
}

.pick-title
{
	font-family: var(--font-display);
	font-size: 1.4rem;
	line-height: 1.2;
}

.pick:hover .pick-title
{
	font-style: italic;
}

.pick-cat
{
	margin-left: auto;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--soft);
}

/* ---------- Portfolio : index rows ---------- */

.cats
{
	border-top: 1px solid var(--ink);
}

.cats a
{
	display: flex;
	align-items: baseline;
	gap: 22px;
	padding: 20px 12px;
	border-bottom: 1px solid var(--line);
	transition: background 0.25s, color 0.25s, padding-left 0.3s var(--ease-out);
	animation: rise 0.7s var(--ease-out) both;
}

.cats a:nth-child(1)
{
	animation-delay: 0.08s;
}

.cats a:nth-child(2)
{
	animation-delay: 0.14s;
}

.cats a:nth-child(3)
{
	animation-delay: 0.2s;
}

.cats a:nth-child(4)
{
	animation-delay: 0.26s;
}

.cats a:nth-child(5)
{
	animation-delay: 0.32s;
}

.cats a:nth-child(n+6)
{
	animation-delay: 0.38s;
}

.cats a:hover,
.cats a.on
{
	background: var(--ink);
	color: var(--paper);
}

.cats a:hover
{
	padding-left: 22px;
}

.cats a:hover .row-name,
.cats a.on .row-name
{
	font-style: italic;
}

.row-num
{
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
}

.row-name
{
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	line-height: 1.05;
}

.row-count
{
	margin-left: auto;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
}

/* Floating cursor preview */

.peek
{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 200;
	width: 230px;
	aspect-ratio: 4 / 3;
	pointer-events: none;
	overflow: hidden;
	background: var(--ink);
	opacity: 0;
	transform: translate(-50%, -115%) rotate(-4deg) scale(0.9);
	transition: opacity 0.25s, transform 0.25s var(--ease-out);
}

.peek.on
{
	opacity: 1;
	transform: translate(-50%, -115%) rotate(-2deg) scale(1);
}

.peek img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Category view ---------- */

.cat
{
	margin-top: 56px;
}

.cat .cat-head
{
	animation: rise 0.6s var(--ease-out) both;
}

.cat-head
{
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 22px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ink);
}

.cat-num
{
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--soft);
}

.cat-name
{
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	line-height: 1;
}

.rows
{
	counter-reset: ser;
	border-top: 1px solid var(--line);
}

.card
{
	counter-increment: ser;
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 18px 12px;
	border-bottom: 1px solid var(--line);
	transition: background 0.25s, color 0.25s, padding-left 0.3s var(--ease-out);
	animation: rise 0.6s var(--ease-out) 0.12s both;
}

.card::before
{
	content: counter(ser, decimal-leading-zero);
	min-width: 2ch;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--soft);
}

.card:hover
{
	background: var(--ink);
	color: var(--paper);
	padding-left: 22px;
}

.card:hover::before
{
	color: var(--paper);
}

.card:hover .card-name
{
	font-style: italic;
}

.card-name
{
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	line-height: 1.15;
}

.card-count
{
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	white-space: nowrap;
}

.card-thumb
{
	position: relative;
	margin-left: auto;
	width: 92px;
	flex: 0 0 auto;
}

.card-thumb img
{
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ---------- Series ---------- */

.series
{
	margin-top: 56px;
}

.series .back
{
	animation: rise 0.6s var(--ease-out) both;
}

.series .series-title
{
	animation: rise 0.7s var(--ease-out) 0.06s both;
}

.series .desc
{
	animation: rise 0.7s var(--ease-out) 0.12s both;
}

.series .video
{
	animation: rise 0.7s var(--ease-out) 0.18s both;
}

.series .gallery
{
	animation: rise 0.7s var(--ease-out) 0.24s both;
}

.back
{
	display: inline-block;
	margin-bottom: 18px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--soft);
	transition: color 0.2s, transform 0.25s var(--ease-out);
}

.back:hover
{
	color: var(--ink);
	transform: translateX(-4px);
}

.series-title
{
	margin: 0 0 26px;
	max-width: 900px;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(2.4rem, 6vw, 4.4rem);
	line-height: 1.02;
}

.desc
{
	max-width: 60ch;
	margin-bottom: 38px;
}

.desc p
{
	margin: 0 0 1.2em;
	color: #3f3c35;
	line-height: 1.8;
}

.video
{
	max-width: 900px;
	margin-bottom: 40px;
}

.video iframe
{
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

.video-poster
{
	position: relative;
	cursor: pointer;
}

.video-poster img
{
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.play
{
	position: absolute;
	inset: 0;
	margin: auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(23, 21, 18, 0.82);
	color: #ffffff;
	font-size: 17px;
	display: grid;
	place-items: center;
	transition: transform 0.3s var(--ease-out);
}

.video-poster:hover .play
{
	transform: scale(1.1);
}

.video-actions
{
	margin: 10px 0 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--soft);
}

.vimeo
{
	color: var(--ink);
	text-decoration: underline;
}

.gallery
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 30px 26px;
}

.shot
{
	display: block;
	overflow: hidden;
}

.shot img
{
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.8s var(--ease-out);
}

.shot:hover img
{
	transform: scale(1.03);
}

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

.lightbox
{
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(19, 18, 15, 0.96);
	animation: fade 0.25s ease-out;
}

.lb-img
{
	max-width: 90vw;
	max-height: 80vh;
	object-fit: contain;
	animation: rise 0.35s var(--ease-out) both;
}

.lb-cap
{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 22px;
	margin: 0;
	text-align: center;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(243, 239, 231, 0.75);
}

.lb-close,
.lb-prev,
.lb-next
{
	position: absolute;
	z-index: 101;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(243, 239, 231, 0.35);
	border-radius: 50%;
	background: transparent;
	color: #f3efe7;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.25s, transform 0.25s var(--ease-out);
}

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover
{
	background: rgba(243, 239, 231, 0.15);
	transform: scale(1.08);
}

.lb-close
{
	top: 20px;
	right: 20px;
}

.lb-prev
{
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
}

.lb-next
{
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
}

.lb-prev:hover
{
	transform: translateY(-50%) scale(1.08);
}

.lb-next:hover
{
	transform: translateY(-50%) scale(1.08);
}

/* ---------- About / contact ---------- */

.about-grid
{
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 48px;
}

.about-name
{
	margin: 8px 0 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(2.8rem, 7vw, 5rem);
	line-height: 1;
	animation: rise 0.8s var(--ease-out) 0.1s both;
}

.origin
{
	margin: 0 0 26px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--soft);
}

.bio p
{
	margin: 0 0 1.2em;
	max-width: 60ch;
	color: #3f3c35;
	line-height: 1.8;
}

.mail
{
	display: inline-block;
	margin: 22px 0 6px;
	padding-bottom: 6px;
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 5vw, 3.4rem);
	line-height: 1.1;
	border-bottom: 1px solid var(--ink);
	transition: opacity 0.2s;
}

.mail:hover
{
	opacity: 0.6;
}

.city
{
	margin-top: 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--soft);
}

/* ---------- Mobile ---------- */

@media (max-width: 860px)
{
	.mast
	{
		flex-wrap: wrap;
		gap: 10px 22px;
		padding: 14px 20px;
	}

	.mast-nav
	{
		order: 3;
		width: 100%;
		gap: 18px;
		padding-top: 4px;
	}

	.page
	{
		padding: 30px 20px 50px;
	}

	.picks
	{
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.pick:first-child .pick-img img,
	.pick:not(:first-child) .pick-img img
	{
		aspect-ratio: 4 / 3;
	}

	.row-name
	{
		font-size: 1.5rem;
	}

	.card-thumb
	{
		width: 64px;
	}

	.about-grid
	{
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce)
{
	*
	{
		animation-duration: 0.01ms !important;
		animation-delay: 0s !important;
		transition-duration: 0.01ms !important;
	}
}