@layer base, frame, parts;

@layer base {
	:root {
		color-scheme: light dark;
		--fizz: #19c2a0;
		--gap: clamp(16px, 3vw, 28px);
		--n0: #fbfaff;
		--n1: #f1eefb;
		--n2: #dcd6ef;
		--n6: #6b6386;
		--n9: #1d1730;
		--pop: #7b3cff;
		--round: 14px;
		--zap: #ffcf3d;
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--n0: #15111e;
			--n1: #1f1a2c;
			--n2: #352d4a;
			--n6: #a79fc2;
			--n9: #f3f0ff;
			--pop: #a982ff;
		}
	}

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

	body {
		background: var(--n0);
		color: var(--n9);
		font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
		font-size: 1.0625rem;
		line-height: 1.55;
		margin: 0;
	}

	a {
		color: var(--pop);
		text-underline-offset: .2em;

		&:hover {
			text-decoration-thickness: 2px;
		}
	}

	h1, h2, h3 {
		letter-spacing: -.02em;
		line-height: 1.15;
		margin: 0 0 .5em;
	}

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

	:focus-visible {
		outline-offset: 3px;
		outline: 3px solid var(--zap);
	}

	[hidden] {
		display: none !important;
	}
}

@layer frame {
	.wrap {
		margin-inline: auto;
		max-width: 72rem;
		padding-inline: var(--gap);
	}

	.headStrip {
		backdrop-filter: blur(8px);
		background: color-mix(in srgb, var(--n0) 88%, transparent);
		border-bottom: 2px solid var(--n2);
		position: sticky;
		top: 0;
		z-index: 5;

		& .wrap {
			align-items: center;
			display: flex;
			gap: 1rem;
			justify-content: space-between;
			min-height: 4rem;
		}
	}

	.logo {
		align-items: center;
		color: var(--n9);
		display: inline-flex;
		font-size: 1.25rem;
		font-weight: 600;
		gap: .5rem;
		text-decoration: none;

		& b {
			color: var(--pop);
			font-weight: 900;
		}
	}

	.mainNav {
		display: flex;
		gap: 1.25rem;

		& a {
			color: var(--n6);
			font-weight: 600;
			text-decoration: none;

			&:hover {
				color: var(--n9);
			}
		}
	}

	.footStrip {
		border-top: 2px dashed var(--n2);
		color: var(--n6);
		font-size: .875rem;
		margin-top: 4rem;
		padding-block: 1.5rem 2.5rem;

		& .wrap {
			display: flex;
			flex-wrap: wrap;
			gap: .25rem 2rem;
			justify-content: space-between;
		}

		& p {
			margin: 0;
		}
	}

	.band {
		padding-top: 3rem;
	}

	.bandHead {
		align-items: baseline;
		display: flex;
		flex-wrap: wrap;
		gap: .25rem 1rem;
		justify-content: space-between;
		margin-bottom: 1.25rem;

		& h2 {
			font-size: 1.75rem;
			margin: 0;
		}

		& p {
			color: var(--n6);
			margin: 0;
		}
	}
}

