/*
 * Page components — Bennett Lab
 * Every value measured from the approved mockup (v2).
 * Colours and sizes come from tokens.css. Do not hard-code a hex here.
 */

/* Shared ---------------------------------------------------------------- */

.bl-section { padding: var(--bl-88) max(var(--bl-pad), calc((100% - var(--bl-max)) / 2)); }
.bl-section--top0 { padding-top: 0; }
.bl-section--tint { background: var(--bl-tint); }
.bl-section--grey { background: var(--bl-rule); }
.bl-section--line { border-top: 1px solid #E1E1E6; }

.bl-h2 { margin: 0 0 var(--bl-8); }

.bl-rule {
	width: 56px;
	height: 3px;
	background: var(--bl-red);
	margin-bottom: 56px;
}

.bl-rule--sm { width: 32px; margin-bottom: var(--bl-16); }

.bl-lead {
	font-family: var(--bl-serif);
	font-size: 20px;
	line-height: 1.55;
	color: #26262E;
	margin: 0 0 var(--bl-24);
	max-width: var(--bl-prose);
	text-wrap: pretty;
}

.bl-text {
	font-size: var(--bl-text);
	line-height: 1.75;
	color: #3B3B45;
	margin: 0;
	text-wrap: pretty;
}

.bl-stack { display: flex; flex-direction: column; gap: 18px; }

/* Page intro paragraph: serif and a size up, as the mockup sets it. */
.bl-intro { max-width: var(--bl-prose); }

.bl-intro p {
	font-family: var(--bl-serif);
	font-size: 20px;
	line-height: 1.6;
	color: #26262E;
	margin: 0 0 var(--bl-16);
	text-wrap: pretty;
}

.bl-intro p:last-child { margin-bottom: 0; }

.bl-eyebrow {
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bl-muted);
}

.bl-count { font-size: 14px; color: var(--bl-muted); }

/* Figure card */

.bl-figure { margin: 0; }

/* Client asked for no box and no background so the figures sit on the page.
   The research and carousel figures are supplied as PNGs, several already
   transparent, and the sections behind them are white so they blend. */
.bl-figure__frame {
	border: 0;
	background: transparent;
	padding: 0;
}

/* Research figures were dwarfing the text. Cap them so a tall figure cannot
   stretch its row, and centre the image inside the frame. */
.bl-theme__fig .bl-figure__frame img {
	max-height: 380px;
	width: auto;
	max-width: 100%;
	margin-inline: auto;
}

.bl-figure__frame img { width: 100%; height: auto; display: block; }

.bl-figure figcaption,
.bl-figure__cap {
	font-size: 14px;
	color: var(--bl-muted);
	line-height: 1.6;
	margin-top: var(--bl-12);
	border-left: 2px solid var(--bl-red);
	padding-left: var(--bl-12);
}

/* Banner ---------------------------------------------------------------- */

.bl-banner {
	min-height: 460px;
	/* Client asked for a brighter banner. The overlay is only deep enough on the
	   left, where the text sits, to keep white type above 4.5:1. */
	background-image:
		linear-gradient(100deg, rgba(24, 28, 98, 0.72) 0%, rgba(24, 28, 98, 0.42) 55%, rgba(24, 28, 98, 0.16) 100%),
		var(--bl-banner-img, none);
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--bl-64) max(var(--bl-pad), calc((100% - var(--bl-max)) / 2));
	color: #fff;
}

.bl-banner--page { min-height: 300px; }

.bl-banner__title {
	font-family: var(--bl-serif);
	font-weight: 600;
	color: #fff;
	font-size: var(--bl-h1);
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0;
}

.bl-banner__sub {
	color: #fff;
	font-weight: 300;
	font-size: 20px;
	margin-top: 14px;
	max-width: 640px;
	margin-bottom: 0;
}

/* Interior pages carry a shorter line than the home hero. */
.bl-banner--page .bl-banner__sub { font-size: 17px; margin-top: 10px; }

