/**
 * Bagan Songi — design layer.
 *
 * Ported 1:1 from the "Bagan Songi.dc.html" Claude Design source. Every token,
 * breakpoint and component below mirrors the inline styles of that document.
 *
 * @package Astra
 */

/* ------------------------------------------------------------------ *
 * 0. Fonts — self-hosted
 * ------------------------------------------------------------------ *
 *
 * Served from this theme rather than fonts.googleapis.com. The reader is on a
 * mid-to-low-end Android phone on mobile data, and the third-party route cost
 * two extra DNS+TLS handshakes (googleapis.com, then gstatic.com) before a
 * single Bengali glyph could paint.
 *
 * Only the subsets this site can actually render are shipped:
 *
 *   - Bengali subsets only for the two Bengali families. Inter leads both font
 *     stacks, so Latin runs never reach them and their Latin subsets are dead.
 *   - Inter's latin subset only. latin-ext covers Central/Eastern European
 *     diacritics that Bengali gardening copy does not set, and it is a 85KB
 *     file — larger than latin itself.
 *   - No cyrillic, greek or vietnamese.
 *
 * Noto Sans Bengali and Inter are variable fonts: Google serves one file per
 * subset covering the whole weight range, so they are declared with a range.
 * Hind Siliguri ships as static instances, so it gets one face per weight.
 *
 * 272KB on disk; a typical page pulls the Noto body face plus whichever Hind
 * Siliguri weights that page's headings use. Licensing: all three families are
 * SIL Open Font License 1.1 — see assets/fonts/README.md.
 */

@font-face {
	font-family: "Hind Siliguri";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/hind-siliguri-500.woff2") format("woff2");
	unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}

@font-face {
	font-family: "Hind Siliguri";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/hind-siliguri-600.woff2") format("woff2");
	unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}

@font-face {
	font-family: "Hind Siliguri";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/hind-siliguri-700.woff2") format("woff2");
	unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}

@font-face {
	font-family: "Noto Sans Bengali";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("../fonts/noto-sans-bengali-var.woff2") format("woff2");
	unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/inter-var-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ *
 * 1. Tokens
 * ------------------------------------------------------------------ */

:root {
	--leaf-900: #14361F;
	--leaf-700: #1F6B3B;
	--leaf-500: #2E9E55;
	--leaf-200: #BFE6CB;
	--leaf-50: #EAF6EE;
	--clay-600: #C05621;
	--clay-100: #FBEAD9;
	--sun-500: #E8A33D;
	--soil-700: #5A4632;
	--cream-50: #FBF9F4;
	--surface: #FFFFFF;
	--ink-900: #16211A;
	--ink-600: #4A5A50;
	--ink-400: #83958B;
	--line: #E3E8E2;
	--onleaf: #FFFFFF;
	--onclay: #FFFFFF;
	--zebra: #FBF9F4;
	--head: #14361F;
	--shadow: 0 4px 12px rgba(20, 54, 31, .08);

	/**
	 * Link hover.
	 *
	 * Deliberately darker than --leaf-700 in light mode: brightening to
	 * --leaf-500 dropped the hover state to 3.25:1 and made a link *less*
	 * readable the moment you pointed at it. In dark mode the ramp runs the
	 * other way, so the dark block brightens instead.
	 */
	--link-hover: #1A5230;

	/**
	 * Footer ink.
	 *
	 * The footer is a permanently dark band in both themes, so its text cannot
	 * ride a theme-flipping token — --leaf-200 resolves to #2F4C3A in dark mode
	 * and collapsed to 1.95:1 against the footer. Same pattern as --onclay and
	 * --onleaf: a token that names the surface it sits on.
	 */
	--onfooter: #BFE6CB;
	--onfooter-strong: #FFFFFF;

	/**
	 * State colours — warning and error.
	 *
	 * Deliberately outside every brand ramp. The brand guidelines reserve
	 * terracotta for questions and calls to action ("কখনও ভুল/বিপদ নয়"), so
	 * alarm states need their own hues. Amber for "be careful", crimson for
	 * "this failed". Neither appears anywhere else in the system.
	 */
	--warn-bg: #FBEFD8;
	--warn-line: #A66D1D;
	/* The line colour is 3.82:1 on --warn-bg — fine for a border or icon, not for text. */
	--warn-ink: #8A5A0E;
	--error-bg: #FDECEC;
	--error-line: #A31621;

	--pad: 20px;
	--sec: 32px;
	--h1: 26px;
	--h2: 21px;
	--h3: 18px;
	--body: 17px;
	--meta: 13px;

	--feed-cols: minmax(0, 1fr);
	--topic-cols: repeat(2, minmax(0, 1fr));
	--footer-cols: minmax(0, 1fr);
	--post-grid: minmax(0, 1fr);
	--ask-steps: minmax(0, 1fr);
	--pair-cols: minmax(0, 1fr);
	--nav-d: none;
	--burger-d: inline-flex;
	--featured-dir: column;
	--hero-pad: 30px;
	--toc-m: block;
	--toc-r: none;
	--hero-cols: minmax(0, 1fr);
	--hero-gap: 24px;
	--hero-art-d: none;

	/**
	 * Inter leads both stacks on purpose.
	 *
	 * The brand reserves Inter for Latin words, units and code-adjacent text,
	 * and forbids it for Bengali. Font fallback delivers exactly that for free:
	 * Inter carries no Bengali coverage, so Bengali codepoints skip it and land
	 * on the Bengali family, while Latin runs and Latin digits render in Inter.
	 * Bengali numerals are Bengali codepoints, so they stay in the Bengali face.
	 */
	--bn: "Inter", "Noto Sans Bengali", "Hind Siliguri", system-ui, sans-serif;
	--bnh: "Inter", "Hind Siliguri", "Noto Sans Bengali", system-ui, sans-serif;
}

:root[data-theme="dark"] {
	--cream-50: #101713;
	--surface: #18211B;
	--ink-900: #E8F0EA;
	--ink-600: #A9BCB0;
	--ink-400: #83958B;
	--line: #25322A;
	--leaf-700: #4FC97C;
	--leaf-500: #63D68E;
	--leaf-50: #16281D;
	--leaf-200: #2F4C3A;
	--leaf-900: #0C1611;
	--clay-600: #E8843F;
	--clay-100: #33231A;
	--soil-700: #C2AE96;
	--onleaf: #0C1611;
	--zebra: #131B16;
	--shadow: 0 4px 12px rgba(0, 0, 0, .35);
	--head: #E8F0EA;
	--onclay: #20100A;

	/* Green brightens in dark mode, so hover runs up the ramp rather than down. */
	--link-hover: #63D68E;

	/* --onfooter is deliberately NOT overridden: the footer band is dark in both themes. */
	--warn-bg: #231603;
	--warn-line: #E8A33D;
	--warn-ink: #F0BE74;
	--error-bg: #2A1214;
	--error-line: #F4A7A7;
}

@media (prefers-color-scheme: dark) {

	:root:not([data-theme="light"]) {
		--cream-50: #101713;
		--surface: #18211B;
		--ink-900: #E8F0EA;
		--ink-600: #A9BCB0;
		--ink-400: #83958B;
		--line: #25322A;
		--leaf-700: #4FC97C;
		--leaf-500: #63D68E;
		--leaf-50: #16281D;
		--leaf-200: #2F4C3A;
		--leaf-900: #0C1611;
		--clay-600: #E8843F;
		--clay-100: #33231A;
		--soil-700: #C2AE96;
		--onleaf: #0C1611;
		--zebra: #131B16;
		--shadow: 0 4px 12px rgba(0, 0, 0, .35);
		--head: #E8F0EA;
		--onclay: #20100A;

		/* Green brightens in dark mode, so hover runs up the ramp rather than down. */
		--link-hover: #63D68E;

		/* --onfooter is deliberately NOT overridden: the footer band is dark in both themes. */
		--warn-bg: #231603;
		--warn-line: #E8A33D;
		--warn-ink: #F0BE74;
		--error-bg: #2A1214;
		--error-line: #F4A7A7;
	}
}

@media (min-width: 768px) {

	:root {
		--pad: 32px;
		--sec: 44px;
		--h1: 32px;
		--h2: 24px;
		--feed-cols: repeat(2, minmax(0, 1fr));
		--footer-cols: repeat(2, minmax(0, 1fr));
		--ask-steps: repeat(3, minmax(0, 1fr));
		--pair-cols: repeat(2, minmax(0, 1fr));
		--featured-dir: row;
		--hero-pad: 44px;
		--topic-cols: repeat(4, minmax(0, 1fr));
		--hero-cols: 1.15fr 0.85fr;
		--hero-gap: 32px;
		--hero-art-d: flex;
	}
}

@media (min-width: 1100px) {

	:root {
		--pad: 48px;
		--sec: 56px;
		--h1: 40px;
		--h2: 28px;
		--h3: 22px;
		--body: 18px;
		--meta: 14px;
		--feed-cols: repeat(3, minmax(0, 1fr));
		--topic-cols: repeat(4, minmax(0, 1fr));
		--footer-cols: 1.6fr 1fr 1fr;
		--nav-d: flex;
		--burger-d: none;
		--post-grid: minmax(0, 680px) 264px;
		--hero-pad: 56px;
		--toc-m: none;
		--toc-r: block;
		--hero-cols: 1.1fr 0.9fr;
		--hero-gap: 48px;
	}
}

/* ------------------------------------------------------------------ *
 * 2. Base + Astra container reset
 * ------------------------------------------------------------------ */

.bs-design * {
	box-sizing: border-box;
}

html,
body.bs-design {
	margin: 0;
	padding: 0;
}

body.bs-design {
	background: var(--cream-50);
	color: var(--ink-900);
	font-family: var(--bn);
	font-size: var(--body);
	line-height: 1.85;
	-webkit-font-smoothing: antialiased;
}

body.bs-design a {
	color: var(--leaf-700);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

body.bs-design a:hover,
body.bs-design a:focus {
	text-decoration-thickness: 2px;
	color: var(--link-hover);
}

/**
 * Links that are chrome rather than prose.
 *
 * The design source carries `text-decoration:none` inline on each of these, so
 * they must out-specify the global underline above. Prose, breadcrumb and
 * author links are deliberately absent — those stay underlined.
 */
body.bs-design .bs-logo,
body.bs-design .bs-nav a,
body.bs-design .bs-mobilemenu a,
body.bs-design .bs-chip,
body.bs-design .bs-topic,
body.bs-design .bs-featured__title a,
body.bs-design .bs-card__title a,
body.bs-design .bs-pill,
body.bs-design .bs-btn,
body.bs-design .bs-toc-m__list a,
body.bs-design .bs-rail nav a,
body.bs-design .bs-share a,
body.bs-design .bs-pagination .page-numbers {
	text-decoration: none;
}

body.bs-design .bs-logo:hover,
body.bs-design .bs-nav a:hover,
body.bs-design .bs-mobilemenu a:hover,
body.bs-design .bs-chip:hover,
body.bs-design .bs-topic:hover,
body.bs-design .bs-featured__title a:hover,
body.bs-design .bs-card__title a:hover,
body.bs-design .bs-pill:hover,
body.bs-design .bs-btn:hover,
body.bs-design .bs-toc-m__list a:hover,
body.bs-design .bs-rail nav a:hover,
body.bs-design .bs-share a:hover,
body.bs-design .bs-pagination .page-numbers:hover,
body.bs-design .bs-logo:focus,
body.bs-design .bs-nav a:focus,
body.bs-design .bs-mobilemenu a:focus,
body.bs-design .bs-chip:focus,
body.bs-design .bs-topic:focus,
body.bs-design .bs-featured__title a:focus,
body.bs-design .bs-card__title a:focus,
body.bs-design .bs-pill:focus,
body.bs-design .bs-btn:focus,
body.bs-design .bs-toc-m__list a:focus,
body.bs-design .bs-rail nav a:focus,
body.bs-design .bs-share a:focus,
body.bs-design .bs-pagination .page-numbers:focus {
	text-decoration: none;
}

/* Colours these links keep on hover, against the global leaf-500 rule. */
body.bs-design .bs-card__title a:hover,
body.bs-design .bs-card__title a:focus,
body.bs-design .bs-featured__title a:hover,
body.bs-design .bs-featured__title a:focus,
body.bs-design .bs-topic:hover,
body.bs-design .bs-topic:focus {
	color: inherit;
}

/**
 * Rest-state labels on filled controls.
 *
 * `body.bs-design a` scores (0,1,2) and therefore out-specifies component
 * classes like .bs-btn--clay at (0,1,0). Only the :hover/:focus rules below
 * restated --onclay, so at rest every clay button and pill rendered as a link
 * took the global link green: #1F6B3B on #C05621, which is 1.42:1. That hit the
 * primary "প্রশ্ন করুন" call to action — the label became readable only while
 * the pointer was on it.
 *
 * These must stay at or above the anchor rule's specificity.
 */
body.bs-design .bs-btn--clay,
body.bs-design .bs-btn--clay-lg,
body.bs-design .bs-pill {
	color: var(--onclay);
}

body.bs-design .bs-btn--leaf {
	color: var(--onleaf);
}

body.bs-design .bs-btn--outline {
	color: var(--leaf-700);
}

body.bs-design .bs-pill--outline {
	color: var(--clay-600);
}

body.bs-design .bs-pill:hover,
body.bs-design .bs-pill:focus {
	color: var(--onclay);
}

body.bs-design .bs-pill--outline:hover,
body.bs-design .bs-pill--outline:focus {
	color: var(--clay-600);
}

body.bs-design .bs-btn--clay:hover,
body.bs-design .bs-btn--clay:focus,
body.bs-design .bs-btn--clay-lg:hover,
body.bs-design .bs-btn--clay-lg:focus {
	color: var(--onclay);
}

body.bs-design .bs-btn--leaf:hover,
body.bs-design .bs-btn--leaf:focus,
body.bs-design .bs-btn--outline:hover,
body.bs-design .bs-btn--outline:focus {
	color: var(--onleaf);
}

body.bs-design .bs-btn--outline:hover,
body.bs-design .bs-btn--outline:focus {
	color: var(--leaf-700);
}

body.bs-design .bs-share a:hover,
body.bs-design .bs-share a:focus {
	color: var(--ink-900);
}

/**
 * Radius system: 12px for surfaces, 999px for anything pressable. No mixing.
 *
 * Two non-surface exceptions exist and are deliberate, because neither shapes a
 * surface: the 4px below rounds the focus *outline* (12px would balloon around
 * short inline links), and the 2px on the 2-3px indicator bars is a line cap.
 */
body.bs-design :focus-visible {
	outline: 2px solid var(--leaf-500);
	outline-offset: 2px;
	border-radius: 4px;
}

body.bs-design button {
	font-family: inherit;
}

body.bs-design ::selection {
	background: var(--leaf-200);
	color: var(--leaf-900);
}

@media (prefers-reduced-motion: reduce) {

	body.bs-design *,
	body.bs-design *::before,
	body.bs-design *::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* Neutralise Astra's page shell so the design owns full-bleed layout. */
body.bs-design #page,
body.bs-design #content,
body.bs-design #content > .ast-container,
body.bs-design #primary {
	max-width: none;
	width: auto;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	float: none;
	display: block;
}

body.bs-design #content {
	background: var(--cream-50);
}

body.bs-design .bs-shell {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	background: var(--cream-50);
}

/* Push the footer down on short pages. */
body.bs-design .bs-shell > #content,
body.bs-design .bs-shell > main {
	flex: 1 0 auto;
}

body.bs-design .bs-shell > .bs-footer {
	flex: none;
}

.bs-section {
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--sec) var(--pad) 0;
}

