/*
	Responsive styles
	Loaded after style.css — only overrides for smaller screens.

	Breakpoints
	- 1440px  smaller desktop monitors / laptops
	- 1199px  small laptops, tablets in landscape
	- 991px   tablets in portrait
	- 767px   phones
	- 480px   small phones
*/

/* Big decorative text sliding sideways must never create horizontal scroll */
html,
body
{
	overflow-x: clip;
}

/* Touch devices: no custom cursor, normal pointer behaviour */
@media (hover: none), (pointer: coarse)
{
	body,
	a
	{
		cursor: auto;
	}

	.mf-cursor
	{
		display: none !important;
	}
}


/* ============================================================
   ≤ 1440px — smaller desktop monitors / laptops
   ============================================================ */
@media (max-width: 1440px)
{
	/* Title lines scale with the viewport; the reveal mask follows the font size */
	h1
	{
		font-size: min(100px, 7.4vw);
		line-height: 1.2;
	}

	.header .line,
	.title-reveal
	{
		height: 1.2em;
	}

	.about .name-running .name-txt
	{
		font-size: 130px;
		line-height: 130px;
	}

	.about .name-running .name-dot
	{
		transform: translateY(-35px);
	}

	.about .about-content
	{
		margin-top: 180px;
	}

	.service .service-list li
	{
		font-size: min(120px, 7.5vw);
		line-height: 1;
	}

	.contact .mail
	{
		font-size: min(80px, 5vw);
		white-space: nowrap;
	}
}


/* ============================================================
   ≤ 1199px — small laptops, tablets in landscape
   ============================================================ */
@media (max-width: 1199px)
{
	.wrapper
	{
		width: 86%;
	}

	h1
	{
		font-size: min(84px, 8vw);
	}

	h4
	{
		font-size: 30px;
		line-height: 36px;
	}

	nav
	{
		padding: 36px 5%;
	}

		nav .logo svg
		{
			height: 42px;
		}

		nav .menu li a
		{
			padding: 28px 16px;
		}

	.preloader h1
	{
		font-size: 110px;
	}

	.about .name-running .name-txt
	{
		font-size: 110px;
		line-height: 110px;
	}

	.about .name-running .name-dot
	{
		margin: 0 36px;
		transform: translateY(-28px);
	}

	.about .about-content
	{
		margin-top: 140px;
	}

	.about .about-content .portrait
	{
		height: 520px;
	}

	.service
	{
		overflow-x: clip;
	}

	p.text-xl
	{
		font-size: 22px;
		line-height: 34px;
	}

	.work .portfolio
	{
		grid-gap: 30px;
	}

	.contact
	{
		padding: 180px 0 25dvh;
	}

		/* Stack title and text so "Let's Work Together" never gets squeezed */
		.contact .flex
		{
			flex-direction: column;
		}

		.contact .flex p.text-xl
		{
			margin: 40px 0 0;
			max-width: 560px;
		}

		.contact .mail
		{
			margin-top: 150px;
			font-size: 5.4vw;
		}
}


/* ============================================================
   ≤ 991px — tablets in portrait
   ============================================================ */
@media (max-width: 991px)
{
	h1
	{
		font-size: 8.2vw;
	}

	h2
	{
		font-size: 44px;
		line-height: 48px;
	}

	h3
	{
		font-size: 36px;
		line-height: 40px;
	}

	h5
	{
		font-size: 22px;
		line-height: 28px;
	}

	p
	{
		font-size: 17px;
		line-height: 28px;
	}

	.preloader h1
	{
		font-size: 90px;
	}

	/* Header */
	.header
	{
		padding: 130px 0 60px;
	}

		.header p
		{
			max-width: 520px;
		}

		.header .scroll-for-more
		{
			width: 76px;
			height: 76px;
			top: auto;
			bottom: 8%;
		}

	/* About — stack text above portrait */
	.about
	{
		padding: 80px 0 30dvh;
	}

		.about .about-content
		{
			flex-direction: column;
			margin-top: 60px;
		}

		.about .about-content .greetings
		{
			max-width: 100%;
			margin: 0 0 80px;
		}

		.about .about-content .portrait
		{
			width: 100%;
			height: auto;
		}

		.about .about-content .portrait .portrait-wrapper
		{
			max-height: 560px;
			background-size: cover;
		}

		.about .name-running .name-txt
		{
			font-size: 84px;
			line-height: 84px;
			letter-spacing: 6px;
		}

		.about .name-running .name-dot
		{
			margin: 0 28px;
			padding: 11px;
			transform: translateY(-20px);
		}

	/* Services */
	.service .service-list li
	{
		font-size: 9vw;
		margin: 20px 0;
	}

	p.text-xl
	{
		max-width: 100%;
		font-size: 21px;
		line-height: 32px;
	}

	/* Work */
	.work
	{
		margin: 60px 0;
	}

		.work .portfolio .item .item-title
		{
			margin: 16px 0;
		}

	/* Contact — stack title and text */
	.contact
	{
		padding: 140px 0 20dvh;
	}

		.contact .mail
		{
			margin-top: 110px;
			text-align: left;
		}
}


