:root {

	/* Colors */
	--background: #faf8f4;
	--surface: #ffffff;
	--surface-hover: #fcfbf8;
	--border: #e7e3da;

	--text: #222222;
	--secondary: #6d6a65;
	--accent: #345c8c;

	--shadow: 0 10px 30px rgba(0, 0, 0, .05);

	/* Layout */
	--sidebar-width: 220px;
	--content-width: 760px;
	--page-width: 1150px;

	--transition: 180ms ease;

}

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

html {
	scroll-behavior: smooth;
}

body {

	margin: 0;

	background: var(--background);

	color: var(--text);

	font-family: "Trocchi", serif;

	font-size: 19px;

	line-height: 1.9;

	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;

}

img {

	display: block;
	max-width: 100%;

}

a {

	color: inherit;

}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 64px 32px 120px;

	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 80px;
}

.sidebar {

	position: sticky;

	top: 56px;

	align-self: start;

}

.logo {

	margin-bottom: 3rem;

}

.logo h1 {

	margin: 0;

	font-family: "Uchen", serif;

	font-size: 2.5rem;

	line-height: 1.1;

	font-weight: 400;

}

.logo p {

	margin-top: .75rem;

	color: var(--secondary);

	font-size: .95rem;

	font-family: "Inter", sans-serif;

	line-height: 1.6;

}

nav {

	display: flex;

	flex-direction: column;

	gap: 14px;

}

nav a {

	font-family: "Inter", sans-serif;

	text-decoration: none;

	color: var(--secondary);

	font-size: .92rem;

	transition: color var(--transition);

}

nav a:hover {

	color: var(--text);

}

nav a.active {

	color: var(--text);

	font-weight: 600;

}

main {
	width: 100%;
	min-width: 0;
}

main section {
	max-width: 760px;
}

section {

	margin-bottom: 110px;

}

section:last-child {

	margin-bottom: 0;

}

h2 {

	margin: 0 0 1.6rem;

	font-family: "Uchen", serif;

	font-size: 2rem;

	font-weight: 400;

	line-height: 1.2;

}

h3 {

	margin: 0;

	font-size: 1.25rem;

	font-weight: 400;

}

p {

	margin: 0 0 1.5rem;

	color: #3d3d3d;

}

.section-label {
	margin: 0 0 1.5rem;
	font-family: "Uchen", serif;
	font-size: 1.55rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--text);
}

.intro {

	font-size: 1.2rem;

	max-width: 62ch;

}

.timeline-compact {
	position: relative;
}

.timeline-compact::before {
	content: "";
	position: absolute;
	left: 68px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--border);
}

.timeline-compact .timeline-item {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	column-gap: 32px;
	align-items: start;
	margin-bottom: 10px;
}

.timeline-compact .timeline-item:last-child {
	margin-bottom: 0;
}

.timeline-compact .timeline-year {
	font-family: "Inter", sans-serif;
	font-size: .78rem;
	line-height: 1.5;
	color: var(--secondary);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.timeline-compact .timeline-content {
	min-width: 0;
	line-height: 1.45;
	padding-left: 0;
}

.timeline-compact .timeline-content h3 {
	display: inline;
	margin: 0;
	font-size: .92rem;
	font-weight: 500;
	line-height: inherit;
}

.timeline-meta {
	display: inline;
	font-family: "Inter", sans-serif;
	font-size: .78rem;
	line-height: inherit;
	color: var(--secondary);
}

.timeline-compact .timeline-content p {
	display: none;
}

.timeline {

	position: relative;

}

.timeline::before {

	content: "";

	position: absolute;

	left: 74px;

	top: 0;

	bottom: 0;

	width: 1px;

	background: var(--border);

}

.timeline-item {

	display: grid;

	grid-template-columns: 70px 1fr;

	gap: 32px;

	margin-bottom: 48px;

}

.timeline-year {

	font-family: "Inter", sans-serif;

	color: var(--secondary);

	font-size: .85rem;

}

.timeline-content h3 {

	margin-bottom: .5rem;

}

.timeline-content p {

	margin-top: .75rem;

}

.game-grid {

	display: grid;

	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 28px;

}

.game-card {

	overflow: hidden;

	background: var(--surface);

	border: 1px solid var(--border);

	border-radius: 10px;

	transition: transform .18s ease,
		box-shadow .18s ease;

}

.game-card:hover {

	transform: translateY(-4px);

	box-shadow: var(--shadow);

}

.game-card img {

	width: 100%;

	aspect-ratio: 16/10;

	object-fit: cover;

}

.game-card-content {

	padding: 20px;

}

.game-role {

	font-family: "Inter", sans-serif;

	font-size: .85rem;

	color: var(--secondary);

	margin-top: .35rem;

}

.game-info {

	font-family: "Inter", sans-serif;

	font-size: .85rem;

	color: var(--primary);

	margin-top: .35rem;

}

.photo-grid {

	display: grid;

	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

	gap: 20px;

}

.photo figcaption {
	display: none;
}

.photo {

	margin: 0;

}

.photo a {

	display: block;

	border-radius: 8px;

	overflow: hidden;

}

.photo img {

	display: block;

	width: 100%;

	aspect-ratio: 16 / 9;

	object-fit: cover;

	border-radius: 8px;

	transition:
		transform .25s ease,
		filter .25s ease;

	cursor: pointer;

}

.photo:hover img {

	filter: brightness(.95);

	transform: scale(1.02);

}

.photo figcaption {

	display: none;

}

.contact-links {

	display: flex;

	flex-wrap: wrap;

	gap: 18px;

}

.contact-links a {

	font-family: "Inter", sans-serif;

	color: var(--accent);

	text-decoration: none;

}

.contact-links a:hover {

	text-decoration: underline;

}

footer {

	margin-top: 120px;

	padding-top: 32px;

	border-top: 1px solid var(--border);

	color: var(--secondary);

	font-size: .9rem;

	font-family: "Inter", sans-serif;

}

.menu-toggle {

	display: none;

	font-family: "Inter", sans-serif;

	background: none;

	border: none;

	cursor: pointer;

	font-size: 1rem;

}

.fade-in {

	opacity: 0;

	transform: translateY(18px);

	transition:

		opacity .6s ease,

		transform .6s ease;

}

.fade-in.visible {

	opacity: 1;

	transform: translateY(0);

}


.pswp__caption__center {

	font-family: "Inter", sans-serif;

	font-size: .95rem;

}

.pswp__counter {

	font-family: "Inter", sans-serif;

}

@media (max-width: 960px) {

	.container {

		grid-template-columns: 1fr;

		gap: 40px;

	}

	.sidebar {

		position: relative;

		top: auto;

	}

	nav {

		flex-direction: row;

		flex-wrap: wrap;

		gap: 18px;

	}

}

@media (max-width: 768px) {

	body {

		font-size: 18px;

	}

	.container {

		padding:

			40px 24px 80px;

	}

	.game-grid {

		grid-template-columns: 1fr;

	}

	.photo-grid {
	
		grid-template-columns: repeat(2, 1fr);
	
	}

	h2 {

		font-size: 1.8rem;

	}

}

@media (max-width: 560px) {

	.menu-toggle {

		display: block;

		margin-bottom: 1.5rem;

	}

	nav {

		display: none;

		flex-direction: column;

		gap: 12px;

	}

	nav.open {

		display: flex;

	}

	photo-grid {
	
		grid-template-columns: 1fr;
	
	}

	.timeline-item {

		grid-template-columns: 1fr;

		gap: 12px;

	}

	.timeline::before {

		display: none;

	}

}