.bs-h2 {
	margin: 0 0 16px;
	font-family: var(--bnh);
	font-size: var(--h2);
	font-weight: 600;
	color: var(--ink-900);
	line-height: 1.4;
}

.bs-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Diagonal placeholder used wherever a photo is missing. */
.bs-ph {
	position: relative;
	aspect-ratio: 16 / 9;
	background: repeating-linear-gradient(45deg, var(--leaf-50) 0 10px, var(--surface) 10px 20px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* Stands in for the missing photo without saying anything. */
.bs-ph__glyph {
	opacity: .45;
}

.bs-ph__label {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10px;
	letter-spacing: .06em;
	color: var(--ink-600);
	text-align: center;
	padding: 0 12px;
}

.bs-ph img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ------------------------------------------------------------------ *
 * 3. Buttons
 * ------------------------------------------------------------------ */

.bs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	border-radius: 999px;
	font-family: var(--bnh);
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: filter 150ms ease-out, background 180ms ease-out, color 150ms ease-out;
}

.bs-btn:hover,
.bs-btn:focus {
	text-decoration: none;
}

.bs-btn--clay {
	padding: 9px 18px;
	background: var(--clay-600);
	color: var(--onclay);
	font-size: 15px;
}

.bs-btn--clay:hover,
.bs-btn--clay:focus {
	filter: brightness(1.08);
	color: var(--onclay);
}

.bs-btn--clay-lg {
	padding: 14px 26px;
	background: var(--clay-600);
	color: var(--onclay);
	font-size: 16px;
}

.bs-btn--clay-lg:hover,
.bs-btn--clay-lg:focus {
	filter: brightness(1.08);
	color: var(--onclay);
}

.bs-btn--leaf {
	height: 52px;
	padding: 0 24px;
	background: var(--leaf-700);
	color: var(--onleaf);
	font-size: 16px;
}

.bs-btn--leaf:hover,
.bs-btn--leaf:focus {
	background: var(--leaf-500);
	color: var(--onleaf);
}

.bs-btn--outline {
	padding: 12px 24px;
	background: transparent;
	color: var(--leaf-700);
	border: 1px solid var(--leaf-700);
	font-size: 15px;
}

.bs-btn--outline:hover,
.bs-btn--outline:focus {
	background: var(--leaf-50);
	color: var(--leaf-700);
}

.bs-iconbtn {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px solid var(--line);
	border-radius: 999px;
	cursor: pointer;
	padding: 0;
	transition: border-color 150ms ease-out, background 150ms ease-out;
}

.bs-iconbtn:hover,
.bs-iconbtn:focus {
	border-color: var(--leaf-200);
	background: var(--leaf-50);
}

/* ------------------------------------------------------------------ *
 * 4. Header
 * ------------------------------------------------------------------ */

.bs-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	height: 64px;
	display: flex;
	align-items: center;
}

.bs-header__inner {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--pad);
	display: flex;
	align-items: center;
	gap: 16px;
	justify-content: space-between;
}

.bs-logo {
	display: flex;
	align-items: center;
	gap: 9px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: none;
}

.bs-logo:hover,
.bs-logo:focus {
	text-decoration: none;
}

.bs-logo__name {
	font-family: var(--bnh);
	font-weight: 700;
	font-size: 19px;
	color: var(--head);
	letter-spacing: -.01em;
	white-space: nowrap;
}

.bs-logo img {
	max-height: 40px;
	width: auto;
	display: block;
}