.bl-banner__rule {
	width: 56px;
	height: 3px;
	background: var(--bl-red);
	margin: 22px 0 18px;
}

.bl-banner__eyebrow {
	color: #DDE1F2;
	font-size: 14px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/* Card with blue top edge (home routes, contact routes) ------------------ */

.bl-card {
	display: block;
	background: var(--bl-white);
	border: 1px solid var(--bl-border);
	border-top: 3px solid var(--bl-blue);
	padding: 36px;
	height: 100%;
}

a.bl-card:hover { text-decoration: none; border-color: var(--bl-blue); }

.bl-card__title {
	font-family: var(--bl-serif);
	font-size: var(--bl-h2);
	font-weight: 600;
	color: var(--bl-blue);
	margin: 10px 0 var(--bl-12);
	line-height: 1.2;
}

.bl-card__title--sm { font-size: 21px; margin: 0 0 var(--bl-12); }

.bl-card__body { font-size: var(--bl-text); line-height: 1.6; color: #33333C; }

.bl-card__more { font-size: var(--bl-text); color: var(--bl-red); margin-top: var(--bl-16); }

.bl-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }

/* Home ------------------------------------------------------------------ */

.bl-home-intro {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 56px;
	align-items: start;
}

.bl-home-intro ul {
	margin: 0 0 22px;
	padding-left: 20px;
	font-size: var(--bl-text);
	line-height: 1.65;
	color: #33333C;
	display: flex;
	flex-direction: column;
	gap: var(--bl-8);
}

.bl-hero-fig__meta {
	border-top: 1px solid var(--bl-rule);
	margin-top: var(--bl-16);
	padding-top: 14px;
}

/* Caption block centres with the controls under the carousel. */
.bl-carousel .bl-hero-fig__meta { text-align: center; }

.bl-hero-fig__title {
	font-family: var(--bl-serif);
	font-size: 21px;
	font-weight: 600;
	color: var(--bl-blue);
}

.bl-hero-fig__cap { font-size: 14px; color: var(--bl-muted); margin-top: 6px; line-height: 1.6; }

/* Carousel ---------------------------------------------------------------
   Slides are stacked and cross-faded. The stage keeps the height of the
   tallest slide so the page does not jump between figures. */

/* Two arrangements. --below keeps the arrows with the dots underneath, which is
   what the client asked for. --side puts them against the image, which is the
   more usual pattern. Switch with the Arrow position field on the Home page. */

.bl-carousel__viewport { position: relative; }

.bl-carousel--below .bl-carousel__arrow--side { display: none; }

.bl-carousel--side .bl-carousel__nav .bl-carousel__arrow { display: none; }

.bl-carousel--side .bl-carousel__arrow--side {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	background: rgba(255, 255, 255, 0.92);
}

.bl-carousel--side .bl-carousel__arrow--side[data-dir="-1"] { left: 0; }
.bl-carousel--side .bl-carousel__arrow--side[data-dir="1"] { right: 0; }

.bl-carousel__stage {
	display: grid;
}

.bl-carousel__stage > * {
	grid-area: 1 / 1;
	opacity: 0;
	transition: opacity 0.7s ease;
	pointer-events: none;
}

.bl-carousel__stage > .is-active {
	opacity: 1;
	pointer-events: auto;
}

.bl-carousel__stage img {
	width: 100%;
	height: auto;
	display: block;
	max-height: 420px;
	object-fit: contain;
}

.bl-carousel a.bl-slide:hover { opacity: 0.92; }

.bl-slide-meta { display: none; }
.bl-slide-meta.is-active { display: block; }

.bl-carousel__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--bl-16);
	margin-top: var(--bl-16);
}

.bl-carousel__arrow {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--bl-border);
	background: none;
	color: var(--bl-blue);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.bl-carousel__arrow:hover { border-color: var(--bl-blue); color: var(--bl-red); }

.bl-carousel__arrow:focus-visible { outline: 2px solid var(--bl-red); outline-offset: 3px; }

