/* =============================================================
   Lyuboshchi Brand Index — /brand/
   Editorial-magazine layout: cinematic hero + sticky toolbar +
   A–Z letter sections + content essays.
   ============================================================= */

.lyub-brand-index {
	--bi-grad:        linear-gradient(135deg, #f2053c 0%, #cb003d 100%);
	--bi-grad-soft:   linear-gradient(135deg, #ff5078 0%, #f2053c 100%);
	--bi-red:         #f2053c;
	--bi-red-soft:    #ff5078;
	--bi-dark:        #0a0b12;
	--bi-dark-2:      #15161f;
	--bi-text:        #1a1a2e;
	--bi-text-2:      #4b5563;
	--bi-muted:       #7e8194;
	--bi-bg:          #fafafa;
	--bi-card:        #ffffff;
	--bi-line:        #ebebf0;
	--bi-radius:      18px;
	--bi-ease:        cubic-bezier(.4,0,.2,1);

	background: var(--bi-bg);
	font-family: 'GothamPro', system-ui, -apple-system, sans-serif;
	color: var(--bi-text);
}
.lyub-brand-index *,
.lyub-brand-index *::before,
.lyub-brand-index *::after { box-sizing: border-box; }

/* ============================================================
   Breadcrumbs
   ============================================================ */
.lyub-bi-bc {
	background: var(--bi-dark-2);
	color: rgba(255, 255, 255, .55);
	font-size: 12px;
	letter-spacing: 0.02em;
}
.lyub-bi-bc__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 12px 24px;
}
.lyub-bi-bc a { color: rgba(255, 255, 255, .55); text-decoration: none; transition: color .15s; }
.lyub-bi-bc a:hover { color: #fff; }
.lyub-bi-bc__sep { color: rgba(255, 255, 255, .25); margin: 0 6px; }
.lyub-bi-bc__current {
	background: var(--bi-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 700;
}

/* ============================================================
   HERO — cinematic, big typography, soft glows + noise
   ============================================================ */
.lyub-bi-hero {
	position: relative;
	background: var(--bi-dark);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}
.lyub-bi-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.lyub-bi-hero__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.55;
}
.lyub-bi-hero__glow--1 {
	width: 540px;
	height: 540px;
	background: radial-gradient(circle, rgba(242, 5, 60, .55), transparent 70%);
	top: -100px;
	right: -100px;
}
.lyub-bi-hero__glow--2 {
	width: 460px;
	height: 460px;
	background: radial-gradient(circle, rgba(203, 0, 61, .35), transparent 70%);
	bottom: -150px;
	left: -100px;
}
/* Film-grain texture overlay — adds depth without imagery */
.lyub-bi-hero__noise {
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1, 0 0 0 0 1, 0 0 0 0 1, 0 0 0 .04 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
	opacity: 0.5;
	mix-blend-mode: overlay;
}

.lyub-bi-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto;
	padding: 80px 24px 90px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* Edition stamp row */
.lyub-bi-hero__meta {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.lyub-bi-hero__edition {
	font-family: 'JetBrains Mono', 'Menlo', 'Courier New', monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--bi-red-soft);
	padding: 6px 10px;
	border: 1px solid rgba(242, 5, 60, .35);
	border-radius: 4px;
	background: rgba(242, 5, 60, .05);
}
.lyub-bi-hero__kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

/* Title — split into two lines with hairline between */
.lyub-bi-hero__title {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: clamp(44px, 8vw, 96px);
	font-weight: 800;
	line-height: 0.92;
	letter-spacing: -0.035em;
	color: #fff;
	text-wrap: balance;
}
.lyub-bi-hero__title-1 { color: #fff; }
.lyub-bi-hero__title-2 {
	background: var(--bi-grad-soft);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	position: relative;
}
.lyub-bi-hero__asterisk {
	display: inline-block;
	color: var(--bi-red);
	font-size: 0.45em;
	vertical-align: super;
	margin-left: 0.08em;
	-webkit-text-fill-color: var(--bi-red);
	background: none;
}

.lyub-bi-hero__intro {
	max-width: 620px;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .78);
	margin: 0;
	position: relative;
	padding-left: 18px;
}
.lyub-bi-hero__intro-mark {
	position: absolute;
	left: 0;
	top: 0;
	color: var(--bi-red);
	font-weight: 700;
}

/* Stats row — numbered cards */
.lyub-bi-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 18px 0 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 16px;
	background: rgba(255, 255, 255, .025);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.lyub-bi-hero__stat {
	flex: 1 1 180px;
	padding: 22px 26px;
	border-right: 1px solid rgba(255, 255, 255, .08);
}
.lyub-bi-hero__stat:last-child { border-right: 0; }
.lyub-bi-hero__stat dt {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
	margin-bottom: 6px;
}
.lyub-bi-hero__stat dd {
	margin: 0;
	font-family: 'GothamPro', sans-serif;
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 800;
	letter-spacing: -0.025em;
	background: var(--bi-grad-soft);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   STICKY TOOLBAR — search + A–Z nav
   ============================================================ */
.lyub-bi-toolbar {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--bi-line);
	transition: box-shadow .25s var(--bi-ease);
}
.lyub-bi-toolbar.is-stuck {
	box-shadow: 0 8px 30px rgba(0, 0, 0, .06);
}
.lyub-bi-toolbar__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	gap: 20px;
	align-items: center;
	flex-wrap: wrap;
}

/* Search input */
.lyub-bi-search {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
	background: #fff;
	border: 1.5px solid var(--bi-line);
	border-radius: 999px;
	min-width: 280px;
	flex: 1 1 280px;
	max-width: 480px;
	transition: border-color .2s var(--bi-ease), box-shadow .2s var(--bi-ease);
}
.lyub-bi-search:focus-within {
	border-color: var(--bi-red);
	box-shadow: 0 0 0 4px rgba(242, 5, 60, .12);
}
.lyub-bi-search svg { color: var(--bi-muted); flex: 0 0 auto; }
.lyub-bi-search input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	outline: 0;
	padding: 12px 0;
	font: inherit;
	font-size: 14px;
	color: var(--bi-text);
}
.lyub-bi-search input::placeholder { color: var(--bi-muted); }
.lyub-bi-search__clear {
	background: rgba(0, 0, 0, .05);
	border: 0;
	color: var(--bi-muted);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.lyub-bi-search__clear:hover { background: var(--bi-red); color: #fff; }

/* A–Z navigation */
.lyub-bi-az {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	flex: 1 1 auto;
	justify-content: flex-end;
}
.lyub-bi-az__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	font-family: 'JetBrains Mono', 'Menlo', monospace;
	font-size: 13px;
	font-weight: 600;
	color: var(--bi-text-2);
	text-decoration: none;
	border-radius: 8px;
	transition: background .15s var(--bi-ease), color .15s var(--bi-ease);
}
.lyub-bi-az__link:hover {
	background: rgba(242, 5, 60, .08);
	color: var(--bi-red);
}
.lyub-bi-az__link.is-active {
	background: var(--bi-grad);
	color: #fff;
	box-shadow: 0 4px 12px rgba(242, 5, 60, .35);
}

/* ============================================================
   LETTER SECTIONS — editorial spreads
   ============================================================ */
.lyub-bi-letters {
	max-width: 1280px;
	margin: 0 auto;
	padding: 56px 24px;
}
.lyub-bi-letter + .lyub-bi-letter { margin-top: 56px; }
.lyub-bi-letter[data-hidden] { display: none; }

.lyub-bi-letter__head {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: baseline;
	gap: 18px;
	margin-bottom: 22px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--bi-text);
}
.lyub-bi-letter__big {
	font-family: 'GothamPro', sans-serif;
	font-size: clamp(56px, 10vw, 96px);
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 0.85;
	background: var(--bi-grad-soft);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	scroll-margin-top: 100px; /* offset for sticky toolbar */
}
.lyub-bi-letter__rule {
	display: block;
	height: 1px;
	background: linear-gradient(90deg, var(--bi-text) 0%, transparent 100%);
	opacity: 0.18;
}
.lyub-bi-letter__count {
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	font-weight: 600;
	color: var(--bi-muted);
	letter-spacing: 0.04em;
}

