/* ==========================================================================
   Celia Noire — footer
   The closing editorial moment: deep noir, one large wordmark, quiet gold
   labels, no cards, no boxes, no gradients.
   ========================================================================== */

.cn-footer {
	--cn-bg: var(--cn-noir);
	--cn-fg: rgba(250, 246, 241, 0.78);
	--cn-fg-strong: var(--cn-ivory);
	--cn-accent: var(--cn-gold);
	--cn-rule: rgba(250, 246, 241, 0.16);

	background-color: var(--cn-bg);
	color: var(--cn-fg);
}

.cn-footer__inner {
	max-width: var(--cn-shell);
	margin-inline: auto;
	padding: clamp(4rem, 9vw, 7rem) var(--cn-gutter) clamp(2.5rem, 5vw, 3.5rem);
	display: flex;
	flex-direction: column;
	gap: clamp(3rem, 8vw, 4.5rem);
}

/* --------------------------------------------------------------------------
   Brand block
   -------------------------------------------------------------------------- */

.cn-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	max-width: 32rem;
}

.cn-footer__wordmark {
	font-family: var(--cn-font-display);
	font-size: clamp(2.25rem, 6vw, 4rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: var(--cn-tracking-wider);
	text-transform: uppercase;
	color: var(--cn-fg-strong);
	margin-right: calc(var(--cn-tracking-wider) * -1);
}

/* Fluid between ~132px at 390 and the 176px desktop max, so it scales with
   the viewport instead of jumping at breakpoints. */
.cn-footer__logo {
	width: clamp(132px, 4.2vw + 116px, 176px);
	height: auto;
}

.cn-footer__text {
	max-width: 36ch;
	font-size: var(--cn-text-sm);
	line-height: 1.7;
	color: var(--cn-fg);
}

/* --------------------------------------------------------------------------
   Navigation + Connect columns
   -------------------------------------------------------------------------- */

.cn-footer__columns {
	display: flex;
	flex-direction: column;
	gap: clamp(2.25rem, 7vw, 2.75rem);
}

.cn-footer__col {
	width: 100%;
}

.cn-footer__heading {
	margin-bottom: 1.1rem;
	font-family: var(--cn-font-body);
	font-size: var(--cn-text-xs);
	font-weight: 500;
	letter-spacing: var(--cn-tracking-wider);
	text-transform: uppercase;
	color: var(--cn-accent);
}

.cn-footer__list li + li {
	margin-top: 0.85rem;
}

.cn-footer__list a {
	position: relative;
	display: inline-block;
	padding-bottom: 0.15em;
	font-size: var(--cn-text-sm);
	color: var(--cn-fg);
	transition: color var(--cn-dur-hover) var(--cn-ease);
}

.cn-footer__list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--cn-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--cn-dur-hover) var(--cn-ease);
}

.cn-footer__list a:hover,
.cn-footer__list a:focus-visible {
	color: var(--cn-fg-strong);
}

.cn-footer__list a:hover::after,
.cn-footer__list a:focus-visible::after {
	transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Base row — disclosure + copyright
   -------------------------------------------------------------------------- */

.cn-footer__base {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding-top: clamp(2rem, 5vw, 2.5rem);
	border-top: 1px solid var(--cn-rule);
}

.cn-footer__disclosure {
	max-width: 62ch;
	font-size: var(--cn-text-xs);
	line-height: 1.6;
	color: rgba(250, 246, 241, 0.55);
}

.cn-footer__copy {
	font-size: var(--cn-text-xs);
	letter-spacing: var(--cn-tracking-wide);
	text-transform: uppercase;
	color: rgba(250, 246, 241, 0.55);
}

/* --------------------------------------------------------------------------
   Tablet — columns run side by side under the brand block
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
	.cn-footer__columns {
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: clamp(3rem, 6vw, 5rem);
		row-gap: 2.5rem;
	}

	.cn-footer__col {
		width: auto;
		flex: 0 1 180px;
	}

	.cn-footer__base {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 2rem;
	}

	.cn-footer__disclosure {
		margin: 0;
	}
}

/* --------------------------------------------------------------------------
   Desktop — brand on the left, columns arranged to the right
   -------------------------------------------------------------------------- */

@media (min-width: 1000px) {
	.cn-footer__inner {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;
		column-gap: clamp(4rem, 8vw, 7rem);
		row-gap: clamp(3rem, 6vw, 4rem);
	}

	.cn-footer__brand {
		flex: 0 1 26rem;
	}

	.cn-footer__columns {
		flex: 1 1 auto;
		justify-content: flex-end;
	}

	.cn-footer__base {
		flex-basis: 100%;
	}
}