.bl-carousel__dots {
	display: flex;
	justify-content: center;
	gap: var(--bl-8);
}

.bl-carousel__dots button {
	width: 28px;
	height: 3px;
	padding: 0;
	border: 0;
	background: var(--bl-border);
	cursor: pointer;
	transition: background 0.25s ease;
}

.bl-carousel__dots button[aria-selected="true"] { background: var(--bl-red); }

.bl-carousel__dots button:focus-visible { outline: 2px solid var(--bl-red); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.bl-carousel__stage > * { transition: none; }
}

/* Research -------------------------------------------------------------- */

/* Two columns across the full content width, as the mockup draws it.
   Constraining this to the prose width left the right half of the page empty. */
.bl-theme-index {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 56px;
	border-top: 1px solid var(--bl-border);
}

.bl-theme-index a {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: var(--bl-16) 0;
	border-bottom: 1px solid var(--bl-rule);
}

.bl-theme-index a:hover { text-decoration: none; }
.bl-theme-index a:hover .bl-theme-index__title { color: var(--bl-red); }

.bl-theme-index__num {
	font-family: var(--bl-serif);
	font-size: 14px;
	color: var(--bl-red);
	flex: 0 0 auto;
}

.bl-theme-index__title {
	font-family: var(--bl-serif);
	font-size: 21px;
	font-weight: 600;
	color: var(--bl-blue);
}

.bl-theme {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}

/* Zigzag: even themes put the figure on the right. */
.bl-theme--flip .bl-theme__fig { order: 2; }

.bl-theme__head { display: flex; align-items: baseline; gap: var(--bl-12); margin-bottom: var(--bl-16); }

.bl-theme__num { font-family: var(--bl-serif); font-size: 14px; color: var(--bl-red); }

.bl-theme__refs {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: var(--bl-12);
}

.bl-theme__ref-line { font-size: 14px; line-height: 1.5; }

/* A reference that has no URL stays plain grey. Only the ones that really are
   links take the blue and the underline, so the colour means something. */
.bl-ref { font-size: 14px; color: #55555F; font-style: italic; }

a.bl-ref {
	color: var(--bl-blue);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	text-decoration-color: rgba(24, 28, 98, 0.35);
}

a.bl-ref:hover,
a.bl-ref:focus-visible { text-decoration-color: currentColor; }

.bl-badge {
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--bl-blue);
	font-weight: 600;
	font-style: normal;
	white-space: nowrap;
}

.bl-badge::before { content: "· "; color: var(--bl-muted); font-weight: 400; }

.bl-press { display: flex; flex-wrap: wrap; gap: var(--bl-8) var(--bl-16); margin-top: var(--bl-12); }

.bl-press a { font-size: 14px; color: var(--bl-red); text-decoration: underline; text-underline-offset: 3px; }

.bl-credit { font-size: 14px; color: var(--bl-muted); margin-top: var(--bl-12); }

/* People ---------------------------------------------------------------- */

.bl-group__head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	border-bottom: 2px solid var(--bl-blue);
	padding-bottom: var(--bl-12);
	margin-bottom: var(--bl-48);
}

.bl-people {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 56px;
	justify-items: start;
}

.bl-person { width: 100%; max-width: 200px; }

.bl-avatar {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	overflow: hidden;
	background: transparent;
	margin-bottom: var(--bl-16);
	position: relative;
}

/* Only the silhouette placeholder needs a shape behind it. */
.bl-avatar:has(.bl-avatar__ph) { background: var(--bl-rule); }

.bl-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Silhouette for people whose photo has not arrived yet. */
.bl-avatar__ph {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
}

