@media (max-width: 60rem) {
	.clubroom-header__inner,
	.clubroom-main,
	.clubroom-footer {
		width: min(100% - 1.5rem, var(--clubroom-content-width));
	}

	.clubroom-header__inner {
		gap: var(--clubroom-space-3);
	}

	.clubroom-desktop-nav a {
		padding-inline: 0.55rem;
	}

	.clubroom-desktop-nav a span {
		display: none;
	}

	.clubroom-profile-menu summary > span {
		display: none;
	}
}

@media (max-width: 47.99rem) {
	body.clubroom-authenticated {
		padding-bottom: calc(var(--clubroom-mobile-nav-height) + env(safe-area-inset-bottom));
	}

	.clubroom-header__inner {
		min-height: 3.75rem;
	}

	.clubroom-brand__mark {
		width: 2rem;
		height: 2rem;
	}

	.clubroom-desktop-nav,
	.clubroom-profile-menu {
		display: none;
	}

	.clubroom-header__actions {
		margin-left: auto;
	}

	.clubroom-main {
		min-height: calc(100vh - 3.75rem - var(--clubroom-mobile-nav-height));
		padding-block: var(--clubroom-space-6);
	}

	.clubroom-page-heading {
		display: grid;
		gap: var(--clubroom-space-4);
	}

	.clubroom-status-label {
		justify-self: start;
	}

	.clubroom-placeholder-card {
		grid-template-columns: 1fr;
	}

	.clubroom-footer {
		padding-block: var(--clubroom-space-4);
	}

	.clubroom-mobile-nav {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 200;
		display: block;
		padding-bottom: env(safe-area-inset-bottom);
		border-top: 1px solid var(--clubroom-colour-border);
		background: rgb(255 255 255 / 97%);
		box-shadow: 0 -0.4rem 1.5rem rgb(23 23 19 / 8%);
		backdrop-filter: blur(0.75rem);
	}

	.clubroom-mobile-nav ul {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		min-height: var(--clubroom-mobile-nav-height);
	}

	.clubroom-mobile-nav a {
		display: flex;
		min-width: 2.75rem;
		min-height: 2.75rem;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 0.2rem;
		padding: 0.4rem 0.15rem;
		color: var(--clubroom-colour-ink-soft);
		font-size: clamp(0.625rem, 2.6vw, 0.75rem);
		font-weight: 650;
		line-height: 1.1;
		text-align: center;
		text-decoration: none;
	}

	.clubroom-mobile-nav a[aria-current="page"] {
		color: var(--clubroom-colour-brand-strong);
	}

	.clubroom-mobile-nav a[aria-current="page"]::before {
		position: absolute;
		top: 0;
		width: 2rem;
		height: 0.18rem;
		border-radius: 0 0 999px 999px;
		background: var(--clubroom-colour-brand);
		content: "";
	}

	.clubroom-mobile-nav a {
		position: relative;
	}
}

@media (max-width: 24rem) {
	.clubroom-brand__wordmark {
		display: none;
	}

	.clubroom-entry,
	.clubroom-state-card {
		padding: var(--clubroom-space-5);
	}
}