/* ==========================================================================
   Carlo Studio — footer (original dark graphite design)
   ========================================================================== */

.crl-footer {
	padding-top: 52px;
	background:
		radial-gradient(circle at 10% 0%, #2C2E30, transparent 34%),
		linear-gradient(145deg, #101112, #18191B);
	color: #fff;
}

.crl-footer__main {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	padding-bottom: 36px;
}

.crl-footer__brand { padding-bottom: 22px; }
.crl-footer__logo { display: inline-block; line-height: 0; }
.crl-footer__logo img { width: 112px; height: auto; max-width: 100%; }
.crl-footer__desc { max-width: 300px; margin: 20px 0 18px; color: #A3A3A3; font-size: 13px; line-height: 1.8; }

.crl-footer__social { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.crl-footer__social a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: #fff; font-size: 12px; letter-spacing: .1em; text-decoration: none; }
.crl-footer__social a:hover span { text-decoration: underline; text-underline-offset: 4px; }

.crl-footer__col { border-top: 1px solid rgba(255, 255, 255, .1); }
.crl-footer__details > summary { list-style: none; }
.crl-footer__details > summary::-webkit-details-marker { display: none; }

.crl-footer__col-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 52px;
	margin: 0;
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	cursor: pointer;
}
.crl-footer__col-title .crl-icon { width: 16px; height: 16px; transition: transform .3s var(--crl-ease); }
.crl-footer__details[open] .crl-footer__col-title .crl-icon { transform: rotate(180deg); }

.crl-footer__links { margin: 0; padding: 0 0 18px; list-style: none; display: grid; gap: 4px; }
.crl-footer__links a, .crl-footer__links span {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	color: #9A9A9A;
	font-size: 13px;
	text-decoration: none;
	transition: color .25s var(--crl-ease), transform .25s var(--crl-ease);
}
.crl-footer__links a:hover { color: #fff; transform: translateX(3px); }
.crl-footer__missing { opacity: .5; text-decoration: line-through dotted; }

.crl-footer__newsletter { padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .1); }
.crl-footer__newsletter .crl-footer__col-title { min-height: 0; margin-bottom: 12px; cursor: default; }
.crl-footer__nl-text { max-width: 320px; margin: 0 0 18px; color: #9A9A9A; font-size: 13px; line-height: 1.7; }
.crl-footer .crl-form--newsletter .crl-form__row { border-color: rgba(255, 255, 255, .35); }
.crl-footer .crl-form--newsletter .crl-form__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.crl-footer .crl-consent { color: #8E8E8E; font-size: 11px; }

.crl-footer__contact { display: grid; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.crl-footer__contact li { display: flex; align-items: center; gap: 10px; color: #A3A3A3; font-size: 13px; }
.crl-footer__contact a { color: inherit; text-decoration: none; }
.crl-footer__contact a:hover { color: #fff; }
.crl-footer__contact .crl-icon { width: 16px; height: 16px; }

.crl-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-block: 22px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	color: #8A8A8A;
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.crl-footer__payments { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.crl-footer__payments li { padding: 5px 8px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 2px; letter-spacing: .06em; }

@media (min-width: 768px) {
	.crl-footer { padding-top: 76px; }
	.crl-footer__main { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 64px; }
	.crl-footer__brand { grid-column: 1 / -1; padding-bottom: 0; }
	.crl-footer__newsletter { grid-column: 1 / -1; padding-top: 0; border-top: 0; }
	.crl-footer__col { border-top: 0; }
	.crl-footer__col-title { min-height: 0; margin-bottom: 16px; cursor: default; pointer-events: none; }
	.crl-footer__col-title .crl-icon { display: none; }
	.crl-footer__links { padding: 0; }
	.crl-footer__links a, .crl-footer__links span { min-height: 30px; font-size: 12px; }
	.crl-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; min-height: 70px; padding-block: 16px; }
}

@media (min-width: 1100px) {
	.crl-footer__main { grid-template-columns: 1.45fr .75fr .95fr .95fr 1.35fr; gap: 48px; }
	.crl-footer__brand { grid-column: auto; }
	.crl-footer__newsletter { grid-column: auto; }
}

/* ==========================================================================
   4.1 — Editorial footer: brand statement + featured newsletter, quiet link
   columns and a large logotype that closes the page.
   ========================================================================== */
.crl-footer--editorial {
	padding-top: 64px;
	background: #121314;
}

.crl-footer--editorial .crl-footer__top {
	display: grid;
	gap: 36px;
	padding-bottom: 52px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.crl-footer__statement {
	max-width: 12ch;
	margin: 0;
	color: #fff;
	font-size: clamp(32px, 8.4vw, 64px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.01em;
	text-transform: uppercase;
}
.crl-footer--editorial .crl-footer__newsletter { padding-top: 0; border-top: 0; align-self: end; max-width: 460px; }
.crl-footer--editorial .crl-footer__newsletter .crl-footer__col-title { color: #fff; }
.crl-footer--editorial .crl-footer__nl-text { color: #A39E97; font-size: 14px; }
.crl-footer--editorial .crl-form--newsletter .crl-form__row { border-color: rgba(255, 255, 255, .4); }
.crl-footer--editorial .crl-form--newsletter input[type="email"] { min-height: 56px; font-size: 16px; }

.crl-footer--editorial .crl-footer__main { padding-top: 40px; padding-bottom: 28px; }
.crl-footer--editorial .crl-footer__brand { padding-bottom: 24px; }
.crl-footer--editorial .crl-footer__desc { margin-top: 0; color: #A39E97; font-size: 14px; }
.crl-footer--editorial .crl-footer__links a, .crl-footer--editorial .crl-footer__links span { color: #A39E97; font-size: 14px; }
.crl-footer--editorial .crl-footer__links a { position: relative; }
.crl-footer--editorial .crl-footer__links a:hover { color: #fff; transform: none; }
.crl-footer--editorial .crl-footer__links a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--crl-d3) var(--crl-ease);
}
.crl-footer--editorial .crl-footer__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.crl-footer--editorial .crl-footer__col-title { color: #D9D4CC; }

.crl-footer__mark {
	display: block;
	padding: 28px 0 20px;
	line-height: 0;
	opacity: .9;
	transition: opacity var(--crl-d3) var(--crl-ease);
}
.crl-footer__mark:hover { opacity: 1; }
.crl-footer__mark img { display: block; width: min(56%, 220px); height: auto; margin-inline: auto; }
@media (min-width: 768px) { .crl-footer__mark img { width: 260px; } }
@media (min-width: 1100px) { .crl-footer__mark img { width: 300px; } }
/* The logotype is never scaled beyond its original 632 px, so it stays sharp. */

.crl-footer--editorial .crl-footer__bottom { color: #7E7A74; }

@media (min-width: 768px) {
	.crl-footer--editorial { padding-top: 96px; }
	.crl-footer--editorial .crl-footer__top { grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); gap: 56px; padding-bottom: 80px; }
	.crl-footer--editorial .crl-footer__main { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 64px; padding-bottom: 56px; }
	.crl-footer--editorial .crl-footer__brand { grid-column: 1 / -1; }
	.crl-footer--editorial .crl-footer__links a, .crl-footer--editorial .crl-footer__links span { font-size: 13px; }
	.crl-footer__mark { padding: 36px 0 32px; }
}

@media (min-width: 1100px) {
	.crl-footer--editorial .crl-footer__main { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 56px; }
	.crl-footer--editorial .crl-footer__brand { grid-column: auto; max-width: 340px; }
}

/* ==========================================================================
   4.5 — Black, full-width footer with company data and legal bar.
   The background always reaches both screen edges (the wrapper breaks out
   of boxed containers in core.css); only the content keeps a max width.
   ========================================================================== */
.crl-footer,
.crl-footer--editorial { background: var(--crl-dark, #0B0B0B); }
.crl-footer > .crl-container { width: 100%; max-width: var(--crl-max); margin-inline: auto; padding-inline: var(--crl-gutter); box-sizing: border-box; }

.crl-footer__company { margin: 0; padding: 0 0 18px; list-style: none; display: grid; gap: 12px; }
.crl-footer__company li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; color: #A39E97; font-size: 13px; line-height: 1.6; }
.crl-footer__company .crl-icon { width: 16px; height: 16px; margin-top: 3px; color: #fff; }
.crl-footer__company a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.crl-footer__company a:hover { color: #fff; }

.crl-footer__legal { display: flex; flex-direction: column; gap: 8px; }
.crl-footer__legal-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.crl-footer__legal-links a { display: inline-flex; min-height: 32px; align-items: center; color: inherit; text-decoration: none; }
.crl-footer__legal-links a:hover { color: #fff; }
.crl-footer__bottom { text-transform: none; letter-spacing: .04em; font-size: 11px; line-height: 1.6; }

@media (min-width: 768px) {
	.crl-footer__company { padding: 0; }
	.crl-footer--editorial .crl-footer__main,
	.crl-footer--classic .crl-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.crl-footer__legal { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
}
@media (min-width: 1100px) {
	.crl-footer--editorial .crl-footer__main,
	.crl-footer--classic .crl-footer__main { grid-template-columns: minmax(0, 1.5fr) repeat(var(--crl-fcols, 3), minmax(0, 1fr)); gap: 48px; }
	.crl-footer--classic .crl-footer__brand,
	.crl-footer--editorial .crl-footer__brand { grid-column: auto; max-width: 340px; }
	.crl-footer--classic .crl-footer__newsletter { max-width: 460px; padding-bottom: 40px; }
}

/* ==========================================================================
   4.6 — Newsletter in its own light band; the footer keeps only the useful
   information (brand, links, contact, legal) on a softer charcoal, with a
   small logo like the one in the header.
   ========================================================================== */
.crl-footer,
.crl-footer--editorial,
.crl-footer--classic { padding-top: 0; background: transparent; }

.crl-footer__body {
	padding-top: 56px;
	background: var(--crl-footer-bg, #1A1A1A);
	color: #fff;
}

/* --- Newsletter band --- */
.crl-footer__band {
	--crl-band-bg: #F3EFE8;
	--crl-band-fg: #151515;
	--crl-band-muted: #6E6860;
	background: var(--crl-band-bg);
	color: var(--crl-band-fg);
	border-top: 1px solid rgba(0, 0, 0, .06);
}
.crl-footer__band--stone { --crl-band-bg: #E4E1DC; --crl-band-muted: #5E5A55; }
.crl-footer__band--dark { --crl-band-bg: #232323; --crl-band-fg: #fff; --crl-band-muted: #B3ADA5; border-top-color: transparent; }
.crl-footer__band-inner {
	display: grid;
	gap: 28px;
	padding-block: 48px;
	width: 100%;
	max-width: var(--crl-max);
	margin-inline: auto;
	padding-inline: var(--crl-gutter);
	box-sizing: border-box;
}
.crl-footer__band-eyebrow {
	margin: 0 0 14px;
	color: var(--crl-band-muted);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
}
.crl-footer__band .crl-footer__statement {
	max-width: 14ch;
	margin: 0;
	color: var(--crl-band-fg);
	font-size: clamp(28px, 6.4vw, 46px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -.01em;
	text-transform: none;
}
.crl-footer__band .crl-footer__newsletter { padding: 0; border: 0; max-width: 480px; width: 100%; align-self: end; }
.crl-footer__band .crl-footer__nl-text { max-width: 40ch; margin: 0 0 16px; color: var(--crl-band-muted); font-size: 14px; line-height: 1.7; }
.crl-footer__band .crl-form--newsletter { max-width: none; color: var(--crl-band-fg); }
.crl-footer__band .crl-form--newsletter .crl-form__row {
	border: 1px solid currentColor;
	border-radius: var(--crl-radius, 2px);
	background: rgba(255, 255, 255, .55);
}
.crl-footer__band--dark .crl-form--newsletter .crl-form__row { background: transparent; border-color: rgba(255, 255, 255, .45); }
.crl-footer__band .crl-form--newsletter .crl-input { min-height: 54px; padding-left: 16px; font-size: 15px; }
.crl-footer__band .crl-form--newsletter .crl-form__submit {
	padding: 0 18px;
	background: var(--crl-band-fg);
	color: var(--crl-band-bg);
	border-radius: 0 var(--crl-radius, 2px) var(--crl-radius, 2px) 0;
}
.crl-footer__band .crl-form--newsletter .crl-form__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.crl-footer__band .crl-consent { color: var(--crl-band-muted); font-size: 12px; }
.crl-footer__band .crl-consent a { color: var(--crl-band-fg); }
.crl-footer__band .crl-form__msg.is-error { color: #B3261E; }
.crl-footer__band--dark .crl-form__msg.is-error { color: #F2A99E; }

@media (min-width: 900px) {
	.crl-footer__band-inner { grid-template-columns: minmax(0, 1fr) minmax(320px, 480px); align-items: end; gap: 64px; padding-block: 72px; }
}

/* --- Footer body --- */
.crl-footer__body .crl-footer__main { padding-top: 0; }
.crl-footer__body .crl-footer__logo img { width: 104px; max-width: 100%; height: auto; }
.crl-footer__body .crl-footer__desc { margin: 18px 0 18px; color: #B5B0A9; font-size: 13px; line-height: 1.75; }
.crl-footer__body .crl-footer__col-title { color: #fff; font-size: 11px; letter-spacing: .18em; }
.crl-footer__body .crl-footer__links a,
.crl-footer__body .crl-footer__links span { color: #B5B0A9; font-size: 13px; }
.crl-footer__body .crl-footer__links a:hover { color: #fff; }
.crl-footer__body .crl-footer__company li { color: #B5B0A9; }
.crl-footer__body .crl-footer__bottom { color: #8F8A83; border-top-color: rgba(255, 255, 255, .12); }
.crl-footer__body .crl-footer__mark { padding: 8px 0 24px; }
.crl-footer__body .crl-footer__mark img { width: min(50%, 200px); }
@media (min-width: 768px) {
	.crl-footer__body { padding-top: 72px; }
	.crl-footer__body .crl-footer__main { padding-bottom: 56px; }
}
@media (min-width: 1100px) {
	.crl-footer__body .crl-footer__main { grid-template-columns: minmax(0, 1.4fr) repeat(var(--crl-fcols, 3), minmax(0, 1fr)); gap: 48px; }
	.crl-footer__body .crl-footer__brand { grid-column: auto; max-width: 320px; }
}

/* Draft links: only administrators see them. */
.crl-footer__links a.crl-footer__draft { gap: 8px; color: #8F8A83; }
.crl-footer__links a.crl-footer__draft em {
	padding: 2px 6px;
	border: 1px dashed rgba(255, 255, 255, .35);
	border-radius: 2px;
	color: #E8C77A;
	font-size: 9px;
	font-style: normal;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.crl-footer--editorial .crl-footer__links a.crl-footer__draft::after { display: none; }

/* ==========================================================================
   4.6.1 — Newsletter as a cinematic photo section (house style): dark veil,
   centred light typography and a fine-line field. The footer below keeps
   only the information.
   ========================================================================== */
.crl-footer__band--photo {
	--crl-band-bg: #0E0E0F;
	--crl-band-fg: #fff;
	--crl-band-muted: rgba(255, 255, 255, .72);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-top: 0;
}
.crl-footer__band-bg { position: absolute; inset: 0; z-index: -1; }
.crl-footer__band-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.crl-footer__band-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 10, 11, .9) 0%, rgba(10, 10, 11, .55) 60%, rgba(10, 10, 11, .7) 100%); }
.crl-footer__band--photo .crl-footer__band-inner { grid-template-columns: 1fr; justify-items: center; gap: 26px; padding-block: 88px; text-align: center; }
.crl-footer__band--photo .crl-footer__band-eyebrow { display: inline-flex; align-items: center; gap: 14px; letter-spacing: .3em; }
.crl-footer__band--photo .crl-footer__band-eyebrow::before,
.crl-footer__band--photo .crl-footer__band-eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.crl-footer__band--photo .crl-footer__statement { max-width: none; font-size: clamp(30px, 5.6vw, 58px); font-weight: 300; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; }
.crl-footer__band--photo .crl-footer__newsletter { align-self: auto; max-width: 520px; }
.crl-footer__band--photo .crl-footer__nl-text { margin: 0 auto 22px; color: var(--crl-band-muted); }
.crl-footer__band--photo .crl-form--newsletter .crl-form__row { border: 0; border-bottom: 1px solid rgba(255, 255, 255, .6); border-radius: 0; background: transparent; }
.crl-footer__band--photo .crl-form--newsletter .crl-input { min-height: 54px; padding-left: 0; color: #fff; font-size: 16px; text-align: left; }
.crl-footer__band--photo .crl-form--newsletter .crl-input::placeholder { color: rgba(255, 255, 255, .6); opacity: 1; }
.crl-footer__band--photo .crl-form--newsletter .crl-form__submit { padding: 0 2px 0 14px; background: transparent; color: #fff; border-radius: 0; }
.crl-footer__band--photo .crl-consent { justify-content: center; color: rgba(255, 255, 255, .62); text-align: left; }
.crl-footer__band--photo .crl-consent a { color: #fff; }
@media (min-width: 900px) {
	.crl-footer__band--photo .crl-footer__band-inner { grid-template-columns: 1fr; padding-block: 120px; }
}
/* A thin line separates the photo section from the information. */
.crl-footer__band--photo + .crl-footer__body { border-top: 1px solid rgba(255, 255, 255, .08); }

/* Draft links (admins only): discreet tag that never breaks the line. */
.crl-footer__body .crl-footer__links a.crl-footer__draft { display: inline; line-height: 1.6; }
.crl-footer__body .crl-footer__links a.crl-footer__draft em { display: inline-block; margin-left: 8px; padding: 1px 5px; border: 0; background: rgba(232, 199, 122, .14); font-size: 8px; line-height: 1.6; letter-spacing: .14em; vertical-align: 2px; }
.crl-footer__body .crl-footer__links li:has(> a.crl-footer__draft) { padding: 6px 0; }