.bl-avatar__ph i { display: block; background: #C0C0C7; }
.bl-avatar__ph i:first-child { width: 34%; height: 34%; border-radius: 50%; margin-bottom: 6%; }
.bl-avatar__ph i:last-child { width: 64%; height: 34%; border-radius: 40% 40% 0 0; }

.bl-person__name {
	font-family: var(--bl-serif);
	font-size: 21px;
	font-weight: 600;
	color: var(--bl-blue);
	display: inline-block;
	line-height: 1.3;
}

.bl-person__role { font-size: 14px; color: #55555F; margin-top: 4px; }

.bl-person__mail { font-size: 14px; color: var(--bl-muted); display: inline-block; margin-top: 6px; word-break: break-word; }

.bl-empty { font-size: var(--bl-text); color: var(--bl-muted); }

/* Join the group, at the foot of People --------------------------------- */

.bl-join {
	background: var(--bl-rule);
	padding: 36px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.bl-join__title {
	font-family: var(--bl-serif);
	font-size: 21px;
	font-weight: 600;
	color: var(--bl-blue);
}

.bl-join__body {
	font-size: var(--bl-text);
	color: #3B3B45;
	line-height: 1.6;
	margin-top: var(--bl-8);
}

.bl-btn--solid { font-weight: 600; padding: 14px 26px; }

@media (max-width: 767px) {
	.bl-join { grid-template-columns: 1fr; gap: var(--bl-24); padding: var(--bl-24); }
}

/* Member page ----------------------------------------------------------- */

.bl-crumb { font-size: 14px; color: var(--bl-muted); margin-bottom: 26px; }
.bl-crumb span { color: var(--bl-border); margin: 0 var(--bl-8); }

.bl-member-head {
	background: var(--bl-tint);
	margin-bottom: var(--bl-48);
	border-bottom: 1px solid #DCDCE2;
	padding: var(--bl-88) max(var(--bl-pad), calc((100% - var(--bl-max)) / 2));
}

.bl-member-head__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 56px; }

.bl-member-head .bl-avatar {
	width: 240px;
	height: 240px;
	flex: 0 0 auto;
	margin-bottom: 0;
}

.bl-member-head__meta { flex: 1 1 260px; min-width: 0; }

.bl-member-head__role { font-size: 20px; color: var(--bl-red); font-weight: 500; margin-top: 10px; }

.bl-member-head__aff { font-size: 14px; color: #55555F; margin-top: 6px; line-height: 1.5; }

.bl-links { display: flex; flex-wrap: wrap; gap: var(--bl-12); margin-top: 22px; }

.bl-links a {
	width: 46px;
	height: 46px;
	border: 1px solid var(--bl-blue);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bl-blue);
}

.bl-links a:hover {
	background: var(--bl-blue);
	color: #fff;
	text-decoration: none;
}

/* Smaller set for the People listing. Sized so five icons still sit on one
   line inside a 200px card: 5 x 30 + 4 x 6 = 174. */
.bl-links--sm { gap: 6px; margin-top: var(--bl-12); flex-wrap: nowrap; }

.bl-links--sm a { width: 30px; height: 30px; flex: 0 0 auto; }

.bl-links--sm svg { width: 15px; height: 15px; }

.bl-member-body { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: start; }

/* Publications ---------------------------------------------------------- */

.bl-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bl-8) var(--bl-12);
	padding-bottom: 56px;
	border-bottom: 1px solid var(--bl-rule);
}

.bl-filters a {
	font-size: 14px;
	padding: 7px 14px;
	border: 1px solid var(--bl-border);
	color: #33333C;
}

.bl-filters a:hover { text-decoration: none; border-color: var(--bl-blue); }

.bl-filters a.is-active { background: var(--bl-blue); color: #fff; border-color: var(--bl-blue); }

/* The list spans the content band so each row's divider lines up with the year
   rule above it. Only the text inside is held to a readable measure, otherwise a
   wide screen leaves the right half of every row empty. */
.bl-pubs { max-width: none; }

.bl-pub {
	padding: 26px 0;
	border-bottom: 1px solid var(--bl-rule);
}

.bl-pub > * { max-width: 900px; }

.bl-pub__title {
	font-family: var(--bl-serif);
	font-size: 21px;
	font-weight: 600;
	color: var(--bl-blue);
	line-height: 1.35;
	display: block;
	text-wrap: pretty;
}

.bl-pub__authors {
	font-size: 14px;
	color: #55555F;
	line-height: 1.7;
	margin: 10px 0 0;
}

.bl-pub__authors strong {
	color: var(--bl-blue);
	border-bottom: 2px solid var(--bl-red);
	font-weight: 600;
}

.bl-pub__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bl-8) var(--bl-12); margin-top: 10px; }

