/*
Theme Name: Maria Pan
Description: Minimal portfolio: fixed sidebar with name, logo, categories and a chronological project list; thumbnail grid on the right.
Version: 1.4.1
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: mariapan
*/

:root {
	--ink: rgba(0, 0, 0, 0.78);
	--ink-strong: #000;
	--muted: rgba(0, 0, 0, 0.45);
	--faint: rgba(0, 0, 0, 0.08);
	--bg: #fff;
	--accent: #d9381e;

	--sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
	--mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	--pad: 2.1rem;
	--sidebar: 22%;
	--gap: 2.4rem;
}

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

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.3;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ink-strong); }
a:active { opacity: 0.7; }
a:focus-visible, button:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }

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

h1, h2, h3, h4 { margin: 0; font-weight: 500; color: var(--ink); }

.screen-reader-text, .skip-link:not(:focus) {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link:focus { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 100; background: var(--bg); padding: 0.5rem 0.8rem; }

/* ---------------------------------------------------------------------
 * Layout
 * ------------------------------------------------------------------ */
.site { display: flex; align-items: flex-start; min-height: 100vh; }

.sidebar {
	position: sticky;
	top: 0;
	flex: 0 0 var(--sidebar);
	min-width: 17rem;
	max-width: 24rem;
	height: 100vh;
	overflow-y: auto;
	scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }
.sidebar-inner { padding: var(--pad); }

.main {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--pad) var(--pad) 5rem;
	outline: none;
}

/* ---------------------------------------------------------------------
 * Sidebar
 * ------------------------------------------------------------------ */
.site-title {
	font-size: 2.1rem;
	font-weight: 200;
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: lowercase;
}

.menu-toggle { display: none; }
.mobile-logo { display: none; }

.site-logo { display: block; margin: 2.6rem 0 2.4rem; max-width: 15rem; }
.site-logo-img { width: 100%; }
.logo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 537 / 163;
	border: 1px dashed var(--muted);
	font: 0.75rem/1 var(--mono);
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.cat-nav {
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.35;
	margin-bottom: 1.6rem;
}
.cat-nav .sep { color: var(--muted); font-weight: 300; }
.cat-nav a.is-active { color: var(--ink-strong); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

.list-note {
	margin: 0 0 1.4rem;
	font: 0.72rem/1.25 var(--mono);
	color: var(--muted);
}

.project-list, .link-list, .plain-list { list-style: none; margin: 0; padding: 0; }
.project-list { margin-bottom: 2.6rem; font-size: 0.98rem; line-height: 1.32; }
.project-list a { display: inline-flex; align-items: baseline; gap: 0.55em; }
.project-list li.is-active a { font-weight: 600; color: var(--ink-strong); }
.project-list li.is-dim a { color: var(--muted); }
.project-list li.is-dim a:hover { color: var(--ink-strong); }

.link-list { font-size: 0.98rem; line-height: 1.32; }
.link-list li + li { margin-top: 0; }
.link-list .current-menu-item > a { font-weight: 600; color: var(--ink-strong); }
.link-list li:first-child { margin-bottom: 1.3rem; }

/* ---------------------------------------------------------------------
 * Thumbnail grid
 * ------------------------------------------------------------------ */
.thumb-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3rem var(--gap);
	max-width: 90rem;
	margin-left: auto;
}
.thumb a { display: block; }
.thumb-media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--faint);
}
.thumb-media img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.25s ease; }
.thumb a:hover .thumb-media img { opacity: 0.85; }
.thumb-title { display: block; margin-top: 0.75rem; font-size: 0.98rem; font-weight: 400; color: var(--ink); }
.thumb-tags { display: block; margin-top: 0.2rem; font: 0.72rem/1.3 var(--mono); color: var(--muted); }

.thumb-placeholder {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	background:
		linear-gradient(to top right, transparent calc(50% - 0.5px), rgba(0,0,0,0.08) 50%, transparent calc(50% + 0.5px)),
		linear-gradient(to top left, transparent calc(50% - 0.5px), rgba(0,0,0,0.08) 50%, transparent calc(50% + 0.5px)),
		#f2f1ee;
}
.thumb-placeholder span {
	font: 0.68rem/1 var(--mono);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--muted);
	background: #f2f1ee;
	padding: 0.35rem 0.5rem;
}

