.clubroom-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--clubroom-colour-border);
	background: rgb(255 255 255 / 94%);
	backdrop-filter: blur(0.75rem);
}

.clubroom-header__inner {
	display: flex;
	width: min(100% - 2rem, var(--clubroom-content-width));
	min-height: var(--clubroom-header-height);
	align-items: center;
	gap: var(--clubroom-space-5);
	margin-inline: auto;
}

.clubroom-brand {
	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
	gap: var(--clubroom-space-3);
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.clubroom-brand__mark {
	display: grid;
	width: 2.25rem;
	height: 2.25rem;
	place-items: center;
	border-radius: 50%;
	background: var(--clubroom-colour-brand);
	color: #fff;
	font-size: 1rem;
	line-height: 1;
}

.clubroom-desktop-nav {
	flex: 1;
}

.clubroom-desktop-nav ul,
.clubroom-mobile-nav ul,
.clubroom-profile-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.clubroom-desktop-nav ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--clubroom-space-1);
}

.clubroom-desktop-nav a {
	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
	gap: var(--clubroom-space-2);
	padding: 0.5rem 0.75rem;
	border-radius: var(--clubroom-radius-small);
	color: var(--clubroom-colour-ink-soft);
	font-size: 0.9375rem;
	font-weight: 650;
	text-decoration: none;
}

.clubroom-desktop-nav a:hover,
.clubroom-desktop-nav a[aria-current="page"] {
	background: var(--clubroom-colour-surface-muted);
	color: var(--clubroom-colour-ink);
}

.clubroom-desktop-nav a[aria-current="page"] {
	box-shadow: inset 0 -0.15rem 0 var(--clubroom-colour-brand);
}

.clubroom-header__actions {
	display: flex;
	align-items: center;
	gap: var(--clubroom-space-2);
}

.clubroom-profile-menu {
	position: relative;
}

.clubroom-profile-menu summary {
	display: flex;
	min-height: 2.75rem;
	align-items: center;
	gap: var(--clubroom-space-2);
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--clubroom-colour-border);
	border-radius: var(--clubroom-radius-small);
	background: var(--clubroom-colour-surface);
	cursor: pointer;
	font-weight: 700;
	list-style: none;
}

.clubroom-profile-menu summary::-webkit-details-marker {
	display: none;
}

.clubroom-profile-menu summary .clubroom-icon:last-child {
	width: 1rem;
	height: 1rem;
	transition: transform var(--clubroom-transition-fast);
}

.clubroom-profile-menu[open] summary .clubroom-icon:last-child {
	transform: rotate(180deg);
}

.clubroom-profile-menu nav {
	position: absolute;
	top: calc(100% + var(--clubroom-space-2));
	right: 0;
	width: 14rem;
	padding: var(--clubroom-space-2);
	border: 1px solid var(--clubroom-colour-border);
	border-radius: var(--clubroom-radius-medium);
	background: var(--clubroom-colour-surface);
	box-shadow: var(--clubroom-shadow-menu);
}

.clubroom-profile-menu a {
	display: flex;
	min-height: 2.75rem;
	align-items: center;
	padding: 0.55rem 0.75rem;
	border-radius: var(--clubroom-radius-small);
	font-weight: 600;
	text-decoration: none;
}

.clubroom-profile-menu a:hover {
	background: var(--clubroom-colour-surface-muted);
}

.clubroom-profile-menu__divider {
	margin-top: var(--clubroom-space-2);
	padding-top: var(--clubroom-space-2);
	border-top: 1px solid var(--clubroom-colour-border);
}

.clubroom-main {
	width: min(100% - 2rem, var(--clubroom-content-width));
	min-height: calc(100vh - var(--clubroom-header-height) - 5rem);
	margin-inline: auto;
	padding-block: var(--clubroom-space-7);
}

.clubroom-page-heading {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: var(--clubroom-space-6);
	margin-bottom: var(--clubroom-space-6);
}

.clubroom-page-heading h1,
.clubroom-entry h1,
.clubroom-state-card h1 {
	margin-bottom: var(--clubroom-space-3);
	font-size: clamp(2rem, 5vw, 3.5rem);
	letter-spacing: -0.045em;
}

.clubroom-page-heading__summary,
.clubroom-entry > p,
.clubroom-state-card > p {
	max-width: var(--clubroom-reading-width);
	margin-bottom: 0;
	color: var(--clubroom-colour-ink-soft);
	font-size: 1.075rem;
}

.clubroom-eyebrow {
	margin-bottom: var(--clubroom-space-2);
	color: var(--clubroom-colour-brand-strong);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.clubroom-status-label {
	flex: none;
	padding: 0.35rem 0.6rem;
	border: 1px solid #d7bd58;
	border-radius: 999px;
	background: var(--clubroom-colour-brand-soft);
	color: var(--clubroom-colour-brand-strong);
	font-size: 0.75rem;
	font-weight: 750;
}

.clubroom-placeholder-card,
.clubroom-entry,
.clubroom-state-card {
	border: 1px solid var(--clubroom-colour-border);
	border-radius: var(--clubroom-radius-large);
	background: var(--clubroom-colour-surface);
	box-shadow: var(--clubroom-shadow-card);
}

.clubroom-placeholder-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--clubroom-space-5);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.clubroom-placeholder-card h2 {
	margin-bottom: var(--clubroom-space-2);
	font-size: 1.35rem;
}

.clubroom-placeholder-card p {
	max-width: var(--clubroom-reading-width);
	margin-bottom: 0;
	color: var(--clubroom-colour-ink-soft);
}

.clubroom-placeholder-card__icon {
	display: grid;
	width: 3rem;
	height: 3rem;
	place-items: center;
	border-radius: 50%;
	background: var(--clubroom-colour-brand-soft);
	color: var(--clubroom-colour-brand-strong);
}

.clubroom-entry,
.clubroom-state-card {
	max-width: 48rem;
	margin-inline: auto;
	padding: clamp(1.75rem, 6vw, 4rem);
}

.clubroom-entry__actions,
.clubroom-state-card .clubroom-button {
	margin-top: var(--clubroom-space-5);
}

.clubroom-entry__note {
	margin-top: var(--clubroom-space-4);
	font-size: 0.875rem !important;
}

.clubroom-footer {
	width: min(100% - 2rem, var(--clubroom-content-width));
	margin-inline: auto;
	padding-block: var(--clubroom-space-5);
	border-top: 1px solid var(--clubroom-colour-border);
	color: var(--clubroom-colour-ink-soft);
	font-size: 0.875rem;
}

.clubroom-footer p {
	margin: 0;
}

.clubroom-mobile-nav {
	display: none;
}