.bl-pub__arxiv {
	font-size: 14px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	color: var(--bl-blue);
}

/* Compact variant used inside a member page */
.bl-pub--compact { padding: 20px 0; }
.bl-pub--compact > * { max-width: var(--bl-prose); }
.bl-pub--compact .bl-pub__authors { display: none; }

/* Resources ------------------------------------------------------------- */

.bl-guides { display: grid; grid-template-columns: repeat(4, 1fr); gap: 56px; }

.bl-guide-card {
	display: block;
	border: 1px solid var(--bl-border);
	background: var(--bl-white);
	padding: 36px;
	height: 100%;
}

.bl-guide-card:hover { text-decoration: none; border-color: var(--bl-blue); }

.bl-guide-card__title {
	font-family: var(--bl-serif);
	font-size: 21px;
	font-weight: 600;
	color: var(--bl-red);
	line-height: 1.3;
	margin-bottom: var(--bl-12);
}

.bl-guide-card__body { font-size: 14px; line-height: 1.65; color: #3B3B45; }

/* Guide article --------------------------------------------------------- */

/* A guide opens with a white header block, not the banner image. */
.bl-page-head {
	border-bottom: 1px solid var(--bl-rule);
	padding: var(--bl-88) max(var(--bl-pad), calc((100% - var(--bl-max)) / 2));
}

.bl-page-head .bl-crumb { margin-bottom: 20px; }

.bl-page-head h1 { max-width: var(--bl-prose); }

.bl-article { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 56px; align-items: start; }

.bl-article--full { grid-template-columns: 1fr; }

.bl-back { font-size: var(--bl-text); font-weight: 600; color: var(--bl-red); }

.bl-article__body { max-width: var(--bl-prose); }

.bl-article__body > * + * { margin-top: var(--bl-24); }

.bl-article__body h2 { margin-top: var(--bl-48); }
.bl-article__body h3 { margin-top: var(--bl-32); }

.bl-article__body ul,
.bl-article__body ol {
	padding-left: 22px;
	font-size: var(--bl-text);
	line-height: 1.75;
	color: #3B3B45;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bl-article__body blockquote {
	border-left: 3px solid var(--bl-red);
	background: #F7F7F9;
	padding: 22px 24px;
	margin-inline: 0;
}

.bl-article__body blockquote p {
	font-family: var(--bl-serif);
	font-size: 20px;
	color: var(--bl-blue);
	margin: 0;
}

.bl-article__body table { border-collapse: collapse; font-size: 14px; width: 100%; }
.bl-article__body th,
.bl-article__body td { border: 1px solid var(--bl-border); padding: 10px 12px; text-align: left; }
.bl-article__body th { background: var(--bl-tint); color: var(--bl-blue); }

.bl-article__body pre {
	background: var(--bl-tint);
	border: 1px solid var(--bl-border);
	padding: var(--bl-16);
	overflow-x: auto;
	font-size: 14px;
}

.bl-article__body figcaption {
	font-size: 14px;
	color: var(--bl-muted);
	border-left: 2px solid var(--bl-red);
	padding-left: var(--bl-12);
	margin-top: var(--bl-12);
}

.bl-toc {
	position: sticky;
	top: var(--bl-24);
	border-left: 2px solid var(--bl-rule);
	padding-left: 20px;
	font-size: 14px;
}

.bl-toc__label {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bl-muted);
	margin-bottom: 14px;
}

.bl-toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	line-height: 1.45;
}