.home-title {
	max-width: 90rem;
	margin: 0 0 3rem auto;
	font-size: clamp(1.35rem, 2.1vw, 2rem);
	font-weight: 200;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--ink);
}
.archive-head { margin-bottom: 2.4rem; max-width: 90rem; margin-left: auto; }
.archive-title { font-size: 1.5rem; font-weight: 300; }
.archive-desc { margin-top: 0.6rem; max-width: 38rem; color: var(--muted); }

.empty { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }

/* ---------------------------------------------------------------------
 * Single project / page
 * ------------------------------------------------------------------ */
.entry {
	display: grid;
	grid-template-columns: minmax(12rem, 2fr) 10fr;
	gap: var(--gap);
	align-items: start;
	max-width: 90rem;
	margin-left: auto;
}
.entry-head { text-align: right; position: sticky; top: var(--pad); }
.entry-title { font-size: 1.6rem; font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; }
.entry-meta { margin: 0.8rem 0 0; font: 0.72rem/1.4 var(--mono); color: var(--muted); }
.entry-meta a:hover { color: var(--ink-strong); }
.entry-credits { margin-top: 1.4rem; font: 0.72rem/1.4 var(--mono); color: var(--muted); }
.entry-credits p { margin: 0 0 0.6em; }
.entry-credits strong, .entry-credits b { color: var(--ink); font-weight: 600; }

.entry-content { min-width: 0; font-size: 1rem; line-height: 1.38; }
.entry-content > * { margin-top: 0; margin-bottom: 1.6rem; }
.entry-content p { margin: 0 0 1em; }
.entry-content h2 { font-size: 1.3rem; font-weight: 500; margin: 2.4rem 0 0.8rem; }
.entry-content h3 { font-size: 1.05rem; font-weight: 600; margin: 2rem 0 0.6rem; }
.entry-content a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.entry-content em, .entry-content i { font-style: italic; }
.entry-content strong, .entry-content b { font-weight: 600; }
.entry-content small, .entry-content figcaption,
.entry-content .wp-element-caption {
	font: 0.72rem/1.35 var(--mono);
	color: var(--muted);
	text-align: left;
	margin-top: 0.6rem;
}
.entry-content .wp-block-columns { gap: var(--gap); margin-bottom: 2.6rem; }
.entry-content .wp-block-column > :last-child { margin-bottom: 0; }
.entry-content .wp-block-image { margin: 0 0 1.6rem; }
.entry-content .wp-block-gallery { gap: var(--gap); }
.entry-content .wp-block-separator { border: 0; height: 1px; background: var(--faint); margin: 2.6rem 0; }
.entry-content .is-style-translation, .entry-content .translation { color: var(--muted); font-style: italic; }
.entry-content .has-text-align-right { text-align: right; }

/* Project fields: texts + media */
.entry-text { display: grid; grid-template-columns: minmax(0, 38rem); gap: var(--gap); margin-bottom: 2.8rem; }
.entry-text--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 76rem; }
.entry-text-col > :last-child { margin-bottom: 0; }
/* A paragraph that is entirely bold reads as a pull quote. */
.entry-text-col p > strong:only-child {
	display: block;
	font-size: 1.45rem;
	font-weight: 600;
	font-style: normal;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin-bottom: 0.4em;
}

.entry-media { display: grid; gap: 2.4rem; }
.media-row { display: grid; gap: var(--gap); }
.media-row--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.media-row--portrait .media { max-width: calc(50% - var(--gap) / 2); }
.media { margin: 0; }
.media img, .media video { display: block; width: 100%; height: auto; background: var(--faint); }

.status-tag {
	display: inline-block;
	padding: 0.1em 0.4em;
	background: var(--accent);
	color: #fff;
	font: 600 0.68rem/1.3 var(--mono);
	text-transform: lowercase;
}