.bs-nav {
	display: var(--nav-d);
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bs-nav li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bs-nav a {
	position: relative;
	font-family: var(--bnh);
	font-size: 15px;
	font-weight: 500;
	color: var(--ink-600);
	text-decoration: none;
	padding: 4px 0 6px;
	display: inline-block;
	transition: color 160ms ease-out;
}

/* The underline is a pseudo-element so hover can wipe it in from the left. */
.bs-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--leaf-500);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 200ms ease-out;
}

.bs-nav a:hover,
.bs-nav a:focus-visible {
	color: var(--leaf-700);
	text-decoration: none;
}

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

.bs-nav .current-menu-item > a,
.bs-nav .current_page_item > a,
.bs-nav .current-menu-ancestor > a,
.bs-nav a[aria-current="page"] {
	font-weight: 600;
	color: var(--leaf-700);
}

.bs-nav .current-menu-item > a::after,
.bs-nav .current_page_item > a::after,
.bs-nav .current-menu-ancestor > a::after,
.bs-nav a[aria-current="page"]::after {
	transform: scaleX(1);
}

/**
 * The current item's bar retracts to the right when another text link is
 * hovered, so the underline reads as moving between items.
 *
 * Scoped with :has() to text links only — hovering the CTA pill leaves the
 * active underline alone. Browsers without :has() simply keep the bar shown.
 */
.bs-nav:has(li:not(.bs-cta) > a:hover) .current-menu-item > a:not(:hover)::after,
.bs-nav:has(li:not(.bs-cta) > a:hover) .current_page_item > a:not(:hover)::after,
.bs-nav:has(li:not(.bs-cta) > a:hover) a[aria-current="page"]:not(:hover)::after {
	transform-origin: right center;
	transform: scaleX(0);
}

/* The "প্রশ্ন করুন" CTA: any menu item given the `bs-cta` class. */
.bs-nav .bs-cta > a,
.bs-nav a.bs-cta {
	padding: 9px 18px;
	background: var(--clay-600);
	color: var(--onclay);
	border: 0;
	border-radius: 999px;
	font-weight: 600;
	transition: filter 150ms ease-out, transform 150ms ease-out, box-shadow 150ms ease-out;
}

/* The CTA is a pill, not a text link — no underline bar. */
.bs-nav .bs-cta > a::after,
.bs-nav a.bs-cta::after {
	display: none;
}

.bs-nav .bs-cta > a:hover,
.bs-nav .bs-cta > a:focus-visible,
.bs-nav a.bs-cta:hover,
.bs-nav a.bs-cta:focus-visible {
	filter: brightness(1.08);
	color: var(--onclay);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(192, 86, 33, .28);
}

.bs-nav .bs-cta > a:active,
.bs-nav a.bs-cta:active {
	transform: translateY(0);
	box-shadow: none;
}

.bs-header__tools {
	display: flex;
	align-items: center;
	gap: 6px;
}

.bs-burger {
	display: var(--burger-d);
}

/* Header search drop-down */
.bs-headersearch {
	position: absolute;
	left: 0;
	right: 0;
	top: 64px;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	padding: 14px var(--pad);
	box-shadow: var(--shadow);
	z-index: 39;
}

.bs-headersearch[hidden] {
	display: none;
}

.bs-headersearch form {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	gap: 8px;
}

.bs-headersearch input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	padding: 0 18px;
	font-family: var(--bn);
	font-size: 16px;
	color: var(--ink-900);
	background: var(--cream-50);
	border: 1px solid var(--line);
	border-radius: 999px;
}

/* ------------------------------------------------------------------ *
 * 5. Mobile menu overlay
 * ------------------------------------------------------------------ */

.bs-mobilemenu {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: var(--cream-50);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
}

.bs-mobilemenu[hidden] {
	display: none;
}

.bs-mobilemenu__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 44px;
	margin-bottom: 12px;
}

.bs-mobilemenu__brand {
	font-family: var(--bnh);
	font-weight: 700;
	font-size: 19px;
	color: var(--head);
}

.bs-mobilemenu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.bs-mobilemenu ul li {
	margin: 0;
	list-style: none;
}

.bs-mobilemenu ul a {
	display: block;
	border-bottom: 1px solid var(--line);
	padding: 18px 0;
	font-family: var(--bnh);
	font-size: 22px;
	font-weight: 600;
	color: var(--ink-900);
	text-decoration: none;
	text-align: left;
}

.bs-mobilemenu ul .current-menu-item > a,
.bs-mobilemenu ul .current_page_item > a {
	color: var(--leaf-700);
}

.bs-mobilemenu ul .bs-cta > a {
	margin-top: 18px;
	background: var(--clay-600);
	color: var(--onclay);
	border: 0;
	border-radius: 999px;
	padding: 15px;
	font-size: 17px;
	text-align: center;
}

/* ------------------------------------------------------------------ *
 * 6. Hero
 * ------------------------------------------------------------------ */

.bs-hero {
	background: var(--leaf-50);
	border-bottom: 1px solid var(--line);
	position: relative;
	overflow: hidden;
}

.bs-hero__mesh {
	position: absolute;
	inset: 0;
	opacity: .04;
	background:
		repeating-linear-gradient(58deg, var(--leaf-900) 0 1px, transparent 1px 13px),
		repeating-linear-gradient(-58deg, var(--leaf-900) 0 1px, transparent 1px 13px);
	pointer-events: none;
}

.bs-hero__mesh--single {
	background: repeating-linear-gradient(58deg, var(--leaf-900) 0 1px, transparent 1px 13px);
}

.bs-hero__inner {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--hero-pad) var(--pad);
}

.bs-hero__inner--narrow {
	max-width: 760px;
}

/* Split hero: copy on the left, illustration on the right. */
.bs-hero__inner--split {
	display: grid;
	grid-template-columns: var(--hero-cols);
	gap: var(--hero-gap);
	align-items: center;
}

.bs-hero__text {
	min-width: 0;
}

.bs-hero__media {
	display: var(--hero-art-d);
	min-width: 0;
	justify-content: center;
}

.bs-hero__art {
	display: block;
	width: 100%;
	max-width: 460px;
	height: auto;
}

.bs-hero__title {
	margin: 0;
	font-family: var(--bnh);
	font-size: var(--h1);
	line-height: 1.35;
	font-weight: 700;
	color: var(--head);
	max-width: 16ch;
}

.bs-hero__lead {
	margin: 12px 0 0;
	font-size: var(--body);
	line-height: 1.85;
	color: var(--ink-600);
	max-width: 52ch;
}

.bs-herosearch {
	margin-top: 22px;
	display: flex;
	gap: 8px;
	max-width: 620px;
	flex-wrap: wrap;
}

.bs-herosearch input[type="search"] {
	flex: 1 1 220px;
	min-width: 0;
	height: 52px;
	padding: 0 18px;
	font-family: var(--bn);
	font-size: 16px;
	color: var(--ink-900);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
}

.bs-chips {
	margin-top: 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.bs-chips__label {
	font-size: var(--meta);
	color: var(--soil-700);
}

.bs-chip {
	padding: 7px 14px;
	border: 1px solid var(--leaf-200);
	border-radius: 999px;
	background: transparent;
	font-size: 14px;
	color: var(--leaf-700);
	text-decoration: none;
	transition: background 150ms ease-out;
}

.bs-chip:hover,
.bs-chip:focus {
	background: var(--surface);
	text-decoration: none;
}

/* ------------------------------------------------------------------ *
 * 7. Topics
 * ------------------------------------------------------------------ */

.bs-topics {
	display: grid;
	grid-template-columns: var(--topic-cols);
	gap: 12px;
}

.bs-topic {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 16px 14px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	text-decoration: none;
	transition: border-color 150ms ease-out, transform 150ms ease-out;
}

.bs-topic:hover,
.bs-topic:focus {
	border-color: var(--leaf-200);
	transform: translateY(-2px);
	text-decoration: none;
}

.bs-topic__name {
	font-family: var(--bnh);
	font-size: 15px;
	font-weight: 600;
	color: var(--ink-900);
}

.bs-topic__count {
	font-size: 13px;
	color: var(--soil-700);
}

/* ------------------------------------------------------------------ *
 * 8. Featured card
 * ------------------------------------------------------------------ */

.bs-featured {
	width: 100%;
	text-align: left;
	display: flex;
	flex-direction: var(--featured-dir);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
	padding: 0;
	text-decoration: none;
	transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.bs-featured {
	position: relative;
}

.bs-featured:hover,
.bs-featured:focus-within {
	border-color: var(--leaf-200);
	box-shadow: var(--shadow);
	text-decoration: none;
}

/* Whole card is the tap target, as with the feed cards. */
.bs-featured__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.bs-featured__media {
	flex: 1 1 52%;
	border-bottom: 1px solid var(--line);
}

.bs-featured__body {
	flex: 1 1 48%;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: left;
}

.bs-featured__tags {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.bs-featured__title {
	margin: 0;
	font-family: var(--bnh);
	font-size: var(--h2);
	line-height: 1.4;
	font-weight: 700;
	color: var(--ink-900);
}

.bs-featured__title a {
	color: inherit;
	text-decoration: none;
}

.bs-featured__title a:hover,
.bs-featured__title a:focus {
	color: inherit;
	text-decoration: none;
}

.bs-featured__excerpt {
	margin: 0;
	font-size: 16px;
	line-height: 1.8;
	color: var(--ink-600);
}

.bs-pill {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--clay-600);
	color: var(--onclay);
	font-family: var(--bnh);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.5;
}

.bs-pill:hover,
.bs-pill:focus {
	color: var(--onclay);
	text-decoration: none;
	filter: brightness(1.08);
}

.bs-pill--outline {
	background: transparent;
	border: 1px solid var(--clay-600);
	color: var(--clay-600);
}

.bs-pill--outline:hover,
.bs-pill--outline:focus {
	color: var(--clay-600);
}

.bs-byline {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
	color: var(--soil-700);
	font-size: var(--meta);
	flex-wrap: wrap;
}

.bs-avatar {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--leaf-50);
	border: 1px solid var(--line);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--bnh);
	font-weight: 600;
	color: var(--leaf-700);
	overflow: hidden;
	flex: none;
	font-size: 14px;
}