/* ============================================================
   ≤ 767px — phones
   ============================================================ */
@media (max-width: 767px)
{
	.wrapper
	{
		width: 90%;
	}

	h1
	{
		font-size: 8.6vw;
	}

	h2
	{
		font-size: 34px;
		line-height: 38px;
	}

	h2.subtitle
	{
		font-size: 15px;
		line-height: 20px;
	}

	h3
	{
		font-size: 28px;
		line-height: 32px;
	}

	h4
	{
		font-size: 24px;
		line-height: 30px;
	}

	h5
	{
		font-size: 20px;
		line-height: 26px;
	}

	h6
	{
		font-size: 17px;
		line-height: 24px;
	}

	p
	{
		font-size: 16px;
		line-height: 26px;
	}

	.preloader h1
	{
		font-size: 64px;
	}

	/* Nav */
	nav
	{
		padding: 22px 5%;
	}

		nav .logo svg
		{
			height: 30px;
		}

		nav .menu li
		{
			margin: 0;
			padding: 0;
		}

			nav .menu li a
			{
				padding: 14px 10px;
				font-size: 15px;
			}

	/* Header */
	.header
	{
		padding: 110px 0 140px;
		align-items: center;
	}

		.header p
		{
			max-width: 100%;
			margin: 24px 0 0;
			font-size: 15px;
			line-height: 26px;
		}

		.header .scroll-for-more
		{
			width: 60px;
			height: 60px;
			left: 5%;
			bottom: 40px;
		}

			.header .scroll-for-more svg
			{
				width: 24px;
				height: 24px;
			}

	/* About */
	.about
	{
		padding: 60px 0 20dvh;
	}

		.about .about-content
		{
			margin-top: 40px;
		}

		.about .about-content .greetings
		{
			margin-bottom: 60px;
		}

		.about .about-content .portrait .portrait-wrapper
		{
			max-height: 440px;
		}

		.about .name-running .name-txt
		{
			font-size: 56px;
			line-height: 56px;
			letter-spacing: 4px;
		}

		.about .name-running .name-dot
		{
			margin: 0 18px;
			padding: 8px;
			transform: translateY(-12px);
		}

	/* Services */
	.service
	{
		padding: 0 0 12dvh;
	}

		.service .service-list li
		{
			font-size: 9vw;
			margin: 14px 0;
			white-space: nowrap;
		}

	p.text-xl
	{
		font-size: 18px;
		line-height: 28px;
	}

	/* Work — one project per row */
	.work
	{
		margin: 40px 0;
	}

		.work .portfolio
		{
			grid-template-columns: 1fr;
			grid-gap: 24px;
			margin-top: 30px;
		}

		.work .portfolio .item .item-img,
		.work .portfolio .item .item-img svg
		{
			border-radius: 14px;
		}

		.work .portfolio .item .item-title
		{
			gap: 12px;
		}

	/* Contact */
	.contact
	{
		padding: 150px 0 40dvh;
	}

		.contact .mail
		{
			margin-top: 80px;
			font-size: 5.5vw;
		}

			.contact .mail a::after
			{
				bottom: -6px;
				height: 2px;
			}
}


/* ============================================================
   ≤ 480px — small phones
   ============================================================ */
@media (max-width: 480px)
{
	nav .menu li a
	{
		padding: 12px 7px;
		font-size: 14px;
	}

	.preloader h1
	{
		font-size: 52px;
	}

	.about .about-content .portrait .portrait-wrapper
	{
		max-height: 380px;
	}

	.about .name-running .name-txt
	{
		font-size: 44px;
		line-height: 44px;
	}

	.about .name-running .name-dot
	{
		margin: 0 14px;
		transform: translateY(-8px);
	}

	.service .service-list li
	{
		margin: 10px 0;
	}

	p.text-xl
	{
		font-size: 17px;
		line-height: 27px;
	}
}