/*
 * Mobile adaptations. Loaded after site.css/gallery.css so desktop rules
 * are untouched — everything here applies only at 820px and below.
 * The 820px breakpoint must match the matchMedia query in js/gallery.js.
 * !important is needed where site.js/gallery.js set inline positions.
 */

@media (max-width: 820px) {

	body {
		overscroll-behavior: none;
	}

	/* --- Navigation: let the 7 items wrap into centered rows --- */
	header {
		top: 10px;
		left: 0;
		right: 0;
		width: auto;
		padding: 0 6px;
	}

	.menu {
		flex-wrap: wrap;
		justify-content: center;
		max-width: 100%;
	}

	.menu li {
		width: auto;
		padding: 0 6px;
	}

	.menu li:not(:last-child) {
		margin-right: 10px;
	}

	.menu li a {
		font-size: 13px;
		display: inline-block;
		padding: 6px 2px; /* larger tap target */
	}

	/* --- Particle logo: shrink and drop below the wrapped nav rows --- */
	.logo {
		top: 92px;
		transform: scale(0.45);
		transform-origin: top right;
	}

	/* --- Vertical "SELECTED WORKS" marker: below the shrunken logo --- */
	.footer-txt-1 {
		font-size: 0.8rem;
		top: 215px;
	}

	.launch-site-btn a .text {
		white-space: nowrap;
	}

	/* --- Slider: larger slides, keep browser pan/refresh gestures off --- */
	.slider {
		padding: 0 12vw;
		touch-action: none;
	}

	.slide__inner {
		width: 76vw;
	}

	/* --- Titles: readable size, centered near the bottom.
	       Desktop positions these inline from JS; !important wins here. --- */
	.titles {
		left: 50% !important;
		top: auto !important;
		bottom: 9vh;
		bottom: 9svh;
		transform: translate(-50%, 0);
		min-width: 0;
		width: 92vw;
	}

	.titles__title {
		align-items: center;
		text-align: center;
		font-size: 5.6vw;
		letter-spacing: -0.2vw;
	}

	.subtitles {
		font-size: 3vw;
		letter-spacing: 2px;
	}

	/* --- View button: pinned lower right, clear of titles and equalizer --- */
	#view_btn {
		left: auto !important;
		right: 0 !important;
		top: auto !important;
		bottom: 20vh;
		bottom: 20svh;
		transform: scale(0.7);
		transform-origin: bottom right;
	}

	#view_btn_txt {
		font-size: 17px;
		letter-spacing: 6px;
	}

	.playing-icon {
		right: 6px;
		width: 56px;
	}
}