.bs-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 999px;
}

/* ------------------------------------------------------------------ *
 * 9. Feed grid
 * ------------------------------------------------------------------ */

.bs-feed__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.bs-feed__head .bs-h2 {
	margin-bottom: 0;
}

.bs-feed__count {
	font-size: var(--meta);
	color: var(--soil-700);
}

.bs-grid {
	display: grid;
	grid-template-columns: var(--feed-cols);
	gap: 20px;
}

.bs-card {
	text-align: left;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
	padding: 0;
	transition: transform 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.bs-card:hover,
.bs-card:focus-within {
	transform: translateY(-2px);
	border-color: var(--leaf-200);
	box-shadow: var(--shadow);
}

.bs-card__media {
	position: relative;
	border-bottom: 1px solid var(--line);
}

.bs-card__cat {
	position: absolute;
	bottom: -13px;
	left: 14px;
	z-index: 2;
}

.bs-card__body {
	padding: 22px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.bs-card__title {
	margin: 0;
	font-family: var(--bnh);
	font-size: 17px;
	line-height: 1.5;
	font-weight: 600;
	color: var(--ink-900);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bs-card__title a {
	color: inherit;
	text-decoration: none;
}

.bs-card__title a:hover,
.bs-card__title a:focus {
	color: inherit;
	text-decoration: none;
}

/* Full-card click target without nesting interactive elements. */
.bs-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.bs-card {
	position: relative;
}

.bs-card__excerpt {
	margin: 0;
	font-size: 15px;
	line-height: 1.8;
	color: var(--ink-600);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bs-card__meta {
	margin-top: auto;
	padding-top: 10px;
	display: flex;
	gap: 8px;
	color: var(--soil-700);
	font-size: var(--meta);
	flex-wrap: wrap;
}

.bs-card--compact .bs-card__meta {
	padding-top: 6px;
}

/* Inline CTA bar between feed halves */
.bs-ctabar {
	margin: 24px 0;
	background: var(--clay-100);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
}

.bs-ctabar h3 {
	margin: 0;
	font-family: var(--bnh);
	font-size: var(--h3);
	font-weight: 600;
	color: var(--ink-900);
}

.bs-ctabar p {
	margin: 6px 0 0;
	font-size: 15px;
	line-height: 1.75;
	color: var(--ink-600);
}

/* ------------------------------------------------------------------ *
 * 10. Pagination
 * ------------------------------------------------------------------ */

.bs-pagination {
	margin: var(--sec) 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.bs-pagination .page-numbers {
	/* The only Hind Siliguri user at 400; 500 is shipped, 400 is not. */
	font-weight: 500;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid var(--line);
	color: var(--ink-900);
	text-decoration: none;
	font-family: var(--bnh);
}

.bs-pagination .page-numbers:hover,
.bs-pagination .page-numbers:focus {
	border-color: var(--leaf-200);
	background: var(--leaf-50);
	text-decoration: none;
}

.bs-pagination .page-numbers.current {
	background: var(--leaf-700);
	color: var(--onleaf);
	border-color: var(--leaf-700);
	font-weight: 600;
}

.bs-pagination .page-numbers.dots {
	border: 0;
	width: auto;
	color: var(--ink-400);
	padding: 0 4px;
}

.bs-pagination .page-numbers.next,
.bs-pagination .page-numbers.prev {
	width: auto;
	padding: 0 18px;
	color: var(--leaf-700);
	font-size: 15px;
}

/* ------------------------------------------------------------------ *
 * 11. Single post
 * ------------------------------------------------------------------ */

.bs-single {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--pad);
}

.bs-single__grid {
	display: grid;
	grid-template-columns: var(--post-grid);
	gap: 48px;
	justify-content: center;
	padding: 22px 0 var(--sec);
}

/**
 * The article column.
 *
 * `post_class()` picks up Astra's `ast-article-single`, which in the separate
 * container layout paints a white card with 2.5em padding and a bottom border.
 * The design puts the article straight on the page, so all of that is undone
 * here — with enough specificity to beat Astra's `.ast-separate-container …`
 * rules and its inline dynamic CSS.
 */
body.bs-design .bs-article,
body.bs-design .ast-separate-container .bs-article,
body.bs-design .ast-separate-container .bs-article.ast-article-single,
body.bs-design .ast-separate-container .bs-article.ast-article-post {
	min-width: 0;
	max-width: 680px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.bs-breadcrumb {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
	font-size: var(--meta);
	color: var(--ink-600);
	margin-bottom: 18px;
	align-items: center;
}

.bs-breadcrumb a {
	color: var(--leaf-700);
}

.bs-post__title {
	margin: 14px 0 0;
	font-family: var(--bnh);
	font-size: var(--h1);
	line-height: 1.35;
	font-weight: 700;
	color: var(--head);
}

.bs-post__meta {
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	color: var(--soil-700);
	font-size: 14px;
}

.bs-updated {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--leaf-50);
	border: 1px solid var(--leaf-200);
	color: var(--leaf-700);
	font-size: 12px;
}

.bs-summary {
	margin: 24px 0;
	background: var(--leaf-50);
	border: 1px solid var(--leaf-200);
	border-radius: 12px;
	padding: 20px;
}

.bs-summary__label {
	font-family: var(--bnh);
	font-size: 13px;
	font-weight: 700;
	color: var(--leaf-700);
	letter-spacing: .04em;
	margin-bottom: 8px;
}

.bs-summary p {
	margin: 0;
	font-size: 18px;
	line-height: 1.85;
	font-weight: 500;
	color: var(--ink-900);
}

/**
 * "প্রশ্ন করেছেন" — the reader this question came from.
 *
 * Sits directly under the leaf-tinted summary box, so it is deliberately the
 * quieter of the two: a white panel with a hairline, against the summary's
 * tinted ground. Two leaf-50 boxes stacked would read as one confusing block.
 *
 * Hidden entirely when the question is not attributed to a reader; there is no
 * empty state to design, because an absent asker is not a gap.
 */
.bs-asker {
	margin: 0 0 var(--sec);
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
}

/* Same construction as the numbered step circles in prose. */
.bs-asker__initial {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--leaf-700);
	color: var(--onleaf);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--bnh);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
}

.bs-asker__body {
	margin: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/**
 * Reads as a sentence rather than a label stacked over a value: the name is
 * emphasised by weight, not by a separate tracked caption above it.
 */
.bs-asker__line {
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink-600);
}

.bs-asker__line strong {
	font-family: var(--bnh);
	font-weight: 600;
	color: var(--ink-900);
}

.bs-asker__area {
	font-size: var(--meta);
	line-height: 1.5;
	color: var(--soil-700);
}

/**
 * "পণ্যটি কোথা থেকে এল" — provenance on a product review.
 *
 * Reads as a disclosure, not as a feature. Where the asker card is a white panel
 * lifted off the cream page, this uses the zebra tone so it sits *into* the
 * article — the register of a ledger entry rather than a card. A disclosure that
 * looks designed starts to look like marketing.
 *
 * Never hidden. See bs_the_review_source().
 */
.bs-provenance {
	margin: 0 0 var(--sec);
	padding: 14px 16px;
	background: var(--zebra);
	border: 1px solid var(--line);
	border-radius: 12px;
}

.bs-provenance__label {
	margin: 0 0 6px;
	font-family: var(--bnh);
	font-size: var(--meta);
	font-weight: 600;
	color: var(--soil-700);
}

.bs-provenance__body {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-900);
}

.bs-provenance__source {
	font-family: var(--bnh);
	font-weight: 600;
}

.bs-provenance__merchant {
	color: var(--ink-600);
}

/* The part that actually matters. Same size as the source, never smaller. */
.bs-provenance__money {
	margin: 6px 0 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--ink-600);
}

/**
 * "বিক্রেতার দাবি" — a merchant claim inside a review.
 *
 * Reuses the blockquote treatment because it genuinely is a quotation: these are
 * the seller's words, set apart so they cannot be mistaken for our finding. The
 * label is generated, so an editor cannot quote a claim and forget to mark whose
 * it is.
 */
.bs-prose .bs-claim {
	margin: 22px 0;
	border-left: 3px solid var(--soil-700);
	padding: 2px 0 2px 16px;
	font-style: normal;
	color: var(--ink-600);
	background: none;
}

.bs-prose .bs-claim::before {
	content: "বিক্রেতার দাবি";
	display: block;
	margin-bottom: 4px;
	font-family: var(--bnh);
	font-size: var(--meta);
	font-weight: 600;
	color: var(--soil-700);
}

.bs-figure {
	margin: 0 0 var(--sec);
}

.bs-figure .bs-ph,
.bs-figure img {
	border-radius: 12px;
	border: 1px solid var(--line);
}

.bs-figure figcaption {
	margin-top: 9px;
	font-size: var(--meta);
	font-style: italic;
	color: var(--ink-600);
}

/* Table of contents — mobile <details> */
.bs-toc-m {
	display: var(--toc-m);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: var(--sec);
}

