/* ============================================================
   THEME — students.iiitr.ac.in (Revamp 2026)
   Institutional · flat · black + blue · photo-led · zero gradients.
   Depends on tokens.css + grid.css.
   ============================================================ */

/* ===========================  NAV  =========================== */
.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	height: var(--nav-h);
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--border);
	transition: border-color 0.3s var(--ease);
}
/* Backdrop lives on a pseudo-element: backdrop-filter on .nav itself would
   make it the containing block for the fixed drawer + scrim below, trapping
   them inside the 72px bar */
.nav::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Solid by default (consistent on every inner page) */
	background: rgba(5, 7, 14, 0.92);
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	transition: opacity 0.3s var(--ease);
}
/* Transparent only over the homepage hero, until scrolled */
.has-hero .nav:not(.nav--scrolled) { border-bottom-color: transparent; }
.has-hero .nav:not(.nav--scrolled)::before { opacity: 0; }

.nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 20px;
}

.nav__brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--white);
	font-weight: 700;
	font-size: 1.1rem;
}
.nav__brand:hover { color: var(--white); }
.nav__logo { height: 38px; width: auto; object-fit: contain; }
.nav__sub {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--blue-bright);
	padding-left: 12px;
	border-left: 1px solid var(--border-strong);
}
@media (max-width: 560px) {
	.nav__logo { height: 32px; }
	.nav__sub { display: none; }
}

.nav__menu { display: flex; align-items: center; gap: 1px; }

.nav__link {
	color: rgba(255, 255, 255, 0.82);
	font-weight: 500;
	font-size: 0.9rem;
	padding: 8px 11px;
	border-radius: 8px;
	white-space: nowrap;
	transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
@media (min-width: 992px) and (max-width: 1150px) {
	.nav__logo { height: 32px; }
	.nav__sub { display: none; }
	.nav__link { padding: 8px 9px; font-size: 0.86rem; }
}
.nav__link:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }

.nav__search { color: rgba(255, 255, 255, 0.82); padding: 8px 12px; font-size: 1.02rem; }
.nav__search:hover { color: #fff; }

.nav__cta { padding: 9px 22px !important; font-size: 0.88rem !important; margin-left: 8px; }

.nav__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 40px;
	background: transparent;
	border: 1px solid var(--border-strong);
	border-radius: 10px;
	cursor: pointer;
	padding: 0 10px;
	position: relative;
	z-index: 1002;
	transition: border-color 0.2s var(--ease);
}
.nav__toggle:hover { border-color: var(--blue-line); }
.nav__toggle span {
	display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px;
	transform-origin: center;
	transition: transform 0.32s var(--ease), opacity 0.2s var(--ease);
}
.nav__toggle[aria-expanded='true'] { border-color: var(--blue); }
.nav__toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; transform: scaleX(0.3); }
.nav__toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Scrim behind the mobile drawer */
.nav__scrim {
	position: fixed; inset: 0; z-index: 999;
	background: rgba(3, 5, 10, 0.62);
	-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
	opacity: 0; pointer-events: none;
	transition: opacity 0.3s var(--ease);
}
.nav__scrim.is-open { opacity: 1; pointer-events: auto; }
@media (min-width: 992px) { .nav__scrim { display: none; } }

.nav__search-label { display: none; }
body.nav-open { overflow: hidden; }