.bl-toc__foot {
	border-top: 1px solid var(--bl-rule);
	margin-top: 22px;
	padding-top: 18px;
}

.bl-toc__foot a { font-size: 14px; font-weight: 600; }

/* Contact --------------------------------------------------------------- */

.bl-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--bl-blue);
	color: #fff;
	font-size: var(--bl-text);
	padding: 14px 22px;
}

.bl-btn:hover { background: var(--bl-red); color: #fff; text-decoration: none; }

.bl-note {
	background: var(--bl-tint);
	border: 1px solid var(--bl-border);
	padding: 36px;
}

.bl-note__caveat {
	font-size: 14px;
	color: var(--bl-muted);
	margin: var(--bl-16) 0 0;
}

/* 404 ------------------------------------------------------------------- */

.bl-404 { text-align: left; }

/* Responsive ------------------------------------------------------------ */

@media (max-width: 1024px) {
	.bl-section { padding: var(--bl-64) max(var(--bl-pad), calc((100% - var(--bl-max)) / 2)); }
	.bl-banner { min-height: 360px; }
	.bl-banner--page { min-height: 240px; }
	.bl-people { grid-template-columns: repeat(3, 1fr); gap: var(--bl-32); }
	.bl-theme-index { gap: 0 var(--bl-32); }
	.bl-guides { grid-template-columns: repeat(2, 1fr); gap: var(--bl-32); }
	.bl-grid-2 { gap: var(--bl-32); }
	.bl-home-intro,
	.bl-theme,
	.bl-member-body { gap: var(--bl-32); }
	.bl-article { grid-template-columns: 1fr; }
	.bl-toc { position: static; border-left: 0; padding-left: 0; border-top: 1px solid var(--bl-rule); padding-top: var(--bl-24); }
	.bl-page-head { padding: var(--bl-64) max(var(--bl-pad), calc((100% - var(--bl-max)) / 2)); }
	.bl-member-head { padding: var(--bl-64) max(var(--bl-pad), calc((100% - var(--bl-max)) / 2)); }
	.bl-member-head .bl-avatar { width: 180px; height: 180px; }
	.bl-rule { margin-bottom: var(--bl-32); }
}

@media (max-width: 767px) {
	.bl-section { padding: var(--bl-48) max(var(--bl-pad), calc((100% - var(--bl-max)) / 2)); }
	.bl-banner { min-height: 280px; padding: var(--bl-48) max(var(--bl-pad), calc((100% - var(--bl-max)) / 2)); }
	.bl-banner--page { min-height: 200px; }
	.bl-banner__sub { font-size: 17px; }

	.bl-home-intro,
	.bl-theme,
	.bl-member-body,
	.bl-grid-2 { grid-template-columns: 1fr; gap: var(--bl-32); }

	/* On one column the figure always follows the text, zigzag or not.
	   Both selectors are listed so the flipped rule above cannot win on
	   specificity and push the figure above its own heading. */
	.bl-theme .bl-theme__fig,
	.bl-theme--flip .bl-theme__fig { order: 2; }

	.bl-theme-index { grid-template-columns: 1fr; }
	.bl-people { grid-template-columns: repeat(2, 1fr); gap: var(--bl-24); }
	.bl-person { max-width: none; }
	.bl-avatar { width: 120px; height: 120px; }

	.bl-guides { grid-template-columns: 1fr; gap: var(--bl-24); }

	.bl-member-head { padding: var(--bl-48) max(var(--bl-pad), calc((100% - var(--bl-max)) / 2)); }
	.bl-member-head__row { gap: var(--bl-24); align-items: flex-start; }
	.bl-member-head .bl-avatar { width: 140px; height: 140px; }
	.bl-links a { width: 42px; height: 42px; }

	.bl-card,
	.bl-guide-card,
	.bl-note { padding: var(--bl-24); }

	.bl-group__head { margin-bottom: var(--bl-24); }
	.bl-filters { padding-bottom: var(--bl-24); }
}