.bs-toc-m > summary {
	font-family: var(--bnh);
	font-size: 16px;
	font-weight: 600;
	color: var(--ink-900);
	cursor: pointer;
	list-style: none;
}

.bs-toc-m > summary::-webkit-details-marker {
	display: none;
}

.bs-toc-m__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 12px;
}

.bs-toc-m__list a {
	font-size: 15px;
	color: var(--ink-600);
	text-decoration: none;
}

/* Table of contents — desktop rail */
.bs-rail {
	display: var(--toc-r);
	min-width: 0;
}

.bs-rail__sticky {
	position: sticky;
	top: 88px;
}

.bs-rail__label {
	font-family: var(--bnh);
	font-size: 13px;
	font-weight: 700;
	color: var(--soil-700);
	letter-spacing: .04em;
	margin-bottom: 12px;
}

.bs-rail nav {
	display: flex;
	flex-direction: column;
}

.bs-rail nav a {
	padding: 9px 14px;
	border-left: 2px solid var(--line);
	color: var(--ink-600);
	font-size: 15px;
	line-height: 1.6;
	text-decoration: none;
	transition: border-color 150ms ease-out, color 150ms ease-out;
}

.bs-rail nav a.is-active {
	border-left-color: var(--leaf-500);
	color: var(--leaf-700);
}

/**
 * "কোম্পানি বা বিক্রেতা?" — the merchant entry point on a reader-facing page.
 *
 * A text link, not a button. The reader's action on an answer is to ask a
 * question; the clay CTA above owns that. A second control of equal weight would
 * compete with it at exactly the moment the answer invites one, and would put a
 * business-facing ask in front of the beginner this page is written for.
 *
 * Set in metadata colour and size so it reads as an aside addressed to somebody
 * else — which is precisely what it is.
 */
.bs-merchantlink {
	font-size: var(--meta);
	line-height: 1.7;
	color: var(--ink-600);
}

/**
 * No `white-space: nowrap` here. It would keep the arrow with the last word, but
 * the rail is only 264px and this string is editable — a longer one would push
 * past the column. Wrapping is the lesser cost.
 */
.bs-merchantlink a {
	color: var(--leaf-700);
}

/* In the rail it hangs under the ask box, separated by a hairline. */
.bs-merchantlink--rail {
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}

/* At the foot of the article it is a standalone line with room around it. */
.bs-merchantlink--foot {
	margin: 0 0 var(--sec);
	padding: 14px 16px;
	background: var(--zebra);
	border: 1px solid var(--line);
	border-radius: 12px;
	text-align: center;
}

.bs-rail__ask {
	margin-top: 22px;
	background: var(--clay-100);
	border-radius: 12px;
	padding: 16px;
}

.bs-rail__ask p {
	margin: 0 0 12px;
	font-family: var(--bnh);
	font-size: 15px;
	font-weight: 600;
	color: var(--ink-900);
}

.bs-rail__ask .bs-btn {
	width: 100%;
	padding: 11px;
	font-size: 15px;
}

/* ------------------------------------------------------------------ *
 * 12. Prose — editor content styled to the design
 * ------------------------------------------------------------------ */

.bs-prose {
	font-size: var(--body);
	line-height: 1.85;
	color: var(--ink-900);
}

/**
 * Bengali bold tops out at 600.
 *
 * The brand loads Noto Sans Bengali at 400/500/600, so an editor <strong> left
 * at the browser default of 700 was faux-bolded — a synthetic smear that closes
 * up matra and conjunct clusters at body size. README documents <strong> as the
 * step-title pattern in ordered lists, so this shows up on real content.
 */
.bs-prose strong,
.bs-prose b {
	font-weight: 600;
}

.bs-prose > *:first-child {
	margin-top: 0;
}

.bs-prose p {
	margin: 0 0 16px;
	line-height: 1.85;
	color: var(--ink-900);
	text-wrap: pretty;
}

.bs-prose h2 {
	position: relative;
	margin: var(--sec) 0 20px;
	padding-bottom: 19px;
	font-family: var(--bnh);
	font-size: var(--h2);
	font-weight: 600;
	color: var(--ink-900);
	line-height: 1.4;
	display: flex;
	align-items: center;
	gap: 9px;
}

.bs-prose h2::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background-color: var(--leaf-500);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V11'/%3E%3Cpath d='M12 12C12 8 9 5 5 5c0 4 3 7 7 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V11'/%3E%3Cpath d='M12 12C12 8 9 5 5 5c0 4 3 7 7 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bs-prose h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	background: var(--leaf-500);
	border-radius: 2px;
}

.bs-prose h3 {
	margin: 28px 0 4px;
	font-family: var(--bnh);
	font-size: var(--h3);
	font-weight: 600;
	color: var(--ink-900);
	line-height: 1.5;
}

.bs-prose h4,
.bs-prose h5,
.bs-prose h6 {
	margin: 24px 0 6px;
	font-family: var(--bnh);
	font-weight: 600;
	color: var(--ink-900);
}

.bs-prose ul {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bs-prose ul > li {
	position: relative;
	padding-left: 26px;
	font-size: var(--body);
	line-height: 1.85;
	color: var(--ink-900);
}

.bs-prose ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 16px;
	height: 16px;
	background-color: var(--leaf-500);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V12'/%3E%3Cpath d='M12 13C12 8.5 8.5 5 4 5c0 4.5 3.5 8 8 8Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V12'/%3E%3Cpath d='M12 13C12 8.5 8.5 5 4 5c0 4.5 3.5 8 8 8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bs-prose ol {
	counter-reset: bs-step;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.bs-prose ol > li {
	counter-increment: bs-step;
	position: relative;
	padding-left: 42px;
	font-size: var(--body);
	line-height: 1.85;
	color: var(--ink-600);
}

.bs-prose ol > li::before {
	content: counter(bs-step, bengali);
	position: absolute;
	left: 0;
	top: 5px;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--leaf-700);
	color: var(--onleaf);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--bnh);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
}

.bs-prose ol > li > strong:first-child,
.bs-prose ol > li > h3:first-child,
.bs-prose ol > li > h4:first-child {
	display: block;
	margin: 0 0 4px;
	font-family: var(--bnh);
	font-size: var(--h3);
	font-weight: 600;
	color: var(--ink-900);
}

.bs-prose li > ul,
.bs-prose li > ol {
	margin-top: 12px;
}

/* Tables */
.bs-prose .wp-block-table,
.bs-prose figure.wp-block-table {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: 12px;
	margin: 0 0 16px;
}

.bs-prose table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: 16px;
	margin: 0;
}

.bs-prose thead tr {
	background: var(--leaf-50);
}

.bs-prose th {
	text-align: left;
	padding: 12px 14px;
	font-family: var(--bnh);
	font-weight: 600;
	color: var(--head);
	border-bottom: 1px solid var(--line);
	border-right: 0;
}

.bs-prose td {
	padding: 12px 14px;
	line-height: 1.75;
	color: var(--ink-600);
	border-bottom: 1px solid var(--line);
	border-right: 0;
}

.bs-prose tbody tr {
	background: var(--surface);
}

.bs-prose tbody tr:nth-child(even) {
	background: var(--zebra);
}

.bs-prose tbody td:first-child {
	color: var(--ink-900);
}

/* Quotes */
.bs-prose blockquote,
.bs-prose .wp-block-quote {
	margin: 22px 0;
	border-left: 3px solid var(--leaf-200);
	padding: 2px 0 2px 16px;
	font-size: 20px;
	line-height: 1.75;
	font-style: italic;
	color: var(--ink-600);
	background: none;
}

.bs-prose blockquote p {
	margin: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* Callouts — add "bs-tip" or "bs-warn" as an Additional CSS class. */
.bs-tip,
.bs-warn,
.bs-nosell {
	margin: 22px 0;
	border-radius: 12px;
	padding: 16px 18px;
	display: flex;
	gap: 12px;
}

.bs-tip {
	background: var(--leaf-50);
	border: 1px solid var(--leaf-200);
}

.bs-warn {
	background: var(--warn-bg);
	border: 1px solid var(--warn-line);
}

/**
 * "We don't sell this" — the independence note.
 *
 * Dropped inline wherever prose names a fertiliser, seed or pesticide, because
 * that is the sentence where a reader starts wondering who paid for the advice.
 * A footer badge cannot answer that question; a note beside the recommendation
 * can.
 *
 * Deliberately the quietest callout in the family: neutral ground, hairline
 * border, no tint. It is a statement of fact, not advice (leaf) and not a
 * caution (amber) — and it appears often enough that any tint would start
 * shouting.
 */
.bs-nosell {
	background: var(--surface);
	border: 1px solid var(--line);
}

.bs-nosell::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 4px;
	background-color: var(--ink-600);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6l12.8 12.8'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6l12.8 12.8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bs-nosell > * {
	margin: 0;
	min-width: 0;
}

.bs-nosell p {
	margin: 0;
	font-size: 15px;
	line-height: 1.8;
	color: var(--ink-600);
}

.bs-tip::before,
.bs-warn::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 4px;
}