.entry-pager {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	max-width: 90rem;
	margin: 4rem 0 0 auto;
	padding-top: 1.2rem;
	border-top: 1px solid var(--faint);
	font: 0.75rem/1.3 var(--mono);
	color: var(--muted);
}
.entry-pager a:hover { color: var(--ink-strong); }

/* ---------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------ */
@media (max-width: 1200px) {
	.thumb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	:root { --pad: 1rem; --gap: 1.2rem; }

	.site { display: block; }
	.sidebar {
		position: sticky;
		top: 0;
		z-index: 10;
		width: 100%;
		max-width: none;
		height: auto;
		max-height: 100vh;
		background: var(--bg);
	}
	.sidebar-head { display: flex; align-items: center; gap: 0.8rem; }
	.mobile-logo { display: block; flex: 0 0 auto; width: 3.4rem; }
	.mobile-logo img { width: 100%; height: auto; }
	.sidebar-body .site-logo { display: none; }
	.menu-toggle { margin-left: auto; }
	.site-title { font-size: 1.6rem; }

	.menu-toggle {
		display: inline-block;
		background: none;
		border: 0;
		padding: 0.4rem 0;
		font: 0.75rem/1 var(--mono);
		color: var(--ink);
		text-transform: lowercase;
		cursor: pointer;
	}
	.menu-toggle-close { display: none; }
	.sidebar.is-open .menu-toggle-open { display: none; }
	.sidebar.is-open .menu-toggle-close { display: inline; }

	.js .sidebar-body { display: none; padding: 1.6rem 0 1.5rem; }
	.js .sidebar.is-open .sidebar-body { display: block; }
	.sidebar.is-open { height: 100vh; }
	.site-logo { margin: 1.6rem 0; max-width: 12rem; }

	.thumb-grid { grid-template-columns: 1fr; gap: 2.2rem; }
	.home-title { margin-bottom: 1.8rem; }

	.entry { grid-template-columns: 1fr; gap: 1.4rem; }
	.entry-head { position: static; text-align: left; }
	.entry-title { font-size: 1.4rem; }
	.entry-content .wp-block-columns { gap: 1rem; }
	.entry-text--two, .media-row--pair { grid-template-columns: 1fr; }
	.media-row--portrait .media { max-width: none; }
	.entry-media { gap: 1.4rem; }
}

/* Tablets in portrait: keep the compact header, but use two columns. */
@media (min-width: 600px) and (max-width: 860px) {
	.thumb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.6rem var(--gap); }
	.entry-text--two, .media-row--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.media-row--portrait .media { max-width: calc(50% - var(--gap) / 2); }
}