/* Brand rows in each letter group */
.lyub-bi-letter__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 4px;
}
.lyub-bi-row[data-hidden] { display: none; }
.lyub-bi-row__link {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 16px;
	background: var(--bi-card);
	border: 1px solid var(--bi-line);
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	position: relative;
	overflow: hidden;
	transition:
		border-color .2s var(--bi-ease),
		background .2s var(--bi-ease),
		transform .15s var(--bi-ease);
}
.lyub-bi-row__link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--bi-grad);
	transform: scaleY(0);
	transform-origin: center;
	transition: transform .25s var(--bi-ease);
}
.lyub-bi-row__link:hover {
	border-color: rgba(242, 5, 60, .35);
	background: #fff;
	transform: translateX(2px);
}
.lyub-bi-row__link:hover::before { transform: scaleY(1); }

.lyub-bi-row__name {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--bi-text);
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lyub-bi-row__country {
	font-size: 11px;
	font-weight: 500;
	color: var(--bi-muted);
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.lyub-bi-row__count {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	font-weight: 600;
	color: var(--bi-red);
	font-variant-numeric: tabular-nums;
}
.lyub-bi-row__arrow {
	color: var(--bi-muted);
	display: inline-flex;
	transition: transform .2s var(--bi-ease), color .2s var(--bi-ease);
}
.lyub-bi-row__link:hover .lyub-bi-row__arrow {
	transform: translateX(3px);
	color: var(--bi-red);
}

/* Empty state on search miss */
.lyub-bi-empty {
	padding: 60px 24px;
	text-align: center;
	color: var(--bi-muted);
}
.lyub-bi-empty[hidden] { display: none; }
.lyub-bi-empty svg { color: var(--bi-muted); margin-bottom: 12px; }
.lyub-bi-empty p { margin: 0; font-size: 14px; color: var(--bi-text-2); }

/* ============================================================
   CONTENT — humanized editorial essays + FAQ
   ============================================================ */
.lyub-bi-content {
	background: #fff;
	border-top: 1px solid var(--bi-line);
	padding: 72px 24px 96px;
}
.lyub-bi-content__inner {
	max-width: 760px;
	margin: 0 auto;
}
.lyub-bi-article {
	margin: 0 0 48px;
}
.lyub-bi-article h2 {
	font-size: clamp(22px, 3vw, 28px);
	font-weight: 800;
	letter-spacing: -0.015em;
	margin: 0 0 16px;
	color: var(--bi-text);
	position: relative;
	padding-left: 18px;
}
.lyub-bi-article h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 4px;
	border-radius: 4px;
	background: var(--bi-grad);
}
.lyub-bi-article p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--bi-text-2);
	margin: 0 0 14px;
}
.lyub-bi-article p:last-child { margin-bottom: 0; }