.bs-tip::before {
	background-color: var(--leaf-700);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.4.3.5.7.5 1.1h6c0-.4.1-.8.5-1.1A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.4.3.5.7.5 1.1h6c0-.4.1-.8.5-1.1A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bs-warn::before {
	background-color: var(--warn-line);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v5M12 16.5v.5'/%3E%3Cpath d='M10.3 3.9 2.6 17.4A2 2 0 0 0 4.3 20.4h15.4a2 2 0 0 0 1.7-3l-7.7-13.5a2 2 0 0 0-3.4 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v5M12 16.5v.5'/%3E%3Cpath d='M10.3 3.9 2.6 17.4A2 2 0 0 0 4.3 20.4h15.4a2 2 0 0 0 1.7-3l-7.7-13.5a2 2 0 0 0-3.4 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bs-tip > *,
.bs-warn > *,
.bs-nosell > * {
	margin: 0;
	min-width: 0;
}

.bs-tip p,
.bs-warn p {
	margin: 0;
	font-size: 16px;
	line-height: 1.8;
	color: var(--ink-900);
}

.bs-tip p + p,
.bs-warn p + p {
	margin-top: 8px;
}

.bs-tip > *:first-child > strong:first-child,
.bs-warn > *:first-child > strong:first-child {
	display: block;
	font-family: var(--bnh);
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 4px;
}

.bs-tip > *:first-child > strong:first-child {
	color: var(--leaf-700);
}

.bs-warn > *:first-child > strong:first-child {
	color: var(--warn-ink);
}

.bs-prose img,
.bs-prose iframe,
.bs-prose video {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.bs-prose figure {
	margin: 0 0 var(--sec);
}

.bs-prose figcaption {
	margin-top: 9px;
	font-size: var(--meta);
	font-style: italic;
	color: var(--ink-600);
	text-align: left;
}

.bs-prose hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: var(--sec) 0;
}

.bs-prose code,
.bs-prose pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	background: var(--zebra);
	border: 1px solid var(--line);
}

/* An inline chip this short renders 12px as a pill anyway, so name it one. */
.bs-prose code {
	padding: 2px 6px;
	font-size: .9em;
	border-radius: 999px;
}

.bs-prose pre {
	padding: 16px;
	overflow-x: auto;
	border-radius: 12px;
}

.bs-prose pre code {
	border: 0;
	padding: 0;
	background: none;
}

/* ------------------------------------------------------------------ *
 * 13. Post sections: FAQ, author, vote, share, related
 * ------------------------------------------------------------------ */

.bs-postsection {
	margin-bottom: var(--sec);
}

.bs-postsection__title {
	position: relative;
	margin: 0 0 20px;
	padding-bottom: 19px;
	font-family: var(--bnh);
	font-size: var(--h2);
	font-weight: 600;
	color: var(--ink-900);
	display: flex;
	align-items: center;
	gap: 9px;
	line-height: 1.4;
}

.bs-postsection__title::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background-color: var(--leaf-500);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V11'/%3E%3Cpath d='M12 12C12 8 9 5 5 5c0 4 3 7 7 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V11'/%3E%3Cpath d='M12 12C12 8 9 5 5 5c0 4 3 7 7 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bs-postsection__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	background: var(--leaf-500);
	border-radius: 2px;
}

/* FAQ accordion */
.bs-faq {
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--surface);
	overflow: hidden;
}

.bs-faq__item {
	border-bottom: 1px solid var(--line);
}

.bs-faq__item:last-child {
	border-bottom: 0;
}

.bs-faq__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	background: none;
	border: 0;
	padding: 16px;
	cursor: pointer;
	text-align: left;
	font-family: var(--bnh);
	font-size: 16px;
	font-weight: 600;
	color: var(--ink-900);
	line-height: 1.6;
}

.bs-faq__chev {
	flex: none;
	width: 18px;
	height: 18px;
	background-color: var(--ink-400);
	transition: transform 180ms ease-out, background-color 180ms ease-out;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bs-faq__q[aria-expanded="true"] .bs-faq__chev {
	transform: rotate(180deg);
	background-color: var(--leaf-700);
}

.bs-faq__a {
	margin: 0;
	padding: 0 16px 18px;
	font-size: 16px;
	line-height: 1.85;
	color: var(--ink-600);
}

.bs-faq__a[hidden] {
	display: none;
}

/* Content-authored <details> follow the same skin. */
.bs-prose details {
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--surface);
	padding: 16px;
	margin: 0 0 12px;
}

.bs-prose details > summary {
	font-family: var(--bnh);
	font-size: 16px;
	font-weight: 600;
	color: var(--ink-900);
	cursor: pointer;
}

/* Author box */
.bs-author {
	margin-bottom: var(--sec);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px;
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	align-items: flex-start;
}

.bs-author__avatar {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background: var(--leaf-50);
	border: 1px solid var(--leaf-200);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--bnh);
	font-size: 22px;
	font-weight: 600;
	color: var(--leaf-700);
	overflow: hidden;
}

.bs-author__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 999px;
}

.bs-author__body {
	flex: 1 1 240px;
}

.bs-author__body h3 {
	margin: 0;
	font-family: var(--bnh);
	font-size: var(--h3);
	font-weight: 600;
	color: var(--ink-900);
}

.bs-author__body p {
	margin: 6px 0 10px;
	font-size: 16px;
	line-height: 1.8;
	color: var(--ink-600);
}

.bs-author__body a {
	font-size: 15px;
}

/* Vote + share */
.bs-vote {
	margin-bottom: var(--sec);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px;
	background: var(--leaf-50);
}

.bs-vote h3 {
	margin: 0 0 14px;
	font-family: var(--bnh);
	font-size: var(--h3);
	font-weight: 600;
	color: var(--ink-900);
}

.bs-vote__row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.bs-vote__btn {
	padding: 11px 26px;
	border: 1px solid var(--leaf-700);
	background: transparent;
	color: var(--leaf-700);
	border-radius: 999px;
	font-family: var(--bnh);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 150ms ease-out, color 150ms ease-out;
}

.bs-vote__btn.is-on,
.bs-vote__btn[aria-pressed="true"] {
	background: var(--leaf-700);
	color: var(--onleaf);
}

.bs-vote__note {
	font-size: 14px;
	color: var(--soil-700);
	margin-left: 4px;
}

.bs-share {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.bs-share__label {
	font-size: 14px;
	color: var(--soil-700);
}

.bs-share a,
.bs-share button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	font-size: 14px;
	font-family: var(--bn);
	color: var(--ink-900);
	text-decoration: none;
	cursor: pointer;
	transition: border-color 150ms ease-out;
}

.bs-share a:hover,
.bs-share a:focus,
.bs-share button:hover,
.bs-share button:focus {
	border-color: var(--leaf-200);
	color: var(--ink-900);
	text-decoration: none;
}

/* ------------------------------------------------------------------ *
 * 14. Ask a question
 * ------------------------------------------------------------------ */

.bs-ask {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--sec) var(--pad);
}

.bs-asksteps {
	display: grid;
	grid-template-columns: var(--ask-steps);
	gap: 14px;
	margin-bottom: var(--sec);
}

.bs-askstep {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 16px;
	display: flex;
	gap: 12px;
}

.bs-num {
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--leaf-700);
	color: var(--onleaf);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--bnh);
	font-size: 14px;
	font-weight: 600;
}

.bs-askstep p {
	margin: 0;
	font-size: 15px;
	line-height: 1.75;
	color: var(--ink-600);
}

.bs-form {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.bs-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.bs-label {
	font-family: var(--bnh);
	font-size: 15px;
	font-weight: 600;
	color: var(--ink-900);
}

/**
 * Clay text has almost no contrast headroom: --clay-600 is 4.57:1 on --surface
 * and only 4.34:1 on --cream-50. It passes here because .bs-form is a white
 * panel. Do not move clay-coloured small text onto the cream page background.
 */
.bs-req {
	color: var(--clay-600);
}

.bs-hint {
	font-size: var(--meta);
	color: var(--ink-600);
	line-height: 1.7;
}

/**
 * These need the body.bs-design prefix, unlike most rules in this file.
 *
 * Astra styles form fields with attribute selectors — input[type="text"],
 * input[type="email"] and friends — which score (0,1,1) and therefore beat a
 * bare .bs-input at (0,1,0). Without the prefix every declaration here lost:
 * fields rendered at Astra's 4px radius, 40px height, white background and
 * #475569 slate text, a colour that is not in this palette at all.
 *
 * .bs-textarea was never affected, because Astra reaches textareas as a bare
 * element selector (0,0,1), which a single class already outranks. Both are
 * prefixed anyway so the pair cannot drift apart.
 */
body.bs-design .bs-input,
body.bs-design .bs-textarea {
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--cream-50);
	color: var(--ink-900);
	font-family: var(--bn);
	font-size: 16px;
	width: 100%;
}

body.bs-design .bs-input {
	height: 50px;
	padding: 0 14px;
}

.bs-textarea {
	padding: 12px 14px;
	line-height: 1.85;
	resize: vertical;
}

/**
 * Placeholders are held to the same 4.5:1 bar as body text.
 *
 * This has to cover every field, not just .bs-input. Astra paints placeholders
 * #9CA3AF, which measures 2.41:1 on cream and 2.54:1 on white — and the field it
 * hit hardest was the hero search, the most prominent input on the site. Dark
 * mode only passed by accident, because a light grey on a near-black surface
 * happens to clear the bar.
 *
 * Element+attribute specificity is needed to out-rank Astra's own rule; the
 * footer newsletter keeps its translucent ink via a more specific rule below,
 * because it sits on the dark band.
 */
body.bs-design input::placeholder,
body.bs-design textarea::placeholder {
	color: var(--ink-600);
	opacity: 1;
}

.bs-pair {
	display: grid;
	grid-template-columns: var(--pair-cols);
	grid-template-rows: auto auto auto;
	row-gap: 7px;
	column-gap: 14px;
}

/*
 * Align paired fields by shared row: label, hint, control. A field with no hint
 * leaves the hint row empty but inherits its height from the sibling through
 * subgrid, so the two controls in a pair always share a baseline regardless of
 * which fields carry hints. Scoped to .bs-pair so single-column fields (title,
 * composition, claim, the file upload, consent) keep their flex layout.
 */