/* ---------- Dropdown menus ---------- */
.nav__item--menu { position: relative; }
.nav__trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}
.nav__caret {
	font-size: 1.15em;
	transform: rotate(90deg);
	opacity: 0.6;
	transition: transform 0.25s var(--ease);
}
.nav__drop { display: block; padding: 10px 14px; border-radius: 10px; color: var(--text); }
.nav__drop:hover { background: var(--blue-tint); color: #fff; }
.nav__drop-label { display: block; font-weight: 600; font-size: 0.94rem; }
.nav__drop-desc { display: block; font-size: 0.78rem; color: var(--text-dim); margin-top: 2px; }

@media (min-width: 992px) {
	.nav__dropdown {
		position: absolute;
		top: calc(100% + 12px);
		left: 0;
		min-width: 268px;
		padding: 10px;
		background: rgba(9, 11, 20, 0.98);
		border: 1px solid var(--border);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
		z-index: 1001;
	}
	.nav__item--menu:hover .nav__dropdown,
	.nav__item--menu:focus-within .nav__dropdown,
	.nav__trigger[aria-expanded='true'] + .nav__dropdown {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	.nav__item--menu:hover .nav__caret,
	.nav__item--menu:focus-within .nav__caret { transform: rotate(-90deg); }
}

/* Mobile drawer — after the base dropdown rules so these win the cascade */
@media (max-width: 991px) {
	.nav { border-bottom-color: var(--border); }
	.nav::before { background: rgba(5, 7, 14, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
	.nav__toggle { display: flex; }

	/* Slide-in drawer from the right */
	.nav__menu {
		position: fixed;
		top: 0; right: 0; bottom: 0;
		width: min(342px, 86vw);
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: calc(var(--nav-h) + 8px) 0 28px;
		background: #080b14;
		border-left: 1px solid var(--border);
		box-shadow: -26px 0 70px rgba(0, 0, 0, 0.55);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transform: translateX(100%);
		opacity: 1;
		pointer-events: none;
		transition: transform 0.4s var(--ease);
		z-index: 1001;
	}
	.nav__menu.show { transform: translateX(0); pointer-events: auto; }

	/* Full-width rows with hairline dividers */
	.nav__link,
	.nav__trigger {
		width: 100%;
		text-align: left;
		padding: 15px 24px;
		font-size: 1rem;
		font-weight: 500;
		border-radius: 0;
		border-bottom: 1px solid var(--border);
		color: rgba(255, 255, 255, 0.9);
	}
	.nav__link:hover { background: var(--blue-tint); color: #fff; }
	.nav__trigger { justify-content: space-between; }

	/* Dropdowns become clean accordions */
	.nav__item--menu { width: 100%; border-bottom: 1px solid var(--border); }
	.nav__item--menu .nav__trigger { border-bottom: 0; }
	.nav__dropdown {
		position: static;
		min-width: 0;
		margin: 0 16px 0 24px;
		padding: 0;
		background: transparent;
		border: 0;
		border-left: 2px solid var(--blue-line);
		box-shadow: none;
		-webkit-backdrop-filter: none; backdrop-filter: none;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.34s var(--ease), margin-bottom 0.34s var(--ease);
	}
	.nav__trigger[aria-expanded='true'] + .nav__dropdown { max-height: 640px; margin-bottom: 10px; }
	.nav__trigger[aria-expanded='true'] .nav__caret { transform: rotate(-90deg); }
	.nav__drop { padding: 11px 16px; border-radius: 8px; }
	.nav__drop-desc { display: none; }

	/* Search becomes a labelled row */
	.nav__search {
		display: flex; align-items: center; gap: 13px;
		padding: 16px 24px; margin-top: 8px;
		font-size: 1rem; color: rgba(255, 255, 255, 0.9);
	}
	.nav__search .fa { width: 20px; text-align: center; }
	.nav__search-label { display: inline; font-weight: 500; }
}

/* ===========================  HERO  =========================== */
.hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.hero__media {
	position: absolute;
	inset: -2%;
	z-index: 0;
	background-image: url('../images/home/image.webp');
	background-size: cover;
	background-position: center 42%;
	animation: kenburns 24s var(--ease) both;
}
@keyframes kenburns {
	from { transform: scale(1.08); }
	to { transform: scale(1); }
}
/* Flat, solid darkening — no gradients */
.hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(5, 7, 14, 0.68);
}
.hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 44px);
	padding-top: calc(var(--nav-h) + clamp(28px, 6vh, 56px));
	padding-bottom: clamp(72px, 14vh, 128px);
}
.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 24px;
}
.hero__eyebrow::before { content: ''; width: 30px; height: 2px; background: var(--blue); flex: none; }

.hero__title {
	font-size: var(--fs-hero);
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: #fff;
	max-width: 15ch;
	margin: 0 0 22px;
}
.hero__title .accent {
	position: relative;
	display: inline-block;
	color: var(--blue-bright);
}
.hero__title .accent::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.1em;
	height: 4px;
	background: var(--blue);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	animation: drawLine 0.75s var(--ease) 1.05s forwards;
}
@keyframes drawLine { to { transform: scaleX(1); } }

/* Staggered hero entrance on load */
.hero__inner > * {
	opacity: 0;
	animation: heroUp 0.9s var(--ease) forwards;
}
.hero__eyebrow { animation-delay: 0.15s; }
.hero__title { animation-delay: 0.3s; }
.hero__sub { animation-delay: 0.55s; }
.hero__cta { animation-delay: 0.75s; }
@keyframes heroUp {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: none; }
}

