/* V I E W P O R T <= 1 2 8 0 p x --------------------------------------------------------------- ✓ */

@media only screen and (max-width: 1280px) {

	/* M A I N ---------------------------------------------------------------------------------- ✓ */

	html, body { height: -webkit-fill-available !important; height: 100% !important; }

	html { scroll-padding-top: var(--height header); }

	body { grid-template-rows: 1fr auto; font-size: 90%; }

	header { width: var(--width page); position: fixed; top: 0; }

	main { margin-top: calc(var(--height header) + var(--grid-row-gap body)); }

	main, main > .bar { border-radius: 0 !important; }

	main > .bar span { border-radius: 0 0 0 .75rem !important; }

	/* H E A D E R ------------------------------------------------------------------------------ ✓ */

	header #home { margin-right: 1.25rem; }

	header #home svg { width: 4rem; }

}

/* V I E W P O R T <= 1 0 2 4 p x --------------------------------------------------------------- ✓ */

@media only screen and (max-width: 1024px) {

	body:has(main.user) { background: hsl(0 0% 18%) !important; }

	/* U S E R ---------------------------------------------------------------------------------- ✓ */

	.user .menu > * { font-size: .95rem !important; }

	main.user .bar { display: none; }

	main.user #content { flex-wrap: wrap; padding: 0 !important; background: transparent; }

	main.user form { width: 100%; padding: 0 .75rem; background: transparent; }

	main.user form[aria-hidden="true"] { display: none !important; }

	main.user form[aria-hidden="false"] { display: flex !important; }

	main.user #sign-in { display: flex; }

	main.user #sign-up { display: none; }

	main.user #sign-up:target { display: flex; }

	main.user #sign-up:target + #sign-in { display: none; }

	main.user h1, main.user .body { background: var(--bg 04); }

	main.user h1 {
		align-self: flex-start;
		height: auto;
		margin-bottom: -.645rem;
		padding: .5125rem .525rem 0 .75rem;
		border-radius: .25rem .25rem 0 0;
		font-size: 1.125rem;
		z-index: 1;
	}

	main.user .body { padding: 1.5rem .75rem .75rem .75rem; border-radius: .25rem; }

	main.user .group label { font-size: .95rem; }

	main.user .group input { font-size: 1rem; }

	main.user .forgot-password { font-size: .9375rem; }

	main.user .remember-me { margin: .75rem 0 0 0; background: var(--bg 04); }

	main.user .remember-me:hover, main.user .remember-me:focus { background: var(--bg 02); }

	main.user .menu > * {
		height: 2.5rem;
		margin-top: .75rem;
		background: var(--bg 04);
		border-radius: .25rem;
		font-feature-settings: normal;
		font-variant-ligatures: discretionary-ligatures;
		letter-spacing: .105em;
	}

	/* main.user .menu > *:not(:first-of-type) { display: flex; } */

	main.user .menu > :nth-child(2) { display: flex; }

}

/* V I E W P O R T <= 7 2 0 p x ----------------------------------------------------------------- ✓ */

@media only screen and (max-width: 720px) {

	body { font-size: 80%; }

	/* U S E R ---------------------------------------------------------------------------------- ✓ */

	.user .tooltip { padding: 0.65rem 0.825rem; }

	.user .tooltip .hint { font-size: .9rem; hyphens: auto; }

	.user .tooltip .hint span { display: none !important; }

	.user .tooltip .hint { font-size: 1em; }

	.user .check-mark { height: 1.075rem; }

	.user .error { font-size: .9rem; hyphens: auto; }

	.user .privacy-policy svg { width: 2.875rem; }

	.user .privacy-policy p, .user .privacy-policy p a { font-size: .925rem; line-height: 1.25rem; }

	/* M A I N ---------------------------------------------------------------------------------- ✓ */

	main > .bar .entries { font-size: 1em; }

	main > .bar:first-child h1 { margin: 0 1rem; }

	main > .bar:last-child { padding: 0 .625rem; }

	#content { padding: 1.25rem 0 !important; }

	nav.subpage a { padding: 0 .7625rem 0 .8rem; }

}