.bs-pair .bs-field {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: 1 / span 3;
	row-gap: 7px;
}

.bs-pair .bs-field > .bs-label {
	grid-row: 1;
}

.bs-pair .bs-field > .bs-hint {
	grid-row: 2;
}

.bs-pair .bs-field > .bs-input,
.bs-pair .bs-field > .bs-textarea {
	grid-row: 3;
}

.bs-topicpicker {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bs-topicpicker label {
	position: relative;
}

.bs-topicpicker input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.bs-topicpicker span {
	display: inline-block;
	padding: 9px 16px;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--ink-600);
	border-radius: 999px;
	font-family: var(--bnh);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}

.bs-topicpicker input:checked + span {
	background: var(--leaf-700);
	color: var(--onleaf);
	border-color: var(--leaf-700);
}

.bs-topicpicker input:focus-visible + span {
	outline: 2px solid var(--leaf-500);
	outline-offset: 2px;
}

.bs-upload {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 24px;
	border: 1px dashed var(--leaf-200);
	border-radius: 12px;
	background: var(--leaf-50);
	cursor: pointer;
	text-align: center;
}

.bs-upload strong {
	font-size: 15px;
	color: var(--leaf-700);
	font-family: var(--bnh);
	font-weight: 600;
}

.bs-upload em {
	font-size: 13px;
	color: var(--ink-600);
	font-style: normal;
}

.bs-visuallyhidden {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/**
 * A privacy note, not an alarm — so it carries no state colour. It sits inside
 * .bs-form, which is already --surface, so it recesses onto the cream ground the
 * same way the inputs do rather than disappearing into a white-on-white panel.
 */
/**
 * "পাঠানোর আগে জেনে নিন" — the merchant terms, above the first field.
 *
 * Placed and weighted so it cannot be skimmed past. This is the one block on the
 * site whose job is to *discourage* a submission from anyone hoping to buy
 * coverage, so it gets the leaf ground and real prose size rather than the
 * small-print treatment terms usually get. Small print here would be dishonest.
 */
.bs-terms {
	margin: 0 0 var(--sec);
	padding: 20px;
	background: var(--leaf-50);
	border: 1px solid var(--leaf-200);
	border-radius: 12px;
}

.bs-terms__title {
	margin: 0 0 12px;
	font-family: var(--bnh);
	font-size: var(--h3);
	font-weight: 600;
	line-height: 1.45;
	color: var(--head);
}

.bs-terms__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bs-terms__list li {
	position: relative;
	padding-left: 26px;
	font-size: 16px;
	line-height: 1.75;
	color: var(--ink-900);
}

/* A drawn tick, matching the 24x24 / 1.5-stroke icon system. */
.bs-terms__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 16px;
	height: 16px;
	background-color: var(--leaf-700);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/**
 * The agreement checkbox.
 *
 * Full-width row with the box on its own baseline, so the sentence stays readable
 * at 320px instead of wrapping into a hanging indent under the control.
 */
.bs-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--ink-900);
	cursor: pointer;
}

.bs-consent input[type="checkbox"] {
	flex: none;
	margin: 3px 0 0;
	width: 20px;
	height: 20px;
	accent-color: var(--leaf-700);
}

.bs-notice {
	background: var(--cream-50);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 14px 16px;
}

.bs-notice p {
	margin: 0;
	font-size: 15px;
	line-height: 1.8;
	color: var(--ink-900);
}

.bs-formactions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
}

.bs-formactions .bs-btn--clay-lg {
	padding: 14px 30px;
}

.bs-formactions .bs-btn--outline {
	padding: 14px 24px;
	font-size: 16px;
}

.bs-formnote {
	font-size: var(--meta);
	color: var(--soil-700);
}

.bs-formerror {
	background: var(--error-bg);
	border: 1px solid var(--error-line);
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 20px;
	color: var(--ink-900);
	font-size: 15px;
}

.bs-formerror ul {
	margin: 6px 0 0;
	padding-left: 20px;
}

/* The error region takes focus on a failed submission; suppress its ring so the
   move registers for assistive tech without flashing the whole red box. */
.bs-formerror:focus {
	outline: none;
}

.bs-fielderror {
	margin: 0;
	font-size: var(--meta);
	line-height: 1.5;
	color: var(--error-line);
}

/* The native file input is visually hidden, so the global :focus-visible ring
   lands on a 1px invisible box. Surface the ring on its label instead. */
.bs-upload:has(input:focus-visible) {
	outline: 2px solid var(--leaf-500);
	outline-offset: 2px;
}

.bs-sent {
	background: var(--leaf-50);
	border: 1px solid var(--leaf-200);
	border-radius: 12px;
	padding: 24px;
	text-align: center;
}

.bs-sent h2 {
	margin: 12px 0 6px;
	font-family: var(--bnh);
	font-size: var(--h2);
	font-weight: 600;
	color: var(--head);
}

.bs-sent p {
	margin: 0 auto;
	max-width: 44ch;
	font-size: 16px;
	line-height: 1.85;
	color: var(--ink-600);
}

.bs-sent strong {
	color: var(--leaf-700);
}

.bs-sent__actions {
	margin-top: 18px;
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ------------------------------------------------------------------ *
 * 15. Footer
 * ------------------------------------------------------------------ */

/**
 * The footer band is dark in BOTH themes.
 *
 * Its ink therefore uses --onfooter / --onfooter-strong, which do not flip, in
 * the same spirit as --onclay and --onleaf. Riding --leaf-200 here meant dark
 * mode resolved it to #2F4C3A against #0C1611 — 1.95:1, effectively invisible —
 * for every node that did not carry its own override.
 *
 * The translucent rgba() strokes below are deliberate: decorative hairlines and
 * one placeholder (5.09:1) over a surface that never changes, so they need no
 * token indirection and no color-mix dependency.
 */
.bs-footer {
	background: var(--leaf-900);
	color: var(--onfooter);
	position: relative;
	overflow: hidden;
	margin-top: var(--sec);
}

.bs-footer__mesh {
	position: absolute;
	inset: 0;
	opacity: .05;
	background: repeating-linear-gradient(58deg, var(--onfooter) 0 1px, transparent 1px 13px);
	pointer-events: none;
}

.bs-footer__grid {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--sec) var(--pad);
	display: grid;
	grid-template-columns: var(--footer-cols);
	gap: 32px;
}

.bs-footer__brand {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 12px;
}

.bs-footer__brand span {
	font-family: var(--bnh);
	font-weight: 700;
	font-size: 18px;
	color: var(--onfooter-strong);
}

.bs-footer p {
	margin: 0;
	font-size: 15px;
	line-height: 1.85;
	color: var(--onfooter);
	max-width: 34ch;
}

/**
 * The independence line.
 *
 * Sized and coloured as metadata, not as a claim. Any louder and it starts
 * asserting virtue, which is the opposite of what a factual statement should do.
 */
.bs-footer__independence {
	margin-top: 10px;
	font-family: var(--bnh);
	font-size: var(--meta);
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--onfooter);
	opacity: .85;
}

.bs-footer__heading {
	font-family: var(--bnh);
	font-size: 15px;
	font-weight: 600;
	color: var(--onfooter-strong);
	margin-bottom: 12px;
}

.bs-footer__links {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bs-footer__links li {
	margin: 0;
	list-style: none;
}

body.bs-design .bs-footer__links a,
body.bs-design .bs-footer a {
	color: var(--onfooter);
	font-size: 15px;
	text-decoration: none;
}

body.bs-design .bs-footer__links a:hover,
body.bs-design .bs-footer__links a:focus,
body.bs-design .bs-footer a:hover,
body.bs-design .bs-footer a:focus {
	color: var(--onfooter-strong);
	text-decoration: underline;
}

/* The newsletter column is gone — see inc/footer.php for why. */

.bs-footer__bottom {
	position: relative;
	border-top: 1px solid rgba(191, 230, 203, .18);
}

.bs-footer__bottom > div {
	max-width: 1280px;
	margin: 0 auto;
	padding: 16px var(--pad);
	font-size: 13px;
	color: var(--onfooter);
}

/* ------------------------------------------------------------------ *
 * 16. 404 / no results / comments
 * ------------------------------------------------------------------ */

.bs-empty {
	max-width: 680px;
	margin: 0 auto;
	padding: var(--sec) var(--pad);
	text-align: center;
}

.bs-empty h1 {
	margin: 0 0 12px;
	font-family: var(--bnh);
	font-size: var(--h1);
	line-height: 1.35;
	font-weight: 700;
	color: var(--head);
}

.bs-empty p {
	margin: 0 0 22px;
	font-size: var(--body);
	line-height: 1.85;
	color: var(--ink-600);
}

.bs-empty form {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}

.bs-empty input[type="search"] {
	flex: 1 1 240px;
	max-width: 380px;
	height: 52px;
	padding: 0 18px;
	font-family: var(--bn);
	font-size: 16px;
	color: var(--ink-900);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
}

/* ------------------------------------------------------------------ *
 * 17. Related answers — branded panel
 * ------------------------------------------------------------------ */

.bs-related {
	position: relative;
	margin-bottom: var(--sec);
	padding: 24px 20px 20px;
	background: var(--leaf-50);
	border: 1px solid var(--leaf-200);
	border-radius: 12px;
	overflow: hidden;
}

.bs-related__mesh {
	position: absolute;
	inset: 0;
	opacity: .05;
	background:
		repeating-linear-gradient(58deg, var(--leaf-900) 0 1px, transparent 1px 13px),
		repeating-linear-gradient(-58deg, var(--leaf-900) 0 1px, transparent 1px 13px);
	pointer-events: none;
}

.bs-related > *:not(.bs-related__mesh) {
	position: relative;
}

.bs-related__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.bs-related__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--bnh);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--leaf-700);
	margin-bottom: 6px;
}