.hero__sub {
	max-width: 540px;
	font-size: clamp(1.05rem, 1.5vw, 1.22rem);
	color: rgba(234, 238, 247, 0.82);
	margin-bottom: 36px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__scroll {
	position: absolute;
	z-index: 2;
	bottom: 26px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.72rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.hero__scroll::after {
	content: '';
	width: 1px;
	height: 34px;
	background: rgba(255, 255, 255, 0.4);
	animation: scrollLine 1.8s var(--ease) infinite;
	transform-origin: top;
}
@keyframes scrollLine { 0%,100% { transform: scaleY(0.4); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

/* Stats strip under hero */
.stat-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.stat {
	padding: 34px 26px;
	border-left: 1px solid var(--border);
}
.stat:first-child { border-left: none; }
.stat__num { font-size: 2.4rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.stat__num span { color: var(--blue-bright); }
.stat__label { font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
@media (max-width: 720px) {
	.stat-strip { grid-template-columns: 1fr; }
	.stat { border-left: none; border-top: 1px solid var(--border); }
	.stat:first-child { border-top: none; }
}

/* ====================  SECTION HEADER  ==================== */
.section-header { margin-bottom: var(--space-5); }
.section-header--center { text-align: center; }
.section-header__title { font-size: var(--fs-h2); margin-bottom: 12px; color: #fff; }
.section-header__subtitle { color: var(--text-dim); font-size: var(--fs-small); margin: 0; }

.section-title { font-size: var(--fs-h2); color: #fff; margin-bottom: 14px; }
.section-subtitle { color: var(--text-dim); font-size: var(--fs-small); }

/* ====================  ABOUT GRID  ==================== */
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.c-feature {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 30px 26px;
	transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.c-feature:hover { transform: translateY(-5px); border-color: var(--blue-line); }
.c-feature__k { font-size: 0.8rem; font-weight: 700; color: var(--blue-bright); letter-spacing: 0.14em; }
.c-feature h3 { font-size: 1.3rem; margin: 10px 0 8px; color: #fff; }
.c-feature p { margin: 0; font-size: 0.98rem; }
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } }

/* ========================  BUTTONS  ======================== */
.btn.button1, .button1, .btn.custom-btn, .custom-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 24px;
	border-radius: var(--radius-pill);
	background: var(--blue);
	color: #fff !important;
	font-weight: 600;
	font-size: 0.92rem;
	border: 1px solid transparent;
	transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn.button1:hover, .button1:hover, .custom-btn:hover {
	background: var(--blue-deep);
	color: #fff !important;
	transform: translateY(-2px);
}
.custom-btn.bordered, .custom-btn.bg-color {
	background: transparent;
	border-color: var(--border-strong);
}
.custom-btn.bordered:hover { border-color: var(--blue); background: transparent; }

/* =========================  CARDS  ========================= */
.c-person-card, .c-club-card, .c-person-card, .c-card, .c-event-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
	overflow: hidden;
}
.c-person-card:hover, .c-club-card:hover, .c-person-card:hover,
.c-card:hover, .c-event-card:hover {
	transform: translateY(-6px);
	border-color: var(--blue-line);
}

.c-person-card { margin: 0 0 8px; padding-bottom: 18px; }
.c-person-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.c-person-card__content { padding: 18px 16px 6px; }
.c-person-card__content h4 { color: #fff; font-size: 1.12rem; margin-bottom: 10px; }
.c-person-card__link { color: var(--text-muted); font-size: 1.1rem; margin: 0 7px; }
.c-person-card__link:hover { color: var(--blue-bright); }

.c-club-card { width: 100%; margin: 0; }
.c-club-card img { width: 100%; height: 290px; object-fit: contain; padding: 30px; background: var(--surface-2); }
.c-club-card__name h2 { font-size: 1.35rem; color: #fff; }
.c-club-card__icons a { color: var(--text-muted); font-size: 1.15rem; }
.c-club-card__icons a:hover { color: var(--blue-bright); }

.c-person-card { padding: 26px 16px 28px; text-align: center; }
.c-person-card img, .c-person-card__photo {
	width: 82%; max-width: 200px; aspect-ratio: 1/1; object-fit: cover;
	border-radius: var(--radius); margin: 0 auto 16px; border: 1px solid var(--border);
}
.c-person-card__name, .c-person-card__name { font-size: 1.15rem; font-weight: 600; color: #fff; margin-bottom: 2px; }
.c-person-card__role { font-size: 0.9rem; color: var(--text-muted); }
.c-person-card__icons a, .c-person-card__icons a { color: var(--text-muted); font-size: 1.15rem; margin: 0 8px; }
.c-person-card__icons a:hover, .c-person-card__icons a:hover { color: var(--blue-bright); }

/* Events / update cards */
.c-events, .c-club-page, .c-club-page { background: transparent; }
.c-club-page { padding-top: calc(var(--nav-h) + 56px); padding-bottom: 60px; }
.c-event-card { margin-bottom: 24px; }
.c-event-card img { width: 100%; height: 230px; object-fit: cover; }
.c-event-card__info { padding: 20px 22px 24px; }
.c-event-card__info h3 { color: #fff !important; font-size: 1.2rem; }
.c-event-card__info h5 { color: var(--text-dim) !important; font-size: 0.82rem; letter-spacing: 0.02em; }

/* =====================  CLUBS LANDING  ===================== */
.c-clubs { padding-top: calc(var(--nav-h) + 64px); padding-bottom: 100px; }
.c-clubs__head { max-width: 720px; margin-bottom: 44px; }
.c-clubs__title { font-size: clamp(2.4rem, 5vw, 3.8rem); color: #fff; margin: 0 0 16px; }
.c-clubs__intro { font-size: 1.12rem; color: var(--text-muted); margin: 0; }

/* Search + toolbar */
.c-clubs__toolbar { display: flex; flex-direction: column; gap: 18px; margin-bottom: 40px; }
.c-search { position: relative; max-width: 460px; width: 100%; }
.c-search__icon {
	position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
	color: var(--text-dim); font-size: 1rem; pointer-events: none;
}
.c-search__input {
	width: 100%; padding: 14px 18px 14px 46px;
	border-radius: var(--radius-pill);
	background: var(--surface); border: 1px solid var(--border-strong);
	color: var(--text); font-family: inherit; font-size: 0.98rem;
	transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.c-search__input::placeholder { color: var(--text-dim); }
.c-search__input:focus { outline: none; border-color: var(--blue); background: var(--surface-2); }
.c-search__input:focus + .c-search__icon, .c-search:focus-within .c-search__icon { color: var(--blue-bright); }

.c-clubs__empty { text-align: center; color: var(--text-muted); padding: 40px 0; font-size: 1.05rem; }

.c-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.c-filter__chip {
	padding: 9px 18px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border-strong);
	background: transparent;
	color: var(--text-muted);
	font-size: 0.88rem;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.c-filter__chip:hover { color: #fff; border-color: var(--blue-line); }
.c-filter__chip.is-active { color: #fff; background: var(--blue); border-color: var(--blue); }

.c-clubs__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}
.c-club {
	display: flex;
	flex-direction: column;
	min-height: 300px;
	padding: 22px;
	border-radius: var(--radius-lg);
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text);
	transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.c-club:hover { transform: translateY(-6px); border-color: var(--blue); background: var(--surface-2); color: var(--text); }
.c-club.is-hidden { display: none; }
.c-club__top { display: flex; justify-content: space-between; align-items: center; }
.c-club__num { font-size: 0.85rem; font-weight: 700; color: var(--text-dim); letter-spacing: 0.05em; }
.c-club__cat {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--blue-bright);
	padding: 4px 10px;
	border: 1px solid var(--blue-line);
	border-radius: var(--radius-pill);
}
.c-club__logo { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 10px; }
.c-club__logo img { max-height: 108px; max-width: 78%; width: auto; object-fit: contain; }
.c-club__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.c-club__name { font-size: 1.18rem; color: #fff; margin: 0; }
.c-club__go {
	font-size: 1.3rem;
	color: var(--blue-bright);
	transform: translateX(-6px);
	opacity: 0;
	transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.c-club:hover .c-club__go { transform: translateX(0); opacity: 1; }

/* Club detail commons */
.c-club-page { padding-top: calc(var(--nav-h) + 56px); padding-bottom: 80px; color: var(--text); }
.c-club-page__lead { width: min(850px, 90%); margin: auto; text-align: center; line-height: 1.8; font-size: 1.08rem; color: var(--text-muted); }
.c-stack { margin-top: var(--space-5); margin-bottom: var(--space-4); }
.c-club-page__heading { text-align: center; margin-bottom: 30px; }
.c-club-page__heading h2 { font-size: var(--fs-h2); }
.c-club-page__logo, .c-club-page__logo, .c-club-page__logo, .c-club-page__logo {
	display: block; margin: 0 auto 12px; width: min(220px, 40%);
}

/* =====================  PROFILE (council member)  ===================== */
.c-profile { padding-top: calc(var(--nav-h) + 56px); padding-bottom: 90px; }
.c-event { padding-top: calc(var(--nav-h) + 56px); padding-bottom: 90px; }

.c-profile__back,
.c-event .c-profile__back {
	display: inline-block;
	color: var(--text-muted);
	font-size: 0.9rem;
	margin-bottom: 34px;
}
.c-profile__back:hover { color: var(--blue-bright); }

.c-profile__grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: start;
}
.c-profile__media {
	margin: 0;
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
}
.c-profile__media::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 4px;
	background: var(--blue);
}
.c-profile__photo { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }

.c-profile__role {
	display: inline-block;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--blue-bright);
	margin-bottom: 12px;
}
.c-profile__name { font-size: clamp(2rem, 4vw, 3rem); color: #fff; margin: 0 0 26px; }

.c-profile__meta { margin: 0 0 26px; border-top: 1px solid var(--border); }
.c-profile__meta-row {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 13px 2px;
	border-bottom: 1px solid var(--border);
}
.c-profile__meta dt { color: var(--text-dim); font-size: 0.9rem; }
.c-profile__meta dd { margin: 0; color: var(--text); font-weight: 500; text-align: right; }

.c-profile__links { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.c-profile__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border-strong);
	color: var(--text);
	font-size: 0.9rem;
	font-weight: 500;
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
.c-profile__link:hover { border-color: var(--blue); color: #fff; background: var(--blue-tint); }

.c-profile__bio {
	color: var(--text-muted);
	line-height: 1.8;
	font-size: 1.05rem;
	border-left: 2px solid var(--blue);
	padding-left: 22px;
}
.c-profile__bio b { color: #fff; }

@media (max-width: 760px) {
	.c-profile__grid { grid-template-columns: 1fr; }
	.c-profile__media { max-width: 320px; }
}

/* =====================  EVENT detail + gallery  ===================== */
.c-event__date { font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-bright); margin: 0 0 10px; }
.c-event__title { font-size: clamp(2rem, 4.5vw, 3.2rem); color: #fff; margin: 0 0 30px; max-width: 20ch; }
.c-event__body { max-width: 760px; margin: 0 0 48px; line-height: 1.8; color: var(--text-muted); font-size: 1.08rem; }
.c-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.c-gallery__item { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.c-gallery__item img { width: 100%; height: 240px; object-fit: cover; transition: transform 0.5s var(--ease); }
.c-gallery__item:hover img { transform: scale(1.05); }

/* Homepage gallery grid */
#grid .column img {
	border-radius: var(--radius);
	margin-bottom: 16px;
	border: 1px solid var(--border);
	transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
#grid .column img:hover { transform: scale(1.02); border-color: var(--blue-line); }

/* Neutralise legacy template bits */
.bg-overlay { display: none !important; }
.about { background: transparent; }
.about h2 { color: #fff; }
.gsc-control-cse { background: transparent !important; border: none !important; }

/* =====================  CONTENT PAGES  ===================== */
.c-page { padding-top: calc(var(--nav-h) + 64px); padding-bottom: 100px; }
.c-page__head { max-width: 760px; margin-bottom: 48px; }
.c-page__title { font-size: clamp(2.3rem, 5vw, 3.6rem); color: #fff; margin: 0 0 16px; }
.c-page__intro { font-size: 1.15rem; color: var(--text-muted); margin: 0; }

/* prose */
.c-page__body { max-width: 820px; }
.c-page__body.is-wide { max-width: none; }
.c-page__body h2 { font-size: var(--fs-h3); color: #fff; margin: 2em 0 0.6em; }
.c-page__body h3 { font-size: 1.15rem; color: #fff; margin: 1.6em 0 0.5em; }
.c-page__body p { color: var(--text-muted); line-height: 1.8; }
.c-page__body ul, .c-page__body ol { color: var(--text-muted); line-height: 1.9; padding-left: 1.2em; }
.c-page__body li { margin-bottom: 6px; }
.c-page__body a { color: var(--blue-bright); }
.c-page__body a:hover { color: #fff; }
.c-page__body strong, .c-page__body b { color: #fff; }
.c-page__body hr { border: 0; border-top: 1px solid var(--border); margin: 2.5em 0; }

/* reusable components for mock pages */
.c-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 8px 0; }
.c-grid--3 { grid-template-columns: repeat(3, 1fr); }
.c-grid--4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (max-width: 780px) { .c-grid--3 { grid-template-columns: 1fr; } }

.c-tile {
	display: block;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 26px 24px;
	color: var(--text);
	transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.c-tile:hover { transform: translateY(-5px); border-color: var(--blue-line); color: var(--text); }
.c-tile__k { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-bright); }
.c-tile__title { font-size: 1.2rem; color: #fff; margin: 10px 0 8px; }
.c-tile__title--sm { font-size: 1.05rem; }
.c-tile p { margin: 0; font-size: 0.95rem; color: var(--text-muted); }
.c-tile__meta { display: block; margin-top: 12px; font-size: 0.82rem; color: var(--text-dim); }

/* stat row */
.c-stats { display: flex; flex-wrap: wrap; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 10px 0; }
.c-stats__item { flex: 1 1 150px; background: var(--bg-2); padding: 26px 22px; }
.c-stats__num { font-size: 2rem; font-weight: 700; color: #fff; }
.c-stats__num span { color: var(--blue-bright); }
.c-stats__label { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }

/* link list (resources / documents) */
.c-links { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.c-link-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text);
	transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.c-link-row:hover { border-color: var(--blue); background: var(--surface-2); color: var(--text); }
.c-link-row__label { font-weight: 600; color: #fff; }
.c-link-row__desc { font-size: 0.85rem; color: var(--text-dim); }
.c-link-row__go { color: var(--blue-bright); font-size: 1.1rem; }

/* table */
.c-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); margin: 10px 0; }
.c-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.c-table th, .c-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.c-table th { background: var(--bg-2); color: #fff; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
.c-table td { color: var(--text-muted); }
.c-table tr:last-child td { border-bottom: 0; }

/* timeline (announcements / minutes) */
.c-timeline { border-left: 2px solid var(--border); padding-left: 26px; margin: 10px 0; display: flex; flex-direction: column; gap: 28px; }
.c-timeline__item { position: relative; }
.c-timeline__item::before { content: ''; position: absolute; left: -33px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px var(--bg); }
.c-timeline__date { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-bright); }
.c-timeline__title { font-size: 1.1rem; color: #fff; margin: 4px 0 6px; }

/* pill badge */
.c-badge { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-bright); border: 1px solid var(--blue-line); border-radius: var(--radius-pill); padding: 4px 12px; }
.c-badge--muted { color: var(--text-dim); border-color: var(--border); }

/* callout / CTA band */
.c-callout {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 40px;
	margin: 24px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.c-callout h3 { margin: 0 0 6px; color: #fff; }
.c-callout p { margin: 0; color: var(--text-muted); }

.c-note { display: inline-block; margin-top: 10px; font-size: 0.8rem; color: var(--text-dim); font-style: italic; }
.c-note code { font-style: normal; color: var(--text-muted); }

/* FAQ accordion (native details) */
.c-faq { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.c-faq__item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.c-faq__item summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 22px;
	font-weight: 600;
	color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.c-faq__item summary::-webkit-details-marker { display: none; }
.c-faq__item summary::after { content: '+'; color: var(--blue-bright); font-size: 1.4rem; line-height: 1; transition: transform 0.25s var(--ease); }
.c-faq__item[open] summary::after { transform: rotate(45deg); }
.c-faq__item p { margin: 0; padding: 0 22px 20px; color: var(--text-muted); line-height: 1.7; }

/* Forms */
.c-form { max-width: 620px; display: flex; flex-direction: column; gap: 18px; margin: 14px 0; }
.c-field { display: flex; flex-direction: column; gap: 8px; }
.c-field label { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.c-field input, .c-field select, .c-field textarea {
	width: 100%;
	padding: 12px 15px;
	background: var(--bg-2);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	color: var(--text);
	font-family: inherit;
	font-size: 0.98rem;
}
.c-field input::placeholder, .c-field textarea::placeholder { color: var(--text-dim); }
.c-field input:focus, .c-field select:focus, .c-field textarea:focus { outline: none; border-color: var(--blue); }
.c-form .btn-ds { align-self: flex-start; }

/* =========================  FOOTER  ========================= */
.footer {
	position: relative;
	border-top: 1px solid var(--border);
	background: var(--bg-2);
	padding: clamp(56px, 8vw, 88px) 0 0;
	margin-top: 40px;
	overflow: hidden;
}
.footer::before {
	content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
	background: var(--blue); opacity: 0.5;
}
.footer__top {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: 1.35fr 2fr; gap: clamp(34px, 5vw, 72px);
}
.footer__brand { max-width: 380px; }
.footer__brand-logo { width: 230px; max-width: 100%; height: auto; margin-bottom: 20px; }
.footer__tagline { color: var(--text-muted); font-size: 0.96rem; line-height: 1.7; margin: 0 0 20px; }
.footer__mail {
	display: inline-flex; align-items: center; gap: 9px;
	color: var(--text); font-weight: 500; margin-bottom: 24px;
}
.footer__mail:hover { color: var(--blue-bright); }
.footer__mail .fa { color: var(--blue-bright); }

.footer__social { display: flex; gap: 12px; }
.footer__soc {
	width: 42px; height: 42px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--border-strong); color: var(--text-muted); font-size: 1.02rem; line-height: 1;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}
.footer__soc:hover { color: #fff; border-color: var(--blue); background: var(--blue-tint); transform: translateY(-3px); }

.footer__nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 4vw, 44px); max-width: 460px; }
.footer__col h3 {
	color: #fff; font-size: 0.8rem; font-weight: 700;
	letter-spacing: 0.13em; text-transform: uppercase; margin: 0 0 16px;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer__col a {
	color: var(--text-muted); font-size: 0.95rem;
	transition: color 0.2s var(--ease), padding-left 0.2s var(--ease);
}
.footer__col a:hover { color: #fff; padding-left: 5px; }

.footer__wordmark {
	position: relative; z-index: 0;
	margin-top: clamp(34px, 6vw, 60px);
	text-align: center; white-space: nowrap; user-select: none;
	font-size: clamp(2.6rem, 13vw, 10rem); font-weight: 800; letter-spacing: -0.03em; line-height: 0.85;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.07);
}

.footer__bottom {
	position: relative; z-index: 1;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
	margin-top: clamp(24px, 4vw, 36px); padding-block: 22px 28px;
	border-top: 1px solid var(--border);
	color: var(--text-dim); font-size: 0.86rem;
}
.footer__copy { margin: 0; color: var(--text-dim); }
.footer__copy a { color: var(--text-muted); }
.footer__copy a:hover { color: var(--blue-bright); }
.footer__links { display: flex; align-items: center; gap: 20px; }
.footer__links a { color: var(--text-muted); font-size: 0.86rem; }
.footer__links a:hover { color: #fff; }
.footer__totop { display: inline-flex; align-items: center; gap: 7px; }

@media (max-width: 860px) {
	.footer__top { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.footer__nav { grid-template-columns: 1fr 1fr; }
	.footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Decrypt title: keep the scramble from shifting layout */
.hero__title [data-decrypt] { white-space: pre-wrap; }

/* ============================================================
   CLUB PAGES — themeable, accent-driven (Revamp 2026)
   Each page sets --ca (club accent) on the .club root; every
   surface, rule, icon and number derives from it via color-mix.
   Flat, zero-gradient — the colour IS the identity.
   ============================================================ */
.club {
	--ca: var(--blue);
	--ca-soft: color-mix(in srgb, var(--ca) 13%, transparent);
	--ca-softer: color-mix(in srgb, var(--ca) 7%, transparent);
	--ca-line: color-mix(in srgb, var(--ca) 42%, transparent);
	--ca-ink: color-mix(in srgb, var(--ca) 60%, #ffffff);
	color: var(--text);
	padding-bottom: clamp(60px, 9vw, 110px);
}
.club .shell { max-width: 1120px; }

/* ---- Hero ---- */
.club-hero {
	position: relative;
	padding: calc(var(--nav-h) + 64px) 0 56px;
	border-bottom: 1px solid var(--border);
	overflow: hidden;
}
.club-hero::before {
	content: '';
	position: absolute; inset: 0;
	background: var(--ca-softer);
	pointer-events: none;
}
.club-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(26px, 5vw, 56px);
	align-items: center;
}
.club-hero__badge {
	width: clamp(132px, 20vw, 196px);
	aspect-ratio: 1;
	border-radius: 26px;
	background: var(--surface);
	border: 1px solid var(--ca-line);
	box-shadow: var(--shadow-card);
	display: grid;
	place-items: center;
	padding: 20px;
}
.club-hero__badge img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.club-hero__title { font-size: clamp(2.3rem, 5.2vw, 3.9rem); margin: 16px 0 12px; }
.club-hero__tagline { font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--text-muted); max-width: 54ch; margin: 0 0 22px; }

/* ---- Accent chip ---- */
.club-chip {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--ca-ink); background: var(--ca-soft);
	border: 1px solid var(--ca-line); border-radius: var(--radius-pill);
	padding: 6px 14px;
}

/* ---- Social pill row ---- */
.club-social { display: flex; flex-wrap: wrap; gap: 12px; }
.club-social a {
	width: 44px; height: 44px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--border-strong);
	color: var(--text-muted); font-size: 1.05rem; line-height: 1;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}
.club-social a::before { line-height: 1; }
.club-social a:hover { color: #fff; border-color: var(--ca); background: var(--ca-soft); transform: translateY(-2px); }

/* ---- Accent button ---- */
.club-btn {
	display: inline-flex; align-items: center; gap: 9px;
	background: var(--ca); color: #fff;
	padding: 13px 26px; border-radius: var(--radius-pill);
	font-weight: 600; font-size: 0.96rem; border: 1px solid transparent;
	transition: filter 0.2s var(--ease), transform 0.2s var(--ease);
}
.club-btn:hover { filter: brightness(1.12); color: #fff; transform: translateY(-2px); }

/* ---- Sections ---- */
.club-section { padding-block: clamp(46px, 7vw, 82px); }
.club-section--tint { background: var(--ca-softer); border-block: 1px solid var(--border); }
.club-eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--ca-ink); margin-bottom: 16px;
}
.club-eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--ca); }
.club-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 0 0 20px; }
.club-lead { max-width: 72ch; font-size: 1.1rem; line-height: 1.8; color: var(--text-muted); }
.club-lead b, .club-lead strong { color: var(--text); }

/* ---- "What we do" feature cards ---- */
.club-do {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 18px;
	margin-top: 34px;
}
.club-do__item {
	padding: 28px 24px; border-radius: 18px;
	background: var(--surface); border: 1px solid var(--border);
	border-top: 3px solid var(--ca);
	transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.club-do__item:hover { transform: translateY(-5px); border-color: var(--ca-line); }
/* two-class selector so it beats FontAwesome's `.fa { display:inline-block }`
   (font-awesome.min.css loads after theme.css) */
.club-do__item .club-do__ico {
	width: 48px; height: 48px; border-radius: 14px;
	display: flex; align-items: center; justify-content: center; text-align: center;
	line-height: 1; margin-bottom: 16px;
	background: var(--ca-soft); color: var(--ca-ink); font-size: 1.3rem;
}
.club-do__item .club-do__ico::before { line-height: 1; }
.club-do__item h3 { font-size: 1.14rem; color: #fff; margin: 0 0 8px; }
.club-do__item p { font-size: 0.96rem; color: var(--text-muted); margin: 0; }

/* ---- Objectives / bullet list ---- */
.club-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; max-width: 860px; }
.club-list li { position: relative; padding-left: 30px; color: var(--text-muted); line-height: 1.65; }
.club-list li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 12px; height: 12px; border-radius: 3px; background: var(--ca); }
.club-list li b { color: var(--text); }

/* ---- Stat strip ---- */
.club-stats { display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 64px); }
.club-stat__num { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1; }
.club-stat__num span { color: var(--ca); }
.club-stat__label { color: var(--text-muted); font-size: 0.92rem; margin-top: 8px; }

/* ---- Motto / quote ---- */
.club-motto {
	border-left: 3px solid var(--ca);
	background: var(--ca-soft);
	padding: 26px 30px; border-radius: 0 16px 16px 0; margin-top: 30px;
}
.club-motto p { font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: #fff; font-style: italic; margin: 0; line-height: 1.5; }

/* ---- Team ---- */
.club-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(206px, 1fr)); gap: 22px; margin-top: 32px; }
.club-people--tight { max-width: 720px; }
.club-person {
	background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
	padding: 26px 20px 22px; text-align: center;
	transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.club-person:hover { transform: translateY(-6px); border-color: var(--ca-line); }
.club-person__photo,
.club-person__avatar {
	width: 116px; height: 116px; border-radius: 50%; object-fit: cover;
	margin: 0 auto 16px; border: 2px solid var(--ca-line);
}
.club-person__avatar { display: grid; place-items: center; background: var(--ca-soft); color: var(--ca-ink); font-size: 2.1rem; font-weight: 700; letter-spacing: 0.02em; }
.club-person__name { font-size: 1.06rem; font-weight: 600; color: #fff; margin: 0 0 3px; }
.club-person__name a { color: inherit; }
.club-person__name a:hover { color: var(--ca-ink); }
.club-person__role { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 14px; }
.club-person__links a { color: var(--text-muted); font-size: 1.08rem; margin: 0 8px; transition: color 0.2s var(--ease); }
.club-person__links a:hover { color: var(--ca-ink); }
.club-role-label {
	font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--text-dim); margin: 40px 0 4px;
}

/* ---- Gallery ---- */
.club-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-top: 32px; }
.club-gallery figure {
	margin: 0; border-radius: 16px; overflow: hidden;
	background: var(--surface); border: 1px solid var(--border);
	transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.club-gallery figure:hover { transform: translateY(-5px); border-color: var(--ca-line); }
.club-gallery img { width: 100%; height: 198px; object-fit: cover; }
.club-gallery figcaption { padding: 16px 18px; }
.club-gallery figcaption h3 { font-size: 1.05rem; color: #fff; margin: 0 0 6px; }
.club-gallery figcaption p { font-size: 0.92rem; color: var(--text-muted); margin: 0; }

/* ---- Reach-us CTA ---- */
.club-cta {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px;
	padding: clamp(28px, 5vw, 46px);
	border-radius: 22px; background: var(--surface); border: 1px solid var(--ca-line);
}
.club-cta h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 8px; }
.club-cta p { color: var(--text-muted); margin: 0; }
.club-back { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 26px; }
.club-back:hover { color: var(--ca-ink); }

@media (max-width: 720px) {
	.club-hero__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.club-hero__tagline { margin-inline: auto; }
	.club-social { justify-content: center; }
	.club-chip { white-space: normal; }
	.club-people--tight { max-width: 100%; }
}
@media (max-width: 540px) {
	.club-hero { padding-top: calc(var(--nav-h) + 40px); }
	.club-hero__badge { width: 128px; }
	.club-do, .club-people { grid-template-columns: 1fr; }
	.club-cta { flex-direction: column; align-items: flex-start; text-align: left; }
	.club-cta .club-btn { width: 100%; justify-content: center; }
	.club-motto { padding: 22px 22px; }
}

/* ============================================================
   404 — NOT FOUND
   Plain and static: same flat black/blue system as the rest of
   the site, no motion.
   ============================================================ */
.nf {
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: calc(var(--nav-h) + 64px) 80px;
}

.nf__inner {
	max-width: 620px;
	margin-inline: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nf__code {
	font-size: clamp(4.2rem, 16vw, 8.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	color: #fff;
	margin: 4px 0 20px;
}
.nf__code .nf__accent { color: var(--blue-bright); }

.nf__lead {
	color: var(--text-muted);
	font-size: clamp(1.02rem, 1.6vw, 1.15rem);
	max-width: 46ch;
	margin: 0 0 30px;
}

.nf__terminal {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 12px 18px;
	font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: 0.88rem;
	color: var(--text-muted);
	margin-bottom: 34px;
}
.nf__prompt { color: var(--blue-bright); font-weight: 700; flex: none; }
.nf__cmd { color: #fff; flex: none; }
.nf__path { color: var(--text-muted); word-break: break-all; text-align: left; }

.nf__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 26px; }

.nf__report { color: var(--text-dim); font-size: 0.9rem; }
.nf__report:hover { color: var(--blue-bright); }

@media (max-width: 560px) {
	.nf__terminal { font-size: 0.8rem; padding: 11px 14px; }
}