/* ---------------------------------------------------------------------
 * Micro-interactions
 * Ink as the motif: a choreographed entrance once per visit, links that
 * draw their underline like a stroke, work that rises in as it scrolls
 * into view, and pages that cross-fade while the sidebar stays still.
 * All of it is skipped when the visitor prefers reduced motion.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	:root { --ease-ink: cubic-bezier(0.65, 0.05, 0.2, 1); }

	/* First load of a visit: the whole page arrives in one choreography.
	   Name comes into focus, the logo is brushed in, the sidebar follows
	   line by line, then the title is unveiled and each image wipes up
	   from below while the photo settles. --i (set in the markup) staggers
	   list items and thumbnails. */
	:root { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); }
	.mp-intro .site-title { animation: mp-focus 1.1s var(--ease-out) 0.05s both; }
	.mp-intro .site-logo-img, .mp-intro .logo-placeholder, .mp-intro .mobile-logo img { animation: mp-ink 1.6s var(--ease-ink) 0.25s both; }
	.mp-intro .cat-nav { animation: mp-rise 0.9s var(--ease-out) 0.6s both; }
	.mp-intro .list-note { animation: mp-rise 0.9s var(--ease-out) 0.7s both; }
	.mp-intro .project-list li { animation: mp-rise 0.8s var(--ease-out) both; animation-delay: calc(0.8s + var(--i, 0) * 60ms); }
	.mp-intro .link-list li { animation: mp-rise 0.8s var(--ease-out) 1.1s both; }
	.mp-intro .menu-toggle { animation: mp-fade 0.8s ease 0.6s both; }

	.mp-intro .home-title, .mp-intro .archive-head { animation: mp-unveil 1.2s var(--ease-out) 0.4s both; }
	.mp-intro .thumb-media { animation: mp-wipe 1.3s var(--ease-out) backwards; animation-delay: calc(0.65s + var(--i, 0) * 120ms); }
	.mp-intro .thumb-media img, .mp-intro .thumb-placeholder { animation: mp-settle 1.8s var(--ease-out) backwards; animation-delay: calc(0.65s + var(--i, 0) * 120ms); }
	.mp-intro .thumb-title, .mp-intro .thumb-tags { animation: mp-rise 0.9s var(--ease-out) backwards; animation-delay: calc(1s + var(--i, 0) * 120ms); }

	.mp-intro .entry-head { animation: mp-rise 1s var(--ease-out) 0.45s both; }
	.mp-intro .entry-text { animation: mp-focus 1.1s var(--ease-out) 0.6s both; }
	.mp-intro .entry-media .media-row:first-child { animation: mp-wipe 1.3s var(--ease-out) 0.8s backwards; }
	.mp-intro .entry-media .media-row:first-child img { animation: mp-settle 1.8s var(--ease-out) 0.8s backwards; }

	/* Page to page: content cross-fades, sidebar does not move. */
	@view-transition { navigation: auto; }
	.sidebar { view-transition-name: mp-sidebar; }
	::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.32s; }
	::view-transition-old(mp-sidebar) { animation: none; opacity: 0; }
	::view-transition-new(mp-sidebar) { animation: none; }

	.site-logo-img { transition: transform 0.6s var(--ease-ink); }
	.site-logo:hover .site-logo-img { transform: translateX(3px) skewX(-3deg); }

	.project-list a > span:last-child { transition: transform 0.35s var(--ease-ink); }
	.project-list a:hover > span:last-child { transform: translateX(3px); }

	/* Underlines drawn like a stroke. */
	.link-list a, .entry-meta a, .entry-pager a, .cat-nav a, .thumb-title {
		background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
		transition: background-size 0.4s var(--ease-ink), color 0.2s ease;
		padding-bottom: 1px;
	}
	.link-list a:hover, .entry-meta a:hover, .entry-pager a:hover, .cat-nav a:hover, .thumb a:hover .thumb-title { background-size: 100% 1px; }
	.thumb-title { display: inline-block; }

	/* Thumbnails: slow lean-in on hover. */
	.thumb-media img { transition: transform 0.9s var(--ease-ink), opacity 0.3s ease; }
	.thumb a:hover .thumb-media img { transform: scale(1.035); opacity: 1; }

	/* Mobile menu opens with a short rise. */
	.js .sidebar.is-open .sidebar-body { animation: mp-rise 0.35s var(--ease-ink) both; }


	/* Work rises in as it scrolls into view (pure CSS; browsers without
	   scroll-driven animations simply show it). Grid columns are staggered. */
	@supports (animation-timeline: view()) {
		.thumb, .entry-text, .media-row {
			animation: mp-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 45%;
		}
		.thumb:nth-child(3n+2) { animation-range: entry 6% entry 51%; }
		.thumb:nth-child(3n+3) { animation-range: entry 12% entry 57%; }
	}
}

@keyframes mp-ink {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}
@keyframes mp-rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}
@keyframes mp-focus {
	from { opacity: 0; filter: blur(8px); transform: translateY(6px); }
	to { opacity: 1; filter: none; transform: none; }
}
@keyframes mp-unveil {
	from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(0.6em); }
	to { opacity: 1; clip-path: inset(0); transform: none; }
}
@keyframes mp-wipe {
	from { clip-path: inset(100% 0 0 0); }
	to { clip-path: inset(0); }
}
@keyframes mp-settle {
	from { transform: scale(1.14); }
	to { transform: scale(1); }
}
@keyframes mp-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}