.bs-related__title {
	position: relative;
	margin: 0;
	padding-bottom: 13px;
	font-family: var(--bnh);
	font-size: var(--h2);
	font-weight: 600;
	color: var(--head);
	line-height: 1.4;
}

.bs-related__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	background: var(--leaf-500);
	border-radius: 2px;
}

body.bs-design .bs-related__all {
	font-family: var(--bnh);
	font-size: 14px;
	font-weight: 600;
	color: var(--leaf-700);
	text-decoration: none;
	white-space: nowrap;
	padding-bottom: 13px;
}

body.bs-design .bs-related__all:hover,
body.bs-design .bs-related__all:focus {
	color: var(--leaf-500);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Auto-fit so one or two related answers still fill the panel. */
.bs-related__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: 14px;
}

/* Cards sit on the tinted panel, so they lose their own tint and lighten up. */
.bs-related .bs-card {
	border-color: var(--line);
	background: var(--surface);
}

.bs-related .bs-card__body {
	padding: 20px 14px 14px;
}

.bs-related .bs-card__title {
	font-size: 16px;
}

.bs-related__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--leaf-200);
	font-size: 15px;
	line-height: 1.75;
	color: var(--ink-600);
}

/* ------------------------------------------------------------------ *
 * 18. Touch devices
 *
 * Most traffic is mobile. Everything below only applies to coarse
 * pointers, so the desktop density stays exactly as the design specifies.
 * ------------------------------------------------------------------ */

html {
	/**
	 * Single source of truth for anchor offset: every in-page target (TOC
	 * headings, #feed, #topics, #about) clears the 64px sticky header. Do not
	 * add scroll-margin-top to the targets as well — the two values stack and
	 * push headings past the table-of-contents scrollspy threshold.
	 */
	scroll-padding-top: 80px;
}

body.bs-design {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	overflow-x: hidden;
}

/* Long Bengali compounds and pasted URLs must never push the layout wide. */
.bs-card__title,
.bs-featured__title,
.bs-post__title,
.bs-hero__title,
.bs-topic__name,
.bs-faq__q,
.bs-prose,
.bs-breadcrumb {
	overflow-wrap: anywhere;
}

@media (pointer: coarse) {

	body.bs-design {
		-webkit-tap-highlight-color: rgba(46, 158, 85, .15);
	}

	/* --- 44px minimum on anything you tap ------------------------- */

	.bs-logo,
	.bs-iconbtn,
	.bs-toc-m > summary,
	.bs-pagination .page-numbers,
	.bs-share a,
	.bs-share button,
	.bs-topicpicker span,
	.bs-related__all {
		min-height: 44px;
	}

	/* Table-of-contents links, both the mobile panel and the desktop rail. */
	body.bs-design .bs-toc-m__list a,
	body.bs-design .bs-rail nav a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	.bs-toc-m__list {
		gap: 0;
	}

	.bs-related__all {
		display: inline-flex;
		align-items: center;
		padding-bottom: 0;
	}

	.bs-iconbtn,
	.bs-pagination .page-numbers {
		width: 44px;
	}

	.bs-pagination .page-numbers.next,
	.bs-pagination .page-numbers.prev {
		width: auto;
	}

	.bs-pagination .page-numbers.dots {
		width: auto;
		min-height: 0;
	}

	.bs-toc-m > summary {
		display: flex;
		align-items: center;
	}

	.bs-share a,
	.bs-share button,
	.bs-topicpicker span {
		padding-top: 11px;
		padding-bottom: 11px;
	}

	.bs-vote__btn {
		min-height: 48px;
	}

	/* Footer links get room to breathe rather than sitting 20px tall. */
	.bs-footer__links {
		gap: 2px;
	}

	body.bs-design .bs-footer__links a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	/* --- Hit areas that must not change how the element looks ------ *
	 * Pills, chips and breadcrumbs are small by design, so the target
	 * is grown with an invisible overlay instead of padding.          */

	.bs-pill,
	.bs-chip,
	.bs-breadcrumb a,
	.bs-breadcrumb button,
	.bs-author__body a,
	.bs-related__all {
		position: relative;
	}

	.bs-pill::before,
	.bs-chip::before,
	.bs-breadcrumb a::before,
	.bs-breadcrumb button::before,
	.bs-author__body a::before,
	.bs-related__all::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		height: 44px;
		transform: translateY(-50%);
	}

	/* Breadcrumb labels are short ("হোম"), so widen the target too. */
	.bs-breadcrumb a::before,
	.bs-breadcrumb button::before {
		left: -9px;
		right: -9px;
	}

	/* The card category pill sits over the media; keep the card link on top. */
	.bs-card__cat::before {
		display: none;
	}

	/* --- No hover-only affordances on touch ----------------------- */

	.bs-card:hover,
	.bs-featured:hover,
	.bs-topic:hover {
		transform: none;
	}
}

/* Mobile menu: full height on iOS, clear of the home indicator. */
@supports (height: 100dvh) {

	.bs-mobilemenu {
		height: 100dvh;
	}
}

.bs-mobilemenu {
	padding-bottom: max(20px, env(safe-area-inset-bottom));
	overscroll-behavior: contain;
}

/* Prose tables and code keep their own scroller instead of widening the page. */
.bs-prose .wp-block-table,
.bs-prose figure.wp-block-table,
.bs-prose pre {
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

/* ------------------------------------------------------------------ *
 * 19. Astra scroll-to-top
 *
 * Not part of the design source, but useful on a long-form site read
 * mostly on phones. Skinned to the brand instead of Astra's blue.
 * Turn it off entirely in Customize → Scroll To Top.
 * ------------------------------------------------------------------ */

/**
 * Astra toggles this element's `display` with an inline style, so visibility is
 * left alone here — the icon is centred with line-height rather than flex.
 */
body.bs-design #ast-scroll-top {
	background: var(--leaf-700);
	color: var(--onleaf);
	border-radius: 999px;
	width: 44px;
	height: 44px;
	padding: 0;
	line-height: 42px;
	text-align: center;
	box-shadow: var(--shadow);
	border: 1px solid var(--leaf-500);
	transition: background 160ms ease-out, transform 160ms ease-out;
}

body.bs-design #ast-scroll-top.ast-scroll-to-top-right {
	right: var(--pad);
	bottom: max(20px, env(safe-area-inset-bottom));
}

body.bs-design #ast-scroll-top.ast-scroll-to-top-left {
	left: var(--pad);
	bottom: max(20px, env(safe-area-inset-bottom));
}

body.bs-design #ast-scroll-top:hover,
body.bs-design #ast-scroll-top:focus-visible {
	background: var(--leaf-500);
	color: var(--onleaf);
	transform: translateY(-2px);
}

body.bs-design #ast-scroll-top .ast-icon,
body.bs-design #ast-scroll-top svg {
	fill: currentColor;
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

/* ------------------------------------------------------------------ *
 * 20. Content protection
 *
 * Switched on by the customizer, which adds .bs-protect to the body.
 * Everything here is inert without that class, so the default reading
 * experience is untouched.
 * ------------------------------------------------------------------ */

body.bs-protect {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

/* Typing surfaces are never protected. A reader has to be able to write a
   question, paste a plant name into search and correct a typo — locking the
   form would break the one thing the site exists to collect. The admin bar
   is exempt for the same practical reason. */
body.bs-protect input,
body.bs-protect textarea,
body.bs-protect select,
body.bs-protect [contenteditable="true"],
body.bs-protect #wpadminbar,
body.bs-protect #wpadminbar * {
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
	-webkit-touch-callout: default;
}

/* Stop the drag-to-desktop copy and the long-press save sheet. Pointer events
   stay on: images inside links must still be tappable. */
body.bs-protect img,
body.bs-protect svg {
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

/* The note is a light leaf-tinted card, and the edge is what makes it legible.
   Surface alone barely separates from the page — 1.05:1 in light, 1.10:1 in
   dark — and a drop shadow does nothing on a dark background, so the hairline
   is --leaf-700: 6.2:1 against the light page and 8.7:1 against the dark one.
   Text lands at 14.9:1 and 13.3:1. Green rather than clay on purpose:
   terracotta means asking, and this is not an invitation. */
.bs-protect-note {
	position: fixed;

	/* Spanning the viewport and centring with auto margins, rather than
	   left:50% — that made the containing block half the screen, so the box
	   could never grow past 50vw and the line wrapped three ways on a phone. */
	left: 0;
	right: 0;
	bottom: max(20px, env(safe-area-inset-bottom));
	width: fit-content;
	z-index: 70;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: min(92vw, 440px);
	margin: 0 auto;
	padding: 12px 16px;
	border: 1px solid var(--leaf-700);
	border-radius: 12px;
	background: var(--leaf-50);
	color: var(--ink-900);
	font-size: var(--meta);
	line-height: 1.5;
	text-align: start;
	box-shadow: 0 10px 28px rgba(12, 22, 17, .18);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .18s ease, transform .18s ease;
	pointer-events: none;
}

.bs-protect-note.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.bs-protect-note svg {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--leaf-700);
}

/* On phones the note is nearly full width, so it would sit under the
   scroll-to-top button. Lift it clear of the 44px circle. */
@media (max-width: 767px) {

	.bs-protect-note {
		bottom: calc(max(20px, env(safe-area-inset-bottom)) + 56px);
	}
}