/* ============================================
   Harry Styles (Hinged Edition)
   ============================================ */

:root {
	--ink: #111;
	--gold: #e9a92c;
	--gold: color(display-p3 0.93 0.66 0.2);
	--glow: rgba(255, 196, 64, 0.55);
}

* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

html, body {
	min-height: 100%;
}

body {
	font-family:
		ui-rounded,
		"SF Pro Rounded",
		-apple-system,
		BlinkMacSystemFont,
		Segoe UI,
		Helvetica,
		Arial,
		sans-serif,
		Apple Color Emoji,
		Segoe UI Emoji;
	font-size: 24px;
	font-weight: 500;
	color: var(--ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, p {
	margin: 0;
}

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

/* ============================================
   The Page
   ============================================ */

#page {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	min-height: 100dvh;
}

.hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 72px 24px 48px;
	text-align: center;

	.appIcon {
		width: 200px;
		padding: 60px;
		margin: -60px;
		box-sizing: content-box;
		transform: translateY(32px);
		z-index: 1;
		filter:
			drop-shadow(0px 0px 50px var(--glow))
			drop-shadow(0px 10px 24px rgba(0, 0, 0, 0.25));
	}

	h1 {
		position: relative;
		font-size: 100px;
		font-weight: 900;
		line-height: 1;
		letter-spacing: -1px;
		/* The filter clips to the box, so make room for the g's descender
		   without moving anything around it */
		padding: 0.1em 0.1em 0.2em;
		margin: -0.1em -0.1em -0.2em;
		z-index: 2;
		filter: drop-shadow(0px 2px 10px rgba(255, 255, 255, 0.9));
	}

	p {
		font-size: 22px;
		font-weight: 400;
		opacity: 0.7;
		max-width: 380px;
		margin-top: 12px;
		line-height: 1.4;
	}
}

/* Not on the App Store yet. Thwip's button, in daylight. */
.button {
	display: block;
	margin: 32px 24px 12px;
	padding: 18px 28px;
	border-radius: 14px;
	background: linear-gradient(#ffffff, #f2f2f2);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.08),
		0 6px 20px rgba(0, 0, 0, 0.08),
		inset 0 -3px 4px rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.08);
	font-size: 20px;
	font-weight: 600;

	&.soon {
		cursor: default;
		color: rgba(17, 17, 17, 0.55);
	}
}


/* ============================================
   The Screenshots
   The five App Store shots join edge to edge into one panorama,
   so they sit flush, in a single rounded strip that scrolls sideways.
   ============================================ */

.gallery {
	width: 100%;
	max-width: 1440px;
	padding: 0 24px;
}

.strip {
	display: flex;
	height: min(62vh, 640px, calc((100vw - 48px) * 1407 / 2000));
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	border-radius: 28px;
	background: #10101c;
	box-shadow: 0 20px 60px rgba(20, 20, 50, 0.18);

	&::-webkit-scrollbar {
		display: none;
	}

	img {
		display: block;
		flex: none;
		height: 100%;
		width: auto;
		aspect-ratio: 2000 / 1407;
		scroll-snap-align: start;
	}
}

.arrows {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 20px;

	button {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: linear-gradient(#ffffff, #f2f2f2);
		border: 1px solid rgba(0, 0, 0, 0.08);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
		color: var(--ink);
		font-size: 20px;
		line-height: 1;
		transition: opacity 0.2s ease-in-out;

		&:disabled {
			opacity: 0.35;
			cursor: default;
		}
	}
}

.footer {
	margin-top: auto;
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	opacity: 0.5;
	padding: 48px 24px 24px;
	padding-bottom: max(24px, env(safe-area-inset-bottom));
	line-height: 2;

	a:hover {
		text-decoration: underline;
	}
}

@media (max-width: 480px) {
	.hero {
		padding-top: 48px;

		h1 {
			font-size: 72px;
		}

		p {
			font-size: 18px;
		}

		.appIcon {
			width: 140px;
			transform: translateY(24px);
		}
	}

	.gallery {
		padding: 0 16px;
	}

	.strip {
		height: min(60vh, calc((100vw - 32px) * 1407 / 2000 * 1.5));
		border-radius: 20px;
	}
}

/* ============================================
   Privacy & Press
   ============================================ */

.privacy {
	main {
		max-width: 640px;
		margin: 0 auto;
		padding: 64px 24px;
	}

	.back-link {
		font-size: 16px;
		opacity: 0.6;

		&:hover {
			opacity: 1;
		}
	}

	h1 {
		font-size: 48px;
		font-weight: 900;
		margin: 32px 0 8px;
	}

	h2 {
		font-size: 22px;
		font-weight: 700;
		margin: 40px 0 12px;
	}

	p, li {
		font-size: 17px;
		font-weight: 400;
		line-height: 1.6;
		opacity: 0.85;
	}

	ul {
		padding-left: 20px;
	}

	li + li {
		margin-top: 12px;
	}

	.updated {
		font-size: 15px;
		opacity: 0.5;
		margin-bottom: 24px;
	}

	p a, li a {
		text-decoration: underline;
	}

	.footer {
		width: auto;
		max-width: none;
		margin-top: 48px;
		padding: 0;
		text-align: left;
	}

	&.press main > p + p {
		margin-top: 1em;
	}

	/* The line-up: each sound and its one-liner from the app */
	.lineup {
		list-style: none;
		padding: 0;

		li {
			display: flex;
			flex-wrap: wrap;
			gap: 0 12px;
			align-items: baseline;
		}

		strong {
			min-width: 120px;
		}

		.price {
			font-size: 13px;
			opacity: 0.5;
		}
	}

	.press-video {
		display: block;
		width: 100%;
		height: auto;
		margin: 8px 0 24px;
	}

	/* Press Kit download, the light twin of Kyber's */
	.download {
		display: inline-flex;
		flex-direction: column;
		gap: 4px;
		margin: 8px 0 40px;
		padding: 18px 28px;
		border-radius: 14px;
		background: linear-gradient(#ffffff, #f2f2f2);
		border: 1px solid rgba(0, 0, 0, 0.08);
		box-shadow:
			0 1px 2px rgba(0, 0, 0, 0.08),
			0 6px 20px rgba(0, 0, 0, 0.08),
			inset 0 -3px 4px rgba(0, 0, 0, 0.05);
		font-size: 20px;
		font-weight: 600;
		transition: box-shadow 0.3s ease-in-out;

		span {
			font-size: 14px;
			font-weight: 400;
			opacity: 0.6;
		}

		&:hover {
			box-shadow:
				0 1px 2px rgba(0, 0, 0, 0.08),
				0 6px 20px rgba(0, 0, 0, 0.08),
				inset 0 -3px 4px rgba(0, 0, 0, 0.05),
				0 0 32px var(--glow);
		}
	}
}