@layer parts {
	.hero {
		padding-block: 3.5rem 1rem;

		& h1 {
			font-size: clamp(2.25rem, 6vw, 4.25rem);
			font-weight: 900;
			max-width: 14ch;
		}
	}

	.eyebrow {
		background: var(--zap);
		border-radius: 99px;
		color: #1d1730;
		display: inline-block;
		font-size: .8125rem;
		font-weight: 700;
		margin: 0 0 1rem;
		padding: .2rem .75rem;
	}

	.lede {
		color: var(--n6);
		font-size: 1.1875rem;
		max-width: 38rem;
	}

	.meta {
		color: var(--n6);
		font-size: .875rem;
	}

	.findBox {
		display: flex;
		flex-wrap: wrap;
		gap: .5rem;
		margin-top: 1.5rem;
		max-width: 34rem;

		& label {
			flex-basis: 100%;
			font-size: .875rem;
			font-weight: 700;
		}

		& input {
			background: var(--n1);
			border-radius: var(--round);
			border: 2px solid var(--n2);
			color: inherit;
			flex: 1;
			font: inherit;
			min-width: 0;
			padding: .7rem 1rem;

			&:focus {
				border-color: var(--pop);
				outline: none;
			}
		}

		& button {
			background: var(--pop);
			border-radius: var(--round);
			border: 0;
			color: #fff;
			cursor: pointer;
			font-weight: 700;
			font: inherit;
			padding: .7rem 1.1rem;
		}
	}

	.trendList {
		counter-reset: none;
		display: grid;
		gap: .5rem;
		list-style: none;
		margin: 0;
		padding: 0;

		& li {
			align-items: center;
			background: var(--n1);
			border-radius: var(--round);
			display: grid;
			gap: .25rem 1rem;
			grid-template-columns: 2.5rem 96px 1fr auto;
			padding: .5rem 1rem .5rem .75rem;
		}

		& img {
			border-radius: 8px;
		}

		& a {
			color: var(--n9);
			font-weight: 700;
			text-decoration: none;
		}

		& small {
			color: var(--n6);
		}
	}

	.rank {
		color: var(--pop);
		font-size: 1.375rem;
		font-variant-numeric: tabular-nums;
		font-weight: 900;
	}

	.packShelf {
		display: grid;
		gap: var(--gap);
		grid-template-columns: repeat(3, 1fr);
	}

	.packTile {
		border-radius: calc(var(--round) + 4px);
		border: 2px solid var(--n2);
		color: var(--n9);
		display: grid;
		gap: .25rem;
		padding: .5rem .5rem 1rem;
		text-decoration: none;
		transition: transform .15s, border-color .15s;

		& img {
			border-radius: var(--round);
			margin-bottom: .5rem;
		}

		& strong {
			font-size: 1.125rem;
			padding-inline: .5rem;
		}

		& span {
			color: var(--n6);
			font-size: .875rem;
			padding-inline: .5rem;
		}

		&:hover {
			border-color: var(--pop);
			transform: rotate(-1deg);
		}
	}

	.chipRow {
		display: flex;
		flex-wrap: wrap;
		gap: .4rem;
		margin-bottom: 1.25rem;

		& button {
			background: transparent;
			border-radius: 99px;
			border: 2px solid var(--n2);
			color: var(--n9);
			cursor: pointer;
			font-size: .9375rem;
			font: inherit;
			padding: .25rem .8rem;

			&[aria-pressed="true"] {
				background: var(--n9);
				border-color: var(--n9);
				color: var(--n0);
			}
		}
	}

	.clipGrid {
		display: grid;
		gap: var(--gap);
		grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	}

	.clipCard {
		display: flex;
		flex-direction: column;

		& h3 {
			font-size: 1.0625rem;
			margin: .75rem 0 .25rem;

			& a {
				color: var(--n9);
				text-decoration: none;
			}
		}

		& p {
			color: var(--n6);
			font-size: .9375rem;
			margin: 0 0 .5rem;
		}

		&.isLit .clipPic {
			box-shadow: 0 0 0 4px var(--zap);
		}
	}

	.clipPic {
		border-radius: var(--round);
		display: block;
		overflow: hidden;
		position: relative;
	}

	.dur {
		background: rgb(0 0 0 / .6);
		border-radius: 6px;
		bottom: .5rem;
		color: #fff;
		font-size: .75rem;
		font-weight: 700;
		padding: .1rem .4rem;
		position: absolute;
		right: .5rem;
	}

	.tagList {
		display: flex;
		flex-wrap: wrap;
		gap: .25rem .6rem;
		list-style: none;
		margin: auto 0 0;
		padding: 0;

		& a {
			color: var(--fizz);
			font-size: .875rem;
			font-weight: 600;
			text-decoration: none;
		}
	}

	.emptyNote {
		background: var(--n1);
		border-radius: var(--round);
		padding: 1.25rem;
	}

	.crumbs {
		color: var(--n6);
		font-size: .875rem;
		padding-top: 1.5rem;

		& a {
			color: inherit;
		}
	}

	.packHead {
		padding-block: 1.5rem 1rem;

		& h1 {
			font-size: clamp(2rem, 5vw, 3.25rem);
			font-weight: 900;
		}
	}

	.packClips {
		display: grid;
		gap: 2rem;
	}

	.clipRow {
		display: grid;
		gap: var(--gap);
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		scroll-margin-top: 5rem;

		& img {
			border-radius: var(--round);
		}

		& h2 {
			font-size: 1.5rem;
		}

		&:target img {
			box-shadow: 0 0 0 4px var(--zap);
		}
	}

	.sideNote {
		background: var(--n1);
		border-left: 6px solid var(--pop);
		border-radius: 0 var(--round) var(--round) 0;
		margin-top: 3rem;
		padding: 1.25rem 1.5rem;

		& h2 {
			font-size: 1.25rem;
		}

		& h3 {
			font-size: 1rem;
			margin-top: 1.25rem;
		}

		& ul {
			display: flex;
			flex-wrap: wrap;
			gap: .25rem 1.25rem;
			list-style: none;
			margin: 0;
			padding: 0;
		}
	}

	.proseBox {
		max-width: 46rem;
		padding-top: 3rem;

		& h1 {
			font-size: clamp(2rem, 5vw, 3rem);
			font-weight: 900;
		}

		& h2 {
			font-size: 1.3rem;
			margin-top: 2rem;
		}

		& li {
			margin-bottom: .4rem;
		}
	}

	.lost {
		padding-top: 5rem;
		text-align: center;

		& svg {
			color: var(--pop);
			margin: 0 auto 1.5rem;
		}
	}

	.btnLink {
		background: var(--pop);
		border-radius: var(--round);
		color: #fff;
		display: inline-block;
		font-weight: 700;
		padding: .7rem 1.25rem;
		text-decoration: none;
	}
}

@media (width < 40em) {
	.mainNav {
		font-size: .9375rem;
		gap: .9rem;
	}

	.packShelf {
		grid-template-columns: 1fr;
	}

	.trendList li {
		grid-template-columns: 2rem 72px 1fr;

		& small {
			display: none;
		}
	}

	.clipRow {
		grid-template-columns: 1fr;
	}
}

@media (40em <= width < 64em) {
	.packShelf {
		grid-template-columns: repeat(2, 1fr);
	}
}