/* FAQ details/summary accordion */
.lyub-bi-faq__item {
	border: 1px solid var(--bi-line);
	border-radius: 12px;
	padding: 0;
	margin-bottom: 10px;
	background: #fafafd;
	transition: border-color .2s var(--bi-ease), box-shadow .25s var(--bi-ease);
}
.lyub-bi-faq__item[open] {
	border-color: rgba(242, 5, 60, .35);
	background: #fff;
	box-shadow: 0 6px 22px rgba(242, 5, 60, .08);
}
.lyub-bi-faq__item summary {
	cursor: pointer;
	padding: 16px 20px;
	font-size: 15px;
	font-weight: 600;
	color: var(--bi-text);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.lyub-bi-faq__item summary::-webkit-details-marker { display: none; }
.lyub-bi-faq__item summary::after {
	content: "+";
	font-size: 22px;
	font-weight: 400;
	color: var(--bi-muted);
	transition: transform .25s var(--bi-ease), color .2s var(--bi-ease);
	line-height: 0.9;
}
.lyub-bi-faq__item[open] summary::after {
	content: "−";
	color: var(--bi-red);
}
.lyub-bi-faq__item p {
	padding: 0 20px 18px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--bi-text-2);
	margin: 0;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 768px) {
	.lyub-bi-hero__inner {
		padding: 50px 18px 60px;
		gap: 22px;
	}
	.lyub-bi-hero__title { font-size: clamp(36px, 12vw, 52px); line-height: 0.95; }
	.lyub-bi-hero__stats { flex-direction: column; gap: 0; }
	.lyub-bi-hero__stat {
		flex: none;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
		padding: 16px 20px;
	}
	.lyub-bi-hero__stat:last-child { border-bottom: 0; }

	.lyub-bi-toolbar__inner {
		padding: 12px 18px;
		gap: 12px;
	}
	.lyub-bi-search { min-width: 100%; max-width: 100%; }
	.lyub-bi-az {
		width: 100%;
		overflow-x: auto;
		justify-content: flex-start;
		scrollbar-width: none;
	}
	.lyub-bi-az::-webkit-scrollbar { display: none; }
	.lyub-bi-az__link { flex-shrink: 0; }

	.lyub-bi-letters { padding: 36px 18px; }
	.lyub-bi-letter + .lyub-bi-letter { margin-top: 36px; }
	.lyub-bi-letter__head {
		grid-template-columns: auto 1fr auto;
		gap: 12px;
	}
	.lyub-bi-letter__list {
		grid-template-columns: 1fr;
	}
	.lyub-bi-row__link {
		padding: 12px 14px;
		gap: 12px;
	}
	.lyub-bi-row__name { font-size: 13.5px; }

	.lyub-bi-content { padding: 48px 18px 72px; }
	.lyub-bi-article { margin-bottom: 36px; }
	.lyub-bi-article p { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.lyub-bi-row__link,
	.lyub-bi-row__link::before,
	.lyub-bi-row__arrow,
	.lyub-bi-faq__item summary::after,
	.lyub-bi-toolbar {
		transition: none !important;
		transform: none !important;
	}
}