/**
 * Monostattik — design system
 *
 * Ported 1:1 from the approved Claude Design source. Every colour, radius,
 * shadow, size and easing curve below is taken verbatim from the design file;
 * only the delivery mechanism changed (inline styles became classes).
 *
 * Table of contents
 *  1. Tokens
 *  2. Reset & base
 *  3. Typography (Latin + Bangla)
 *  4. Layout primitives
 *  5. Buttons, chips, forms
 *  6. Header & navigation
 *  7. Search overlay
 *  8. Home sections
 *  9. Archive / blog listing
 * 10. Sidebar & widgets
 * 11. Single post
 * 12. Comments
 * 13. Pages (about / contact) & 404
 * 14. Footer
 * 15. Mobile drawer & bottom bar
 * 16. Responsive
 * 17. Accessibility & print
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	--bg: #FAF9F7;
	--surface: #FFFFFF;
	--surface-2: #F4F2FA;
	--line: #E9E7E1;
	--line-soft: #F1EFEA;
	--ink: #1A1735;
	--ink-2: #4C4770;
	--ink-3: #84809E;
	--indigo: #3A3270;
	--indigo-soft: #EEEBF9;
	--lav: #C8BFEA;
	--lav-soft: #F2EEFC;
	--teal: #1D7F77;
	--teal-soft: #E3F1EF;
	--green: #5B9A70;
	--green-soft: #E8F2EA;
	--peach: #F4E3D7;
	--sky: #E8EFF8;
	--rose: #B4636B;
	--shadow: 0 1px 2px rgba(26, 23, 53, .04), 0 10px 28px -14px rgba(26, 23, 53, .13);
	--shadow-lg: 0 2px 6px rgba(26, 23, 53, .05), 0 28px 56px -24px rgba(26, 23, 53, .20);
	--scrim: rgba(250, 249, 247, .78);

	--font-display: "Newsreader", "Tiro Bangla", Georgia, "Times New Roman", serif;
	--font-body: "Manrope", "Hind Siliguri", system-ui, -apple-system, "Segoe UI", sans-serif;

	--wrap: 1280px;
	--gutter: 32px;
	--header-h: 74px;
	--sticky-top: 114px;
	--ease: cubic-bezier(.2, .8, .3, 1);
}

[data-theme="dark"] {
	--bg: #0E0C1C;
	--surface: #171531;
	--surface-2: #1D1A3B;
	--line: #2B2753;
	--line-soft: #221F44;
	--ink: #F0EEF9;
	--ink-2: #B7B2D3;
	--ink-3: #8B86AC;
	--indigo: #AA9DEA;
	--indigo-soft: #211D45;
	--lav: #8E81D2;
	--lav-soft: #1D1A3B;
	--teal: #5CC6B8;
	--teal-soft: #12302E;
	--green: #7FBE93;
	--green-soft: #14291C;
	--peach: #2C2119;
	--sky: #141D2C;
	--rose: #E08D95;
	--shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px -14px rgba(0, 0, 0, .6);
	--shadow-lg: 0 2px 6px rgba(0, 0, 0, .35), 0 28px 56px -24px rgba(0, 0, 0, .7);
	--scrim: rgba(14, 12, 28, .78);
}

/* Dark mode inverts the "on indigo" panels so white text keeps its contrast. */
[data-theme="dark"] .ms-oncolor {
	--oncolor-fg: #0E0C1C;
}

@keyframes msFadeUp {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

@keyframes msFade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes msShimmer {
	0% { background-position: -460px 0; }
	100% { background-position: 460px 0; }
}

@keyframes msBreathe {
	0%, 100% { transform: scale(1); opacity: .55; }
	50% { transform: scale(1.06); opacity: .8; }
}

@keyframes msSlide {
	from { transform: translateX(-100%); }
	to { transform: none; }
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

a {
	color: var(--teal);
	text-decoration: none;
	transition: color .2s ease;
}

a:hover,
a:focus { color: var(--indigo); }

button {
	font: inherit;
	cursor: pointer;
	color: inherit;
}

input,
textarea,
select { font: inherit; }

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

figure { margin: 0; }

::selection {
	background: var(--lav);
	color: var(--ink);
}

hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 40px 0;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 28px;
	font-family: var(--font-body);
	font-size: 15px;
}

th,
td {
	padding: 12px 14px;
	border: 1px solid var(--line);
	text-align: start;
}

th {
	background: var(--surface-2);
	font-weight: 600;
}

code,
kbd,
pre {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
	font-size: .92em;
}

pre {
	padding: 22px 24px;
	border-radius: 18px;
	background: var(--surface-2);
	border: 1px solid var(--line-soft);
	overflow: auto;
	line-height: 1.7;
}

code {
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--surface-2);
}

pre code {
	padding: 0;
	background: none;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

.ms-display,
.ms-serif {
	font-family: var(--font-display);
	font-weight: 400;
}

.ms-eyebrow {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--teal);
	margin-bottom: 14px;
}

.ms-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.ms-h1 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 70px;
	line-height: 1.05;
	letter-spacing: -.028em;
	margin: 0 0 24px;
	text-wrap: balance;
}

.ms-h2 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.12;
	letter-spacing: -.022em;
	margin: 0;
}

.ms-h3 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 30px;
	letter-spacing: -.02em;
	margin: 0 0 24px;
}

.ms-page-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 56px;
	line-height: 1.08;
	letter-spacing: -.026em;
	margin: 0 0 16px;
}

.ms-lede {
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink-2);
	margin: 0;
	max-width: 520px;
}

/*
 * Bangla typesetting.
 * Bengali script sits on a hanging headline (matra) and carries tall
 * ascenders, so the tight negative tracking used for Newsreader actively
 * hurts it. Under Bangla we neutralise tracking, lift line-height and nudge
 * the optical size up a touch. Applied via :lang() so mixed pages stay right.
 */
:lang(bn) {
	line-height: 1.85;
}

:lang(bn) .ms-h1,
:lang(bn) .ms-h2,
:lang(bn) .ms-h3,
:lang(bn) .ms-page-title,
:lang(bn) .ms-serif,
:lang(bn) .ms-display,
:lang(bn) h1,
:lang(bn) h2,
:lang(bn) h3,
:lang(bn) h4 {
	letter-spacing: 0;
	line-height: 1.38;
	word-break: normal;
	overflow-wrap: break-word;
}

:lang(bn) .ms-h1 { font-size: 62px; }
:lang(bn) .ms-page-title { font-size: 50px; }

:lang(bn) .ms-eyebrow,
:lang(bn) .ms-label,
:lang(bn) .ms-badge,
:lang(bn) .ms-chip {
	letter-spacing: .02em;
	text-transform: none;
}

:lang(bn) .ms-entry-content { line-height: 1.95; }

.ms-bn-num {
	font-feature-settings: "lnum" 0;
	font-variant-numeric: normal;
}

/* ==========================================================================
   4. Layout primitives
   ========================================================================== */

.ms-wrap {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.ms-section { padding: 0 0 116px; }
.ms-section--tight { padding: 8px 0 112px; }
.ms-section--last { padding: 0 0 120px; }

.ms-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 40px;
}

.ms-section-head p {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--ink-2);
	max-width: 340px;
	margin: 0 0 4px;
}

.ms-section-head--center {
	display: block;
	text-align: center;
	max-width: 600px;
	margin: 0 auto 46px;
}

.ms-section-head--center p {
	max-width: none;
	font-size: 16px;
	margin: 16px 0 0;
}

.ms-grid { display: grid; }
.ms-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ms-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ms-grid-4 { grid-template-columns: repeat(4, 1fr); }
.ms-grid-5 { grid-template-columns: repeat(5, 1fr); }

.ms-sticky { position: sticky; top: var(--sticky-top); }

.ms-arrow-link {
	background: none;
	border: 0;
	padding: 6px 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--teal);
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	transition: gap .2s ease;
}

.ms-arrow-link:hover,
.ms-arrow-link:focus-visible { gap: 11px; }

/* ==========================================================================
   5. Buttons, chips, forms
   ========================================================================== */

.ms-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 50px;
	padding: 0 26px;
	border-radius: 14px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	font-size: 15px;
	font-weight: 600;
	transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}

.ms-btn:hover,
.ms-btn:focus-visible {
	border-color: var(--lav);
	background: var(--lav-soft);
	color: var(--ink);
}

.ms-btn--primary {
	border: 0;
	background: var(--indigo);
	color: #fff;
}

.ms-btn--primary:hover,
.ms-btn--primary:focus-visible {
	background: var(--indigo);
	color: #fff;
	opacity: .9;
}

.ms-btn--sm {
	height: 38px;
	padding: 0 18px;
	border-radius: 11px;
	font-size: 13.5px;
}

.ms-btn--md {
	height: 46px;
	padding: 0 22px;
	border-radius: 13px;
	font-size: 14.5px;
}

.ms-btn--lg {
	height: 52px;
	padding: 0 30px;
	font-size: 15px;
}

.ms-badge {
	display: inline-block;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--lav-soft);
	color: var(--indigo);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	transition: background .2s ease;
}

a.ms-badge:hover,
a.ms-badge:focus-visible {
	background: var(--indigo);
	color: #fff;
}

.ms-badge--teal {
	padding: 6px 13px;
	background: var(--teal-soft);
	color: var(--teal);
	font-size: 11.5px;
}

a.ms-badge--teal:hover,
a.ms-badge--teal:focus-visible {
	background: var(--teal);
	color: #fff;
}

.ms-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 17px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink-2);
	font-size: 13.5px;
	font-weight: 600;
	transition: all .2s ease;
}

.ms-chip:hover,
.ms-chip:focus-visible {
	border-color: var(--lav);
	background: var(--lav-soft);
	color: var(--ink-2);
}

.ms-chip.is-active {
	background: var(--indigo);
	border-color: var(--indigo);
	color: #fff;
}

.ms-tag {
	display: inline-block;
	padding: 7px 14px;
	border-radius: 9px;
	background: var(--surface-2);
	color: var(--ink-2);
	font-size: 13px;
	font-weight: 500;
	transition: background .2s ease, color .2s ease;
}

.ms-tag:hover,
.ms-tag:focus-visible {
	background: var(--lav-soft);
	color: var(--indigo);
}

.ms-tag--sm {
	padding: 6px 12px;
	font-size: 12.5px;
}

.ms-field {
	width: 100%;
	height: 50px;
	padding: 0 16px;
	border-radius: 13px;
	border: 1px solid var(--line);
	background: var(--bg);
	color: var(--ink);
	font-size: 15px;
	outline: none;
	transition: border-color .2s ease;
}

.ms-field:focus { border-color: var(--lav); }

textarea.ms-field {
	height: auto;
	padding: 15px 16px;
	border-radius: 15px;
	line-height: 1.7;
	resize: vertical;
}

.ms-field-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-2);
	margin-bottom: 9px;
}

.ms-inline-search {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 8px 8px 20px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: var(--shadow);
}

.ms-inline-search input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: none;
	background: none;
	font-family: var(--font-display);
	font-size: 17.5px;
	color: var(--ink);
}

.ms-inline-search--compact {
	padding: 6px 6px 6px 18px;
	border-radius: 15px;
	width: 330px;
}

.ms-inline-search--compact input {
	font-family: var(--font-body);
	font-size: 14.5px;
	padding: 11px 0;
}

.ms-icon-btn {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	border: 1px solid var(--line);
	background: var(--surface);
	display: grid;
	place-items: center;
	color: var(--ink-2);
	flex: none;
	transition: border-color .2s ease, color .2s ease;
}

.ms-icon-btn:hover,
.ms-icon-btn:focus-visible {
	border-color: var(--lav);
	color: var(--ink);
}

.ms-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 22px;
}

/* ==========================================================================
   6. Header & navigation
   ========================================================================== */

.ms-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--scrim);
	backdrop-filter: blur(22px) saturate(1.5);
	-webkit-backdrop-filter: blur(22px) saturate(1.5);
	border-bottom: 1px solid var(--line-soft);
}

.ms-header__inner {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
	height: var(--header-h);
	display: flex;
	align-items: center;
	gap: 44px;
}

.ms-brand {
	display: flex;
	align-items: center;
	gap: 11px;
	color: var(--ink);
	flex: none;
}

.ms-brand:hover,
.ms-brand:focus-visible { color: var(--ink); }

.ms-brand__mark {
	width: 31px;
	height: 31px;
	border-radius: 10px;
	background: var(--indigo);
	display: grid;
	place-items: center;
	flex: none;
	overflow: hidden;
}

.ms-brand__mark img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ms-brand__text {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -.015em;
	white-space: nowrap;
}

:lang(bn) .ms-brand__text { letter-spacing: 0; }

.ms-brand__dot { color: var(--teal); }

.ms-nav {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-inline-end: auto;
}

.ms-nav ul {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms-nav li { position: relative; }

.ms-nav a {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 8px 12px;
	border-radius: 10px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ink-2);
	white-space: nowrap;
	transition: background .2s ease, color .2s ease;
}

.ms-nav a:hover,
.ms-nav a:focus-visible,
.ms-nav li.is-open > a {
	background: var(--surface-2);
	color: var(--ink);
}

.ms-nav .current-menu-item > a,
.ms-nav .current_page_item > a,
.ms-nav .current-menu-ancestor > a { color: var(--ink); }

.ms-nav__caret {
	transition: transform .2s ease;
	flex: none;
}

.ms-nav li.is-open > a .ms-nav__caret { transform: rotate(180deg); }

/* Sub menus */
.ms-nav .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline-start: -8px;
	min-width: 240px;
	padding: 10px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 20px;
	box-shadow: var(--shadow-lg);
	display: grid;
	gap: 2px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 5;
}

.ms-nav li:hover > .sub-menu,
.ms-nav li:focus-within > .sub-menu,
.ms-nav li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	animation: msFadeUp .18s ease both;
}

.ms-nav .sub-menu a {
	padding: 9px 10px;
	border-radius: 12px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
}

.ms-nav .sub-menu a:hover,
.ms-nav .sub-menu a:focus-visible { background: var(--surface-2); }

/* Mega dropdown of categories */
.ms-topics {
	position: relative;
}

.ms-topics__trigger {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 8px 12px;
	border: 0;
	border-radius: 10px;
	background: none;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ink-2);
	white-space: nowrap;
	transition: background .2s ease, color .2s ease;
}

.ms-topics__trigger:hover,
.ms-topics__trigger:focus-visible,
.ms-topics.is-open .ms-topics__trigger {
	background: var(--surface-2);
	color: var(--ink);
}

.ms-topics.is-open .ms-nav__caret { transform: rotate(180deg); }

.ms-topics__panel {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline-start: -8px;
	width: 520px;
	padding: 14px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 20px;
	box-shadow: var(--shadow-lg);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 5;
}

.ms-topics:hover .ms-topics__panel,
.ms-topics:focus-within .ms-topics__panel,
.ms-topics.is-open .ms-topics__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.ms-topics__item {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 10px;
	border-radius: 12px;
	color: var(--ink);
	transition: background .2s ease;
}

.ms-topics__item:hover,
.ms-topics__item:focus-visible {
	background: var(--surface-2);
	color: var(--ink);
}

.ms-topics__icon {
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--indigo-soft);
	display: grid;
	place-items: center;
	flex: none;
	color: var(--indigo);
}

.ms-topics__name {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
}

.ms-topics__count {
	display: block;
	font-size: 11.5px;
	color: var(--ink-3);
	margin-top: 1px;
}

.ms-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

.ms-header__progress {
	position: absolute;
	inset-inline-start: 0;
	bottom: -1px;
	height: 2px;
	background: var(--teal);
	width: 0;
	transition: width .12s linear;
	will-change: width;
}

/* Language switcher */
.ms-lang {
	position: relative;
	flex: none;
}

.ms-lang__toggle {
	display: flex;
	align-items: center;
	gap: 7px;
	height: 38px;
	padding: 0 13px;
	border-radius: 11px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink-2);
	font-size: 13.5px;
	font-weight: 600;
	transition: border-color .2s ease, color .2s ease;
}

.ms-lang__toggle:hover,
.ms-lang__toggle:focus-visible,
.ms-lang.is-open .ms-lang__toggle {
	border-color: var(--lav);
	color: var(--ink);
}

.ms-lang__menu {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline-end: 0;
	min-width: 168px;
	padding: 8px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: var(--shadow-lg);
	display: grid;
	gap: 2px;
	list-style: none;
	margin: 0;
	z-index: 70;
}

.ms-lang__menu[hidden] { display: none; }

.ms-lang__menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 11px;
	border-radius: 11px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
}

.ms-lang__menu a:hover,
.ms-lang__menu a:focus-visible { background: var(--surface-2); }

.ms-lang__menu .is-current {
	color: var(--teal);
	font-weight: 700;
}

/* Inline "বাংলা | English" variant */
.ms-lang--inline {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 12px;
	border-radius: 11px;
	border: 1px solid var(--line);
	background: var(--surface);
	font-size: 13.5px;
	font-weight: 600;
}

.ms-lang--inline a { color: var(--ink-3); }
.ms-lang--inline a:hover { color: var(--ink); }
.ms-lang--inline .is-current { color: var(--teal); }
.ms-lang--inline .ms-lang__sep { color: var(--line); }

.ms-burger { display: none; }

/* ==========================================================================
   7. Search overlay
   ========================================================================== */

.ms-searchmodal {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(20, 17, 44, .42);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	animation: msFade .18s ease both;
	display: flex;
	justify-content: center;
	padding-top: 12vh;
	overflow-y: auto;
}

.ms-searchmodal[hidden] { display: none; }

.ms-searchmodal__panel {
	width: min(680px, 92vw);
	height: max-content;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 24px;
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	animation: msFadeUp .22s var(--ease) both;
}

.ms-searchmodal__top {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 24px;
	border-bottom: 1px solid var(--line-soft);
}

.ms-searchmodal__top input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: none;
	background: none;
	font-size: 18px;
	color: var(--ink);
	font-family: var(--font-display);
}

.ms-searchmodal__kbd {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	color: var(--ink-3);
	border: 1px solid var(--line);
	border-radius: 7px;
	padding: 3px 7px;
	flex: none;
}

.ms-searchmodal__body {
	max-height: 52vh;
	overflow: auto;
	padding: 14px;
}

.ms-searchmodal__heading {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-3);
	padding: 8px 12px 10px;
}

:lang(bn) .ms-searchmodal__heading { text-transform: none; letter-spacing: .02em; }

.ms-suggest {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 12px;
	border-radius: 14px;
	background: none;
	border: 0;
	text-align: start;
	color: var(--ink);
	transition: background .2s ease;
}

.ms-suggest:hover,
.ms-suggest:focus-visible {
	background: var(--surface-2);
	color: var(--ink);
}

.ms-suggest__icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--lav-soft);
	color: var(--indigo);
	display: grid;
	place-items: center;
	flex: none;
}

.ms-suggest__title {
	display: block;
	font-size: 14.5px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ms-suggest__meta {
	display: block;
	font-size: 12px;
	color: var(--ink-3);
	margin-top: 2px;
}

.ms-recent {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 12px 18px;
}

.ms-recent a,
.ms-recent button {
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--surface);
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-2);
	transition: border-color .2s ease, background .2s ease;
}

.ms-recent a:hover,
.ms-recent button:hover,
.ms-recent a:focus-visible,
.ms-recent button:focus-visible {
	border-color: var(--lav);
	background: var(--lav-soft);
	color: var(--ink-2);
}

.ms-trend {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 12px;
	border-radius: 14px;
	background: none;
	border: 0;
	text-align: start;
	color: var(--ink);
	transition: background .2s ease;
}

.ms-trend:hover,
.ms-trend:focus-visible {
	background: var(--surface-2);
	color: var(--ink);
}

.ms-trend__n {
	font-family: var(--font-display);
	font-size: 16px;
	color: var(--ink-3);
	width: 20px;
	flex: none;
}

.ms-trend__title {
	font-size: 14.5px;
	font-weight: 500;
	flex: 1;
}

.ms-trend__cat {
	font-size: 12px;
	color: var(--ink-3);
	flex: none;
}

.ms-empty {
	padding: 44px 20px 48px;
	text-align: center;
}

.ms-empty__ring {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--surface-2);
	margin: 0 auto 16px;
	display: grid;
	place-items: center;
}

.ms-empty__title {
	font-family: var(--font-display);
	font-size: 20px;
	margin-bottom: 6px;
}

.ms-empty__text {
	font-size: 14px;
	color: var(--ink-3);
	max-width: 300px;
	margin: 0 auto;
	line-height: 1.6;
}

.ms-empty--block {
	padding: 90px 40px;
	background: var(--surface);
	border: 1px dashed var(--line);
	border-radius: 24px;
}

.ms-empty--block .ms-empty__ring {
	width: 66px;
	height: 66px;
	margin-bottom: 20px;
}

.ms-empty--block .ms-empty__title {
	font-size: 26px;
	margin-bottom: 10px;
}

.ms-empty--block .ms-empty__text {
	font-size: 15px;
	color: var(--ink-2);
	max-width: 380px;
	margin: 0 auto 24px;
	line-height: 1.7;
}

/* ==========================================================================
   8. Home sections
   ========================================================================== */

/* -- Hero ---------------------------------------------------------------- */

.ms-hero {
	position: relative;
	padding: 96px 0 104px;
	overflow: hidden;
}

.ms-hero__glow-a {
	position: absolute;
	top: -160px;
	left: 50%;
	transform: translateX(-46%);
	width: 900px;
	height: 520px;
	background: radial-gradient(ellipse at center, var(--lav-soft) 0%, transparent 68%);
	pointer-events: none;
}

.ms-hero__glow-b {
	position: absolute;
	top: 40px;
	right: 6%;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 35%, var(--teal-soft), transparent 70%);
	animation: msBreathe 11s ease-in-out infinite;
	pointer-events: none;
}

.ms-hero__inner {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
	position: relative;
	display: grid;
	grid-template-columns: 1.02fr .98fr;
	gap: 72px;
	align-items: center;
}

.ms-hero__pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 14px 7px 8px;
	border-radius: 999px;
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	margin-bottom: 30px;
}

.ms-hero__pill-dot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--green-soft);
	color: var(--green);
	display: grid;
	place-items: center;
	flex: none;
}

.ms-hero__pill-text {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-2);
	letter-spacing: .005em;
}

.ms-hero__title em {
	font-style: italic;
	color: var(--indigo);
}

.ms-hero__text {
	font-size: 19px;
	line-height: 1.72;
	color: var(--ink-2);
	margin: 0 0 36px;
	max-width: 490px;
	text-wrap: pretty;
}

.ms-hero .ms-inline-search {
	max-width: 520px;
	margin-bottom: 22px;
}

.ms-hero__cta-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.ms-hero__readers {
	display: flex;
	align-items: center;
	gap: 11px;
}

.ms-avstack { display: flex; }

.ms-avstack span {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--bg);
	display: block;
	background: var(--surface-2);
}

.ms-avstack span + span { margin-inline-start: -10px; }

.ms-avstack img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ms-hero__readers-text {
	font-size: 13px;
	color: var(--ink-3);
	line-height: 1.4;
}

.ms-hero__readers-text strong {
	color: var(--ink-2);
	font-weight: 600;
}

.ms-hero__art-wrap { position: relative; }

.ms-hero__art {
	position: relative;
	aspect-ratio: 4 / 4.4;
	border-radius: 32px;
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--line);
	background: var(--surface-2);
}

.ms-hero__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ms-hero__float {
	position: absolute;
	inset-inline-start: -34px;
	bottom: 56px;
	width: 246px;
	padding: 18px 20px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 20px;
	box-shadow: var(--shadow-lg);
	color: var(--ink);
}

.ms-hero__float-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.ms-hero__float-icon {
	width: 28px;
	height: 28px;
	border-radius: 9px;
	background: var(--teal-soft);
	color: var(--teal);
	display: grid;
	place-items: center;
	flex: none;
}

.ms-hero__float-label {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .02em;
}

.ms-hero__float-title {
	font-family: var(--font-display);
	font-size: 17px;
	line-height: 1.35;
	margin-bottom: 8px;
	display: block;
	color: var(--ink);
}

.ms-hero__float-meta {
	font-size: 12px;
	color: var(--ink-3);
}

/* -- Topic cards --------------------------------------------------------- */

.ms-topicgrid { gap: 16px; }

.ms-topiccard {
	display: block;
	text-align: start;
	padding: 24px 22px 22px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 22px;
	color: var(--ink);
	transition: transform .28s var(--ease), box-shadow .28s ease, border-color .28s ease;
}

.ms-topiccard:hover,
.ms-topiccard:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--lav);
	color: var(--ink);
}

.ms-topiccard__icon {
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: var(--indigo-soft);
	color: var(--indigo);
	display: grid;
	place-items: center;
	margin-bottom: 18px;
}

.ms-topiccard__name {
	display: block;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.008em;
	margin-bottom: 7px;
}

:lang(bn) .ms-topiccard__name { letter-spacing: 0; }

.ms-topiccard__desc {
	display: block;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ink-3);
}

/* -- Lead / featured ----------------------------------------------------- */

.ms-lead {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	width: 100%;
	text-align: start;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 28px;
	overflow: hidden;
	box-shadow: var(--shadow);
	color: var(--ink);
	margin-bottom: 26px;
	transition: box-shadow .3s ease, border-color .3s ease;
}

.ms-lead:hover,
.ms-lead:focus-within {
	box-shadow: var(--shadow-lg);
	border-color: var(--lav);
	color: var(--ink);
}

.ms-lead__media {
	display: block;
	position: relative;
	min-height: 380px;
	background: var(--surface-2);
}

.ms-lead__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ms-lead__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 52px 54px;
}

.ms-lead__meta-top {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.ms-lead__note {
	font-size: 12.5px;
	color: var(--ink-3);
}

.ms-lead__title {
	display: block;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 39px;
	line-height: 1.15;
	letter-spacing: -.022em;
	margin: 0 0 18px;
	color: var(--ink);
}

.ms-lead__title a { color: var(--ink); }

.ms-lead__dek {
	display: block;
	font-size: 16.5px;
	line-height: 1.72;
	color: var(--ink-2);
	margin-bottom: 30px;
}

.ms-byline {
	display: flex;
	align-items: center;
	gap: 13px;
}

.ms-byline__av {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	overflow: hidden;
	display: block;
	flex: none;
	background: var(--surface-2);
}

.ms-byline__av img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ms-byline__text {
	font-size: 13.5px;
	line-height: 1.45;
}

.ms-byline__text strong {
	font-weight: 600;
	display: block;
	color: var(--ink);
}

.ms-byline__text span { color: var(--ink-3); }

/* -- Article card (grid) ------------------------------------------------- */

.ms-cardgrid { gap: 26px; }

.ms-postcard {
	display: flex;
	flex-direction: column;
	text-align: start;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 24px;
	overflow: hidden;
	color: var(--ink);
	box-shadow: var(--shadow);
	transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease;
}

.ms-postcard:hover,
.ms-postcard:focus-within {
	transform: translateY(-5px);
	box-shadow: var(--shadow-lg);
	border-color: var(--lav);
}

.ms-postcard--in { animation: msFadeUp .34s ease both; }

.ms-postcard__media {
	display: block;
	position: relative;
	height: 212px;
	background: var(--surface-2);
	overflow: hidden;
}

.ms-postcard__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--ease);
}

.ms-postcard:hover .ms-postcard__media img { transform: scale(1.035); }

.ms-postcard__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 24px 24px 26px;
}

.ms-postcard__top {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.ms-postcard__read {
	font-size: 12px;
	color: var(--ink-3);
}

.ms-postcard__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 23px;
	line-height: 1.24;
	letter-spacing: -.015em;
	margin: 0 0 11px;
	text-wrap: pretty;
}

.ms-postcard__title a { color: var(--ink); }
.ms-postcard__title a:hover { color: var(--indigo); }

.ms-postcard__dek {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--ink-2);
	margin: 0 0 20px;
}

.ms-postcard__foot {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 12.5px;
	color: var(--ink-3);
	margin-top: auto;
}

.ms-postcard__av {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	overflow: hidden;
	display: block;
	flex: none;
	background: var(--surface-2);
}

.ms-postcard__av img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ms-postcard--list .ms-postcard__media { height: 200px; }

.ms-postcard--sm .ms-postcard__media { height: 190px; }
.ms-postcard--sm .ms-postcard__body { padding: 24px; }
.ms-postcard--sm .ms-postcard__title { font-size: 22px; }
.ms-postcard--sm .ms-postcard__dek { font-size: 14px; margin-bottom: 18px; }

.ms-postcard__kicker {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--teal);
	margin-bottom: 13px;
}

:lang(bn) .ms-postcard__kicker { text-transform: none; letter-spacing: .02em; }

/* -- Pull quote ---------------------------------------------------------- */

.ms-quote {
	position: relative;
	border-radius: 32px;
	background: linear-gradient(158deg, var(--lav-soft) 0%, var(--indigo-soft) 52%, var(--teal-soft) 100%);
	border: 1px solid var(--line);
	padding: 96px 64px;
	overflow: hidden;
	text-align: center;
}

.ms-quote__ring {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.ms-quote__ring--1 { top: -90px; right: -60px; width: 320px; height: 320px; border: 1px solid var(--lav); opacity: .5; }
.ms-quote__ring--2 { top: -40px; right: -10px; width: 220px; height: 220px; border: 1px solid var(--lav); opacity: .4; }
.ms-quote__ring--3 { bottom: -120px; left: -70px; width: 280px; height: 280px; border: 1px solid var(--teal); opacity: .28; }

.ms-quote blockquote {
	margin: 0 auto 32px;
	max-width: 880px;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 44px;
	line-height: 1.32;
	letter-spacing: -.02em;
	color: var(--ink);
	text-wrap: balance;
	border: 0;
	padding: 0;
}

:lang(bn) .ms-quote blockquote { letter-spacing: 0; line-height: 1.5; font-size: 38px; }

.ms-quote__author {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .03em;
	color: var(--ink-2);
}

.ms-quote__role {
	font-size: 13px;
	color: var(--ink-3);
	margin-top: 5px;
}

/* -- Numbered growth list ------------------------------------------------ */

.ms-numgrid { gap: 20px; }

.ms-numcard {
	text-align: start;
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding: 26px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 22px;
	color: var(--ink);
	transition: border-color .28s ease, box-shadow .28s ease;
}

.ms-numcard:hover,
.ms-numcard:focus-within {
	border-color: var(--lav);
	box-shadow: var(--shadow);
}

.ms-numcard__n {
	font-family: var(--font-display);
	font-size: 30px;
	color: var(--lav);
	line-height: 1;
	flex: none;
	margin-top: 2px;
}

.ms-numcard__tag {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--teal);
	margin-bottom: 9px;
}

:lang(bn) .ms-numcard__tag { text-transform: none; letter-spacing: .02em; }

.ms-numcard__title {
	display: block;
	font-family: var(--font-display);
	font-size: 21px;
	line-height: 1.28;
	letter-spacing: -.012em;
	margin: 0 0 10px;
	text-wrap: pretty;
	color: var(--ink);
}

.ms-numcard__title a { color: var(--ink); }
.ms-numcard__title a:hover { color: var(--indigo); }

.ms-numcard__meta {
	display: block;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ink-3);
}

/* -- Spotlight (sticky intro + row cards) -------------------------------- */

.ms-spotlight {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 64px;
	align-items: start;
}

.ms-spotlight__intro h2 { margin-bottom: 18px; }

.ms-spotlight__intro p {
	font-size: 15.5px;
	line-height: 1.72;
	color: var(--ink-2);
	margin: 0 0 26px;
}

.ms-rowlist {
	display: grid;
	gap: 16px;
}

.ms-rowcard {
	display: grid;
	grid-template-columns: 150px 1fr auto;
	gap: 26px;
	align-items: center;
	text-align: start;
	padding: 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 22px;
	color: var(--ink);
	transition: border-color .28s ease, box-shadow .28s ease, transform .28s var(--ease);
}

.ms-rowcard:hover,
.ms-rowcard:focus-within {
	border-color: var(--lav);
	box-shadow: var(--shadow);
	transform: translateX(4px);
}

.ms-rowcard__media {
	display: block;
	height: 112px;
	border-radius: 15px;
	overflow: hidden;
	background: var(--surface-2);
	position: relative;
}

.ms-rowcard__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ms-rowcard__body {
	min-width: 0;
	padding: 4px 0;
}

.ms-rowcard__title {
	display: block;
	font-family: var(--font-display);
	font-size: 22px;
	line-height: 1.26;
	letter-spacing: -.014em;
	margin: 0 0 9px;
	text-wrap: pretty;
}

.ms-rowcard__title a { color: var(--ink); }
.ms-rowcard__title a:hover { color: var(--indigo); }

.ms-rowcard__dek {
	display: block;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0 0 11px;
}

.ms-rowcard__meta {
	display: block;
	font-size: 12.5px;
	color: var(--ink-3);
}

.ms-rowcard__go {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--line);
	display: grid;
	place-items: center;
	color: var(--ink-3);
	margin-inline-end: 12px;
	flex: none;
}

/* -- Tips ---------------------------------------------------------------- */

.ms-tipgrid { gap: 20px; }

.ms-tip {
	padding: 32px 30px 34px;
	border-radius: 24px;
	border: 1px solid var(--line-soft);
	transition: transform .3s var(--ease);
}

.ms-tip:hover { transform: translateY(-4px); }

.ms-tip__icon {
	width: 46px;
	height: 46px;
	border-radius: 15px;
	background: var(--surface);
	color: var(--indigo);
	display: grid;
	place-items: center;
	margin-bottom: 22px;
	box-shadow: var(--shadow);
}

.ms-tip__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 23px;
	line-height: 1.26;
	letter-spacing: -.015em;
	margin: 0 0 12px;
}

.ms-tip__body {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--ink-2);
	margin: 0;
}

/* -- Newsletter band ----------------------------------------------------- */

.ms-nl {
	position: relative;
	border-radius: 32px;
	background: var(--indigo);
	padding: 80px 72px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 64px;
	align-items: center;
}

.ms-nl__glow {
	position: absolute;
	top: -140px;
	right: -80px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .13), transparent 68%);
	pointer-events: none;
}

.ms-nl__copy { position: relative; }

.ms-nl__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.14;
	letter-spacing: -.022em;
	margin: 0 0 16px;
	color: #fff;
}

:lang(bn) .ms-nl__title { letter-spacing: 0; line-height: 1.4; }

.ms-nl__text {
	font-size: 16.5px;
	line-height: 1.7;
	margin: 0;
	color: rgba(255, 255, 255, .72);
	max-width: 420px;
}

.ms-nl__form-wrap { position: relative; }

.ms-nl__form {
	display: flex;
	gap: 10px;
	padding: 8px;
	background: rgba(255, 255, 255, .11);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 18px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.ms-nl__form input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: none;
	background: none;
	padding: 0 16px;
	font-size: 15.5px;
	color: #fff;
}

.ms-nl__form input::placeholder { color: rgba(255, 255, 255, .5); }

.ms-nl__form button {
	height: 48px;
	padding: 0 26px;
	border-radius: 13px;
	border: 0;
	background: #fff;
	color: var(--indigo);
	font-size: 15px;
	font-weight: 700;
	flex: none;
	transition: opacity .2s ease;
}

.ms-nl__form button:hover,
.ms-nl__form button:focus-visible { opacity: .88; }

.ms-nl__help {
	font-size: 13px;
	color: rgba(255, 255, 255, .55);
	margin-top: 14px;
	padding-inline-start: 4px;
}

.ms-nl__done {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 24px 26px;
	background: rgba(255, 255, 255, .13);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 18px;
	animation: msFadeUp .3s ease both;
}

.ms-nl__done-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	color: var(--green);
	display: grid;
	place-items: center;
	flex: none;
}

.ms-nl__done strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 3px;
	color: #fff;
}

.ms-nl__done span { color: rgba(255, 255, 255, .68); font-size: 14px; }

/* ==========================================================================
   9. Archive / blog listing
   ========================================================================== */

.ms-main--archive {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 56px var(--gutter) 110px;
}

.ms-crumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
	font-size: 13px;
	color: var(--ink-3);
	margin: 0 0 34px;
	list-style: none;
	padding: 0;
}

.ms-crumbs a { color: var(--ink-3); }
.ms-crumbs a:hover { color: var(--teal); }
.ms-crumbs [aria-current="page"] { color: var(--ink-2); font-weight: 500; }

.ms-archive-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 48px;
	margin-bottom: 44px;
}

.ms-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	padding-bottom: 30px;
	margin-bottom: 38px;
	border-bottom: 1px solid var(--line);
}

.ms-layout {
	display: grid;
	grid-template-columns: 1fr 316px;
	gap: 56px;
	align-items: start;
}

.ms-layout--full { grid-template-columns: minmax(0, 1fr); }

.ms-skel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 24px;
	overflow: hidden;
}

.ms-skel__media {
	height: 196px;
	background: linear-gradient(90deg, var(--surface-2) 25%, var(--line-soft) 50%, var(--surface-2) 75%);
	background-size: 920px 100%;
	animation: msShimmer 1.4s infinite linear;
}

.ms-skel__body { padding: 24px; }
.ms-skel__bar { border-radius: 6px; background: var(--surface-2); }

.ms-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 52px;
}

.ms-pagination .page-numbers {
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink-2);
	font-size: 14px;
	font-weight: 600;
	display: grid;
	place-items: center;
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.ms-pagination .page-numbers:hover,
.ms-pagination .page-numbers:focus-visible { border-color: var(--lav); color: var(--ink); }

.ms-pagination .page-numbers.current {
	background: var(--indigo);
	border-color: var(--indigo);
	color: #fff;
}

.ms-pagination .page-numbers.dots { border-color: transparent; background: none; }
.ms-pagination .prev,
.ms-pagination .next { width: 42px; padding: 0; color: var(--ink-3); }

.ms-archero {
	position: relative;
	overflow: hidden;
	background: var(--surface-2);
	border-bottom: 1px solid var(--line);
}

.ms-archero__glow {
	position: absolute;
	top: -160px;
	right: -60px;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, var(--teal-soft), transparent 70%);
	pointer-events: none;
}

.ms-archero__inner {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 44px var(--gutter) 68px;
	position: relative;
}

.ms-archero .ms-crumbs { margin-bottom: 38px; }

.ms-archero__grid {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 64px;
	align-items: end;
}

.ms-archero__icon {
	width: 60px;
	height: 60px;
	border-radius: 19px;
	background: var(--surface);
	color: var(--indigo);
	display: grid;
	place-items: center;
	margin-bottom: 24px;
	box-shadow: var(--shadow);
	overflow: hidden;
}

.ms-archero__icon img { width: 100%; height: 100%; object-fit: cover; }

.ms-archero__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 58px;
	line-height: 1.06;
	letter-spacing: -.028em;
	margin: 0 0 18px;
}

:lang(bn) .ms-archero__title { font-size: 50px; letter-spacing: 0; line-height: 1.32; }

.ms-archero__desc {
	font-size: 18px;
	line-height: 1.72;
	color: var(--ink-2);
	margin: 0;
	max-width: 600px;
	text-wrap: pretty;
}

.ms-stats { display: flex; gap: 14px; }

.ms-stat {
	flex: 1;
	padding: 22px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 18px;
}

.ms-stat__n {
	font-family: var(--font-display);
	font-size: 34px;
	line-height: 1;
	margin-bottom: 7px;
}

.ms-stat__label { font-size: 12.5px; color: var(--ink-3); }

.ms-archive-body {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 52px var(--gutter) 110px;
}

.ms-subhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 24px;
	margin-bottom: 34px;
	border-bottom: 1px solid var(--line);
	flex-wrap: wrap;
}

.ms-subhead__title {
	font-family: var(--font-display);
	font-size: 26px;
	margin: 0;
	font-weight: 400;
}

.ms-sorts { display: flex; gap: 8px; flex-wrap: wrap; }

.ms-sort {
	padding: 8px 15px;
	border-radius: 10px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink-2);
	font-size: 13px;
	font-weight: 600;
	transition: all .2s ease;
}

.ms-sort:hover { border-color: var(--lav); }

.ms-sort.is-active {
	background: var(--indigo);
	border-color: var(--indigo);
	color: #fff;
}

.ms-lead--cat { grid-template-columns: 1fr 1.05fr; margin-bottom: 46px; }
.ms-lead--cat .ms-lead__media { min-height: 330px; }
.ms-lead--cat .ms-lead__body { padding: 48px 52px; }
.ms-lead--cat .ms-lead__title { font-size: 36px; line-height: 1.16; margin-bottom: 16px; }
.ms-lead--cat .ms-lead__dek { font-size: 16px; margin-bottom: 28px; }
.ms-lead__metaline { font-size: 13.5px; color: var(--ink-3); }

/* ==========================================================================
   10. Sidebar & widgets
   ========================================================================== */

.ms-sidebar {
	position: sticky;
	top: var(--sticky-top);
	display: grid;
	gap: 20px;
	align-content: start;
}

.ms-widget {
	padding: 26px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 22px;
}

.ms-widget__title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin: 0 0 18px;
}

:lang(bn) .ms-widget__title { text-transform: none; letter-spacing: .02em; font-size: 12.5px; }

.ms-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 11px;
}

.ms-widget li { font-size: 14.5px; line-height: 1.6; }
.ms-widget li a { color: var(--ink-2); }
.ms-widget li a:hover { color: var(--teal); }
.ms-widget .children { padding-inline-start: 14px; margin-top: 11px; }

.ms-widget select,
.ms-widget input[type="text"],
.ms-widget input[type="search"],
.ms-widget input[type="email"] {
	width: 100%;
	height: 42px;
	padding: 0 14px;
	border-radius: 11px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	font-size: 14px;
	outline: none;
}

.ms-tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-tagcloud a { font-size: 12.5px !important; }

.ms-rank { display: grid; gap: 2px; }

.ms-rank__item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 11px 10px;
	margin: 0 -10px;
	border-radius: 14px;
	color: var(--ink);
	transition: background .2s ease;
}

.ms-rank__item:hover,
.ms-rank__item:focus-visible { background: var(--surface-2); color: var(--ink); }

.ms-rank__n {
	font-family: var(--font-display);
	font-size: 19px;
	color: var(--lav);
	line-height: 1.2;
	flex: none;
}

.ms-rank__title {
	display: block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	margin-bottom: 4px;
}

.ms-rank__meta { display: block; font-size: 12px; color: var(--ink-3); }

.ms-nlcard {
	padding: 28px 26px;
	background: var(--surface-2);
	border: 1px solid var(--line-soft);
	border-radius: 22px;
}

.ms-nlcard__icon {
	width: 40px;
	height: 40px;
	border-radius: 13px;
	background: var(--surface);
	color: var(--teal);
	display: grid;
	place-items: center;
	margin-bottom: 18px;
	box-shadow: var(--shadow);
}

.ms-nlcard__title {
	font-family: var(--font-display);
	font-size: 22px;
	line-height: 1.3;
	margin: 0 0 9px;
	font-weight: 400;
}

.ms-nlcard p { font-size: 13.5px; line-height: 1.65; color: var(--ink-2); margin: 0 0 18px; }

.ms-nlcard input {
	width: 100%;
	height: 42px;
	padding: 0 14px;
	border-radius: 11px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	font-size: 14px;
	outline: none;
	margin-bottom: 9px;
}

.ms-nlcard button {
	width: 100%;
	height: 42px;
	border-radius: 11px;
	border: 0;
	background: var(--indigo);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	transition: opacity .2s ease;
}

.ms-nlcard button:hover { opacity: .9; }

/* ==========================================================================
   11. Single post
   ========================================================================== */

.ms-post-head {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 40px var(--gutter) 0;
}

.ms-post-head .ms-crumbs { margin-bottom: 44px; }

.ms-post-title-block {
	max-width: 760px;
	margin: 0 auto 44px;
	text-align: center;
}

.ms-post-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 58px;
	line-height: 1.1;
	letter-spacing: -.028em;
	margin: 26px 0 24px;
	text-wrap: balance;
}

:lang(bn) .ms-post-title { font-size: 48px; letter-spacing: 0; line-height: 1.36; }

.ms-post-dek {
	font-size: 20px;
	line-height: 1.68;
	color: var(--ink-2);
	margin: 0 0 34px;
	text-wrap: pretty;
}

.ms-post-byline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.ms-post-byline__av {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	overflow: hidden;
	display: block;
	flex: none;
	background: var(--surface-2);
}

.ms-post-byline__text { text-align: start; font-size: 14px; line-height: 1.5; }
.ms-post-byline__text strong { display: block; font-weight: 600; }
.ms-post-byline__text span { color: var(--ink-3); }

.ms-post-cover {
	height: 520px;
	border-radius: 32px;
	overflow: hidden;
	border: 1px solid var(--line);
	box-shadow: var(--shadow-lg);
	margin-bottom: 16px;
	position: relative;
	background: var(--surface-2);
}

.ms-post-cover img { width: 100%; height: 100%; object-fit: cover; }

.ms-post-caption {
	text-align: center;
	font-size: 12.5px;
	color: var(--ink-3);
	margin-bottom: 64px;
}

.ms-post-layout {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 0 var(--gutter) 100px;
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr) 220px;
	gap: 56px;
	align-items: start;
}

.ms-post-layout--notoc { grid-template-columns: minmax(0, 1fr) 220px; }
.ms-post-layout--plain { grid-template-columns: minmax(0, 1fr); max-width: 880px; }

.ms-toc { position: sticky; top: var(--sticky-top); }

.ms-toc__title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 18px;
}

:lang(bn) .ms-toc__title { text-transform: none; letter-spacing: .02em; font-size: 12.5px; }

.ms-toc__list {
	display: grid;
	gap: 1px;
	border-inline-start: 2px solid var(--line);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms-toc__list a {
	display: block;
	padding: 9px 0 9px 16px;
	margin-inline-start: -2px;
	border-inline-start: 2px solid transparent;
	color: var(--ink-3);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.45;
	transition: all .2s ease;
}

.ms-toc__list a:hover { color: var(--ink-2); }

.ms-toc__list a.is-active {
	border-inline-start-color: var(--teal);
	color: var(--ink);
	font-weight: 600;
}

.ms-toc__list .lvl-3 a { padding-inline-start: 28px; font-size: 13px; }

.ms-toc__progress {
	margin-top: 30px;
	padding-top: 26px;
	border-top: 1px solid var(--line);
}

.ms-toc__progress-label { font-size: 12.5px; color: var(--ink-3); margin-bottom: 10px; }

.ms-toc__track {
	height: 4px;
	border-radius: 2px;
	background: var(--line);
	overflow: hidden;
}

.ms-toc__bar {
	height: 100%;
	background: var(--teal);
	border-radius: 2px;
	width: 0;
	transition: width .12s linear;
}

.ms-entry-content {
	font-family: var(--font-display);
	font-size: 19.5px;
	line-height: 1.82;
	color: var(--ink);
}

.ms-entry-content p { margin: 0 0 24px; }

.ms-entry-content h2 {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 32px;
	line-height: 1.24;
	letter-spacing: -.02em;
	margin: 44px 0 20px;
	scroll-margin-top: 110px;
}

.ms-entry-content h3 {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 25px;
	line-height: 1.3;
	letter-spacing: -.016em;
	margin: 36px 0 16px;
	scroll-margin-top: 110px;
}

.ms-entry-content h4 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 18px;
	margin: 30px 0 14px;
	scroll-margin-top: 110px;
}

.ms-entry-content > *:first-child { margin-top: 0; }

.ms-entry-content ul,
.ms-entry-content ol { margin: 0 0 28px; padding-inline-start: 26px; }

.ms-entry-content li { margin-bottom: 10px; }

.ms-entry-content blockquote {
	margin: 36px 0;
	padding: 0 0 0 32px;
	border-inline-start: 3px solid var(--lav);
	font-size: 26px;
	line-height: 1.48;
	font-weight: 300;
	letter-spacing: -.014em;
	font-style: italic;
	color: var(--ink);
}

:lang(bn) .ms-entry-content blockquote { letter-spacing: 0; font-size: 22px; line-height: 1.7; }

.ms-entry-content blockquote p:last-child { margin-bottom: 0; }

.ms-entry-content img { border-radius: 20px; }
.ms-entry-content figure { margin: 32px 0; }

.ms-entry-content figcaption {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--ink-3);
	text-align: center;
	margin-top: 12px;
}

.ms-entry-content a {
	color: var(--teal);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.ms-entry-content a:hover { color: var(--indigo); }

/* Editor block styles */
.ms-callout {
	padding: 26px 30px;
	background: var(--teal-soft);
	border-radius: 20px;
	margin: 0 0 32px;
	font-family: var(--font-body);
}

.ms-callout__head {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--teal);
	margin-bottom: 12px;
}

.ms-callout p { margin: 0; font-size: 15.5px; line-height: 1.72; color: var(--ink-2); }

.ms-note {
	margin: 36px 0 0;
	padding: 24px 28px;
	background: var(--surface-2);
	border: 1px solid var(--line-soft);
	border-radius: 18px;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.7;
	color: var(--ink-3);
}

.ms-steps { display: grid; gap: 14px; margin: 0 0 34px; font-family: var(--font-body); }

.ms-step {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 24px 26px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 18px;
}

.ms-step__n {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--indigo-soft);
	color: var(--indigo);
	display: grid;
	place-items: center;
	font-size: 14px;
	font-weight: 700;
	flex: none;
}

.ms-step strong { display: block; font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.ms-step span { font-size: 15px; line-height: 1.7; color: var(--ink-2); }

.ms-post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 46px 0 0;
	font-family: var(--font-body);
}

.ms-authorbox {
	display: flex;
	gap: 22px;
	align-items: flex-start;
	margin: 44px 0 0;
	padding: 32px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 24px;
	font-family: var(--font-body);
}

.ms-authorbox__av {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	display: block;
	flex: none;
	background: var(--surface-2);
}

.ms-authorbox__av img { border-radius: 50%; }

.ms-authorbox__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 9px;
}

:lang(bn) .ms-authorbox__label { text-transform: none; letter-spacing: .02em; font-size: 12.5px; }

.ms-authorbox__name {
	display: block;
	font-family: var(--font-display);
	font-size: 24px;
	margin-bottom: 9px;
}

.ms-authorbox__name a { color: var(--ink); }
.ms-authorbox__name a:hover { color: var(--indigo); }

.ms-authorbox__bio {
	display: block;
	font-size: 15px;
	line-height: 1.72;
	color: var(--ink-2);
	margin-bottom: 16px;
}

.ms-authorbox__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.ms-related { margin: 56px 0 0; font-family: var(--font-body); }
.ms-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.ms-relcard {
	display: flex;
	flex-direction: column;
	text-align: start;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 20px;
	overflow: hidden;
	color: var(--ink);
	transition: border-color .28s ease, box-shadow .28s ease;
}

.ms-relcard:hover,
.ms-relcard:focus-within { border-color: var(--lav); box-shadow: var(--shadow); }

.ms-relcard__media {
	display: block;
	height: 132px;
	position: relative;
	background: var(--surface-2);
	overflow: hidden;
}

.ms-relcard__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ms-relcard__body { padding: 18px 20px 20px; }

.ms-relcard__cat {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--teal);
	margin-bottom: 10px;
}

:lang(bn) .ms-relcard__cat { text-transform: none; letter-spacing: .02em; }

.ms-relcard__title {
	display: block;
	font-family: var(--font-display);
	font-size: 19px;
	line-height: 1.28;
	margin: 0 0 9px;
	text-wrap: pretty;
	font-weight: 400;
}

.ms-relcard__title a { color: var(--ink); }
.ms-relcard__title a:hover { color: var(--indigo); }

.ms-relcard__meta { display: block; font-size: 12.5px; color: var(--ink-3); }

.ms-share {
	position: sticky;
	top: var(--sticky-top);
	display: grid;
	gap: 12px;
	justify-items: center;
}

.ms-share__title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 4px;
	width: 100%;
}

:lang(bn) .ms-share__title { text-transform: none; letter-spacing: .02em; font-size: 12.5px; }

.ms-share__list { display: grid; gap: 9px; width: 100%; }

.ms-share__btn {
	display: flex;
	align-items: center;
	gap: 11px;
	height: 42px;
	padding: 0 14px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink-2);
	font-size: 13.5px;
	font-weight: 600;
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.ms-share__btn:hover,
.ms-share__btn:focus-visible {
	border-color: var(--lav);
	color: var(--ink);
	background: var(--lav-soft);
}

.ms-share__btn svg { flex: none; }

.ms-share__left {
	width: 100%;
	margin-top: 16px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	font-size: 13px;
	line-height: 1.7;
	color: var(--ink-3);
}

.ms-share__left strong {
	font-family: var(--font-display);
	font-size: 22px;
	color: var(--ink);
	font-weight: 400;
}

.ms-postnav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 48px 0 0;
	font-family: var(--font-body);
}

.ms-postnav__item {
	padding: 22px 24px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 20px;
	transition: border-color .25s ease;
}

.ms-postnav__item:hover { border-color: var(--lav); }
.ms-postnav__item--next { text-align: end; }

.ms-postnav__label {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 10px;
}

:lang(bn) .ms-postnav__label { text-transform: none; letter-spacing: .02em; }

.ms-postnav__title {
	display: block;
	font-family: var(--font-display);
	font-size: 19px;
	line-height: 1.3;
	color: var(--ink);
}

/* ==========================================================================
   12. Comments
   ========================================================================== */

.ms-comments { margin: 56px 0 0; font-family: var(--font-body); }

.ms-comments__head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 26px;
	flex-wrap: wrap;
}

.ms-comments__head h2,
.ms-comments__head h3 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 30px;
	letter-spacing: -.02em;
	margin: 0;
}

:lang(bn) .ms-comments__head h2,
:lang(bn) .ms-comments__head h3 { letter-spacing: 0; }

.ms-comments__count { font-size: 14px; color: var(--ink-3); }

.ms-commentform {
	display: flex;
	gap: 14px;
	padding: 20px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 20px;
	margin-bottom: 26px;
}

.ms-commentform .comment-form { display: block; margin: 0; }

.ms-commentform__av {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	display: block;
	flex: none;
	background: var(--surface-2);
}

.ms-commentform__av img { border-radius: 50%; }

.ms-commentform__main { flex: 1; min-width: 0; }

.ms-commentform textarea {
	width: 100%;
	border: 0;
	outline: none;
	background: none;
	resize: vertical;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink);
	padding: 9px 0;
	min-height: 62px;
}

.ms-commentform .comment-form-comment { margin: 0; }

.ms-commentform__fields {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 10px 0 4px;
}

.ms-commentform__fields p { margin: 0; }

.ms-commentform__fields input {
	height: 42px;
	padding: 0 13px;
	border-radius: 11px;
	border: 1px solid var(--line);
	background: var(--bg);
	color: var(--ink);
	font-size: 14px;
	outline: none;
	width: 100%;
}

.ms-commentform .form-submit {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 9px;
	margin: 6px 0 0;
	flex-wrap: wrap;
}

.ms-commentform .comment-form-cookies-consent {
	margin: 8px 0 0;
	font-size: 12.5px;
	color: var(--ink-3);
	display: flex;
	align-items: center;
	gap: 8px;
}

.ms-commentform .submit {
	height: 36px;
	padding: 0 18px;
	border-radius: 10px;
	border: 0;
	background: var(--indigo);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	transition: opacity .2s ease;
	cursor: pointer;
}

.ms-commentform .submit:hover { opacity: .9; }

.ms-commentform #cancel-comment-reply-link {
	height: 36px;
	display: inline-flex;
	align-items: center;
	padding: 0 16px;
	border-radius: 10px;
	color: var(--ink-3);
	font-size: 13.5px;
	font-weight: 600;
}

.ms-commentform .logged-in-as,
.ms-commentform .comment-notes {
	font-size: 12.5px;
	color: var(--ink-3);
	margin: 0 0 8px;
}

.ms-commentlist {
	display: grid;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms-commentlist .children { list-style: none; margin: 0; padding-inline-start: 54px; }

.ms-comment {
	display: flex;
	gap: 14px;
	padding: 22px 20px;
	border-bottom: 1px solid var(--line-soft);
}

.ms-comment__av {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	display: block;
	flex: none;
	background: var(--surface-2);
}

.ms-comment__av img { border-radius: 50%; }
.ms-comment__main { min-width: 0; flex: 1; }

.ms-comment__head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.ms-comment__name { font-size: 14.5px; font-weight: 600; }
.ms-comment__name a { color: var(--ink); }
.ms-comment__when { font-size: 12.5px; color: var(--ink-3); }

.ms-comment__body {
	display: block;
	font-size: 15px;
	line-height: 1.72;
	color: var(--ink-2);
	margin-bottom: 12px;
}

.ms-comment__body p { margin: 0 0 12px; }
.ms-comment__body p:last-child { margin-bottom: 0; }

.ms-comment__actions {
	display: flex;
	gap: 18px;
	font-size: 13px;
	color: var(--ink-3);
	flex-wrap: wrap;
}

.ms-comment__actions a { color: var(--ink-3); }
.ms-comment__actions a:hover { color: var(--teal); }

.ms-comment--pending { font-size: 13px; color: var(--rose); margin-bottom: 8px; }

.ms-comments__nav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 24px 0;
	font-size: 14px;
}

/* ==========================================================================
   13. Pages, search results & 404
   ========================================================================== */

.ms-pagehero {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 80px var(--gutter) 90px;
}

.ms-pagehero__inner { max-width: 820px; }

.ms-pagehero__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 62px;
	line-height: 1.08;
	letter-spacing: -.028em;
	margin: 0 0 28px;
	text-wrap: balance;
}

:lang(bn) .ms-pagehero__title { font-size: 52px; letter-spacing: 0; line-height: 1.34; }

.ms-pagehero__lede {
	font-size: 21px;
	line-height: 1.7;
	color: var(--ink-2);
	margin: 0;
	text-wrap: pretty;
}

.ms-pagecover {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 0 var(--gutter) 100px;
}

.ms-pagecover__frame {
	height: 460px;
	border-radius: 32px;
	overflow: hidden;
	border: 1px solid var(--line);
	box-shadow: var(--shadow-lg);
	position: relative;
	background: var(--surface-2);
}

.ms-pagecover__frame img { width: 100%; height: 100%; object-fit: cover; }

.ms-page-body {
	max-width: 880px;
	margin-inline: auto;
	padding: 0 var(--gutter) 110px;
}

.ms-page-body--wide { max-width: var(--wrap); }

.ms-band {
	background: var(--surface-2);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 100px 0;
	margin-bottom: 100px;
}

.ms-contact-layout {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 56px;
	align-items: start;
}

.ms-contact-card {
	padding: 44px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 26px;
	box-shadow: var(--shadow);
}

.ms-contact-aside { display: grid; gap: 20px; }

.ms-linklist { display: grid; gap: 2px; }

.ms-linklist a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 10px;
	margin: 0 -10px;
	border-radius: 12px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ink);
}

.ms-linklist a:hover { background: var(--surface-2); }
.ms-linklist a span { font-size: 13px; color: var(--ink-3); }

.ms-faq { display: grid; gap: 10px; max-width: 880px; }

.ms-faq__item {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 20px;
	overflow: hidden;
}

.ms-faq__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 28px;
	background: none;
	border: 0;
	text-align: start;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 21px;
	line-height: 1.35;
}

.ms-faq__caret {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--surface-2);
	display: grid;
	place-items: center;
	flex: none;
	color: var(--ink-2);
	transition: transform .25s ease;
}

.ms-faq__item.is-open .ms-faq__caret { transform: rotate(180deg); }

.ms-faq__a {
	padding: 0 28px 26px;
	font-size: 15.5px;
	line-height: 1.78;
	color: var(--ink-2);
	max-width: 660px;
	animation: msFade .2s ease both;
}

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

.ms-valuegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.ms-value {
	padding: 32px 28px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 22px;
}

.ms-value__n {
	font-family: var(--font-display);
	font-size: 38px;
	color: var(--lav);
	line-height: 1;
	margin-bottom: 20px;
}

.ms-value__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 23px;
	line-height: 1.26;
	letter-spacing: -.015em;
	margin: 0 0 11px;
}

.ms-value p { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); margin: 0; }

.ms-timeline { display: grid; border-inline-start: 1px solid var(--line); }

.ms-timeline__item { position: relative; padding: 0 0 44px 40px; }

.ms-timeline__dot {
	position: absolute;
	inset-inline-start: -6.5px;
	top: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--surface);
	border: 2px solid var(--teal);
}

.ms-timeline__year {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--teal);
	margin-bottom: 10px;
}

.ms-timeline__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.26;
	letter-spacing: -.018em;
	margin: 0 0 10px;
}

.ms-timeline p { font-size: 15.5px; line-height: 1.72; color: var(--ink-2); margin: 0; max-width: 560px; }

.ms-mission-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }

.ms-mission {
	padding: 44px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 26px;
}

.ms-mission__icon {
	width: 46px;
	height: 46px;
	border-radius: 15px;
	background: var(--teal-soft);
	color: var(--teal);
	display: grid;
	place-items: center;
	margin-bottom: 24px;
}

.ms-mission__icon--lav { background: var(--lav-soft); color: var(--indigo); }

.ms-mission h2 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 32px;
	letter-spacing: -.02em;
	margin: 0 0 16px;
}

.ms-mission p { font-size: 16.5px; line-height: 1.75; color: var(--ink-2); margin: 0; }

/* 404 */
.ms-404 {
	max-width: 720px;
	margin-inline: auto;
	padding: 120px var(--gutter) 140px;
	text-align: center;
}

.ms-404__code {
	font-family: var(--font-display);
	font-size: 120px;
	line-height: 1;
	color: var(--lav);
	margin-bottom: 24px;
}

.ms-404__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 46px;
	line-height: 1.14;
	letter-spacing: -.024em;
	margin: 0 0 18px;
}

:lang(bn) .ms-404__title { letter-spacing: 0; line-height: 1.4; }

.ms-404__text {
	font-size: 17px;
	line-height: 1.72;
	color: var(--ink-2);
	margin: 0 auto 34px;
	max-width: 480px;
}

.ms-404__actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 46px;
}

/* Search results */
.ms-searchhero { max-width: 760px; margin: 0 auto 60px; text-align: center; }

.ms-searchhero__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 52px;
	line-height: 1.1;
	letter-spacing: -.026em;
	margin: 0 0 18px;
}

:lang(bn) .ms-searchhero__title { font-size: 44px; letter-spacing: 0; line-height: 1.36; }

.ms-searchhero p { font-size: 17px; line-height: 1.7; color: var(--ink-2); margin: 0 0 36px; }

.ms-searchhero__form {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 10px 10px 22px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 20px;
	box-shadow: var(--shadow-lg);
}

.ms-searchhero__form input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: none;
	background: none;
	font-family: var(--font-display);
	font-size: 19px;
	color: var(--ink);
	padding: 8px 0;
}

.ms-searchresults { max-width: 900px; margin-inline: auto; }
.ms-searchresults__count { font-size: 14px; color: var(--ink-3); margin-bottom: 26px; }
.ms-searchresults__list { display: grid; gap: 14px; }

.ms-resultcard {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 24px;
	align-items: center;
	text-align: start;
	padding: 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 20px;
	color: var(--ink);
	transition: border-color .25s ease, box-shadow .25s ease;
}

.ms-resultcard:hover,
.ms-resultcard:focus-within { border-color: var(--lav); box-shadow: var(--shadow); }

.ms-resultcard__media {
	display: block;
	height: 96px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--surface-2);
	position: relative;
}

.ms-resultcard__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ms-resultcard__body { min-width: 0; padding-inline-end: 12px; }

.ms-resultcard__cat {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--teal);
	margin-bottom: 9px;
}

:lang(bn) .ms-resultcard__cat { text-transform: none; letter-spacing: .02em; }

.ms-resultcard__title {
	display: block;
	font-family: var(--font-display);
	font-size: 22px;
	line-height: 1.26;
	margin: 0 0 8px;
	font-weight: 400;
}

.ms-resultcard__title a { color: var(--ink); }
.ms-resultcard__title a:hover { color: var(--indigo); }

.ms-resultcard__meta { display: block; font-size: 13.5px; color: var(--ink-3); }

.ms-searchpanels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
	max-width: 1000px;
	margin-inline: auto;
}

.ms-searchpanel {
	padding: 32px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 24px;
}

/* ==========================================================================
   14. Footer
   ========================================================================== */

.ms-footer {
	background: var(--surface-2);
	border-top: 1px solid var(--line);
	padding: 80px 0 40px;
}

.ms-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr 1.4fr;
	gap: 48px;
	padding-bottom: 56px;
	border-bottom: 1px solid var(--line);
}

.ms-footer__brand {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 20px;
	color: var(--ink);
}

.ms-footer__about {
	font-size: 14.5px;
	line-height: 1.75;
	color: var(--ink-2);
	margin: 0 0 22px;
	max-width: 280px;
}

.ms-social { display: flex; gap: 9px; flex-wrap: wrap; }

.ms-social a {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	border: 1px solid var(--line);
	background: var(--surface);
	display: grid;
	place-items: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--ink-2);
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.ms-social a:hover,
.ms-social a:focus-visible {
	border-color: var(--lav);
	background: var(--lav-soft);
	color: var(--indigo);
}

.ms-footer__coltitle {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin: 0 0 20px;
}

:lang(bn) .ms-footer__coltitle { text-transform: none; letter-spacing: .02em; font-size: 12.5px; }

.ms-footer__list { display: grid; gap: 11px; list-style: none; margin: 0; padding: 0; }
.ms-footer__list a { font-size: 14.5px; color: var(--ink-2); }
.ms-footer__list a:hover { color: var(--teal); }

.ms-footer__nl p { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); margin: 0 0 16px; }

.ms-footer__nl-form { display: flex; gap: 8px; }

.ms-footer__nl-form input {
	flex: 1;
	min-width: 0;
	height: 44px;
	padding: 0 14px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	font-size: 14px;
	outline: none;
}

.ms-footer__nl-form button {
	height: 44px;
	padding: 0 18px;
	border-radius: 12px;
	border: 0;
	background: var(--indigo);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	flex: none;
	transition: opacity .2s ease;
}

.ms-footer__nl-form button:hover { opacity: .9; }

.ms-footer__nl-help { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; }

.ms-footer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 32px;
	flex-wrap: wrap;
}

.ms-footer__bar div { font-size: 13px; color: var(--ink-3); }
.ms-footer__bar a { color: var(--ink-3); }
.ms-footer__bar a:hover { color: var(--teal); }

.ms-footer-widgets {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	padding-bottom: 56px;
}

.ms-footer-widgets .ms-widget {
	background: none;
	border: 0;
	padding: 0;
}

/* ==========================================================================
   15. Mobile drawer & bottom bar
   ========================================================================== */

.ms-drawer {
	position: fixed;
	inset: 0;
	z-index: 95;
	background: rgba(20, 17, 44, .45);
	animation: msFade .2s ease both;
}

.ms-drawer[hidden] { display: none; }

.ms-drawer__panel {
	position: absolute;
	inset: 0 76px 0 0;
	background: var(--bg);
	padding: 24px 24px 32px;
	animation: msSlide .26s var(--ease) both;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.ms-drawer__close { align-self: flex-end; margin-bottom: 24px; }

.ms-drawer__menu {
	display: grid;
	gap: 2px;
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
}

.ms-drawer__menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 0;
	font-family: var(--font-display);
	font-size: 30px;
	line-height: 1.35;
	letter-spacing: -.018em;
	color: var(--ink);
}

:lang(bn) .ms-drawer__menu a { font-size: 26px; letter-spacing: 0; }

.ms-drawer__menu .sub-menu { padding-inline-start: 16px; list-style: none; margin: 0; }
.ms-drawer__menu .sub-menu a { font-size: 20px; color: var(--ink-2); }

.ms-drawer__topics { margin-bottom: 26px; }
.ms-drawer__chips { display: flex; flex-wrap: wrap; gap: 9px; }

.ms-drawer__chips a {
	height: 40px;
	display: flex;
	align-items: center;
	padding: 0 15px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--surface);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink-2);
}

.ms-drawer__foot { margin-top: auto; }

.ms-switchrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	background: var(--surface-2);
	border: 1px solid var(--line-soft);
	border-radius: 18px;
	margin-bottom: 14px;
	font-size: 14.5px;
	font-weight: 600;
}

.ms-switch {
	width: 52px;
	height: 31px;
	border-radius: 999px;
	border: 0;
	background: var(--line);
	position: relative;
	transition: background .25s ease;
	flex: none;
}

.ms-switch__knob {
	position: absolute;
	top: 3px;
	inset-inline-start: 3px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	transition: inset-inline-start .25s var(--ease);
}

[data-theme="dark"] .ms-switch { background: var(--teal); }
[data-theme="dark"] .ms-switch__knob { inset-inline-start: 24px; }

.ms-tabbar { display: none; }

/* ==========================================================================
   16. Responsive
   ========================================================================== */

@media (max-width: 1180px) {
	.ms-post-layout { grid-template-columns: 220px minmax(0, 1fr); }
	.ms-post-layout--notoc { grid-template-columns: minmax(0, 1fr); }
	.ms-share { display: none; }
	.ms-grid-5 { grid-template-columns: repeat(3, 1fr); }
	.ms-nl { padding: 64px 48px; gap: 40px; }
	.ms-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; }
}

@media (max-width: 1024px) {
	:root { --gutter: 24px; --sticky-top: 96px; }

	.ms-hero { padding: 64px 0 72px; }
	.ms-hero__inner { grid-template-columns: 1fr; gap: 48px; }
	.ms-hero__art { aspect-ratio: 4 / 3.2; }
	.ms-hero__float { inset-inline-start: auto; inset-inline-end: 16px; bottom: 16px; }
	.ms-h1 { font-size: 54px; }
	:lang(bn) .ms-h1 { font-size: 46px; }

	.ms-lead,
	.ms-lead--cat { grid-template-columns: 1fr; }
	.ms-lead__media { min-height: 280px; }
	.ms-lead--cat .ms-lead__media { min-height: 260px; }
	.ms-lead__body,
	.ms-lead--cat .ms-lead__body { padding: 36px 32px; }
	.ms-lead__title,
	.ms-lead--cat .ms-lead__title { font-size: 32px; }

	.ms-layout { grid-template-columns: minmax(0, 1fr); gap: 44px; }
	.ms-sidebar { position: static; grid-template-columns: repeat(2, 1fr); }

	.ms-spotlight { grid-template-columns: 1fr; gap: 36px; }
	.ms-spotlight__intro { position: static; }

	.ms-post-layout { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
	.ms-toc { display: none; }
	.ms-post-cover { height: 380px; }
	.ms-post-title { font-size: 44px; }
	:lang(bn) .ms-post-title { font-size: 38px; }

	.ms-archero__grid { grid-template-columns: 1fr; gap: 36px; align-items: start; }
	.ms-archero__title { font-size: 46px; }
	:lang(bn) .ms-archero__title { font-size: 40px; }

	.ms-contact-layout { grid-template-columns: 1fr; gap: 32px; }
	.ms-valuegrid,
	.ms-grid-4 { grid-template-columns: repeat(2, 1fr); }
	.ms-mission-grid { grid-template-columns: 1fr; }
	.ms-pagehero__title { font-size: 48px; }
	:lang(bn) .ms-pagehero__title { font-size: 42px; }
	.ms-quote { padding: 64px 40px; }
	.ms-quote blockquote { font-size: 34px; }
	:lang(bn) .ms-quote blockquote { font-size: 30px; }
	.ms-nl { grid-template-columns: 1fr; padding: 56px 40px; gap: 32px; }
	.ms-footer-widgets { grid-template-columns: repeat(2, 1fr); }
	.ms-band { padding: 72px 0; margin-bottom: 72px; }
}

@media (max-width: 900px) {
	.ms-nav,
	.ms-desktop-only { display: none !important; }

	.ms-burger { display: grid; }
	.ms-header__inner { gap: 16px; }

	.ms-grid-3,
	.ms-grid-5,
	.ms-related__grid,
	.ms-cardgrid.ms-grid-2 { grid-template-columns: repeat(2, 1fr); }

	.ms-archive-head { flex-direction: column; align-items: stretch; gap: 24px; }
	.ms-inline-search--compact { width: 100%; }
	.ms-searchpanels { grid-template-columns: 1fr; }
	.ms-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
	.ms-postnav { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
	:root { --gutter: 20px; --header-h: 64px; }

	body { font-size: 15.5px; }

	.ms-section,
	.ms-section--tight,
	.ms-section--last { padding-bottom: 72px; }

	.ms-h1 { font-size: 42px; line-height: 1.08; }
	:lang(bn) .ms-h1 { font-size: 36px; }
	.ms-h2 { font-size: 30px; }
	:lang(bn) .ms-h2 { font-size: 27px; }
	.ms-page-title { font-size: 38px; }
	:lang(bn) .ms-page-title { font-size: 33px; }

	.ms-section-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
	.ms-section-head p { max-width: none; }

	.ms-hero { padding: 40px 0 56px; }
	.ms-hero__text { font-size: 16px; margin-bottom: 22px; }
	.ms-hero__float { position: static; width: auto; margin-top: 16px; }
	.ms-hero__cta-row { flex-direction: column; align-items: stretch; }
	.ms-hero__cta-row .ms-btn { justify-content: center; }
	.ms-hero__readers { justify-content: center; }
	.ms-inline-search { padding: 6px 6px 6px 16px; border-radius: 17px; }
	.ms-inline-search input { font-size: 16px; }
	.ms-inline-search .ms-btn--primary { height: 44px; padding: 0 18px; }

	.ms-grid-2,
	.ms-grid-3,
	.ms-grid-4,
	.ms-grid-5,
	.ms-cardgrid,
	.ms-cardgrid.ms-grid-2,
	.ms-related__grid,
	.ms-valuegrid,
	.ms-sidebar,
	.ms-footer-widgets,
	.ms-searchpanels { grid-template-columns: 1fr; }

	.ms-cardgrid { gap: 20px; }

	.ms-rowcard { grid-template-columns: 1fr; gap: 14px; }
	.ms-rowcard__media { height: 180px; }
	.ms-rowcard__go { display: none; }

	.ms-lead__body,
	.ms-lead--cat .ms-lead__body { padding: 28px 24px; }
	.ms-lead__title,
	.ms-lead--cat .ms-lead__title { font-size: 27px; }
	.ms-lead__dek { font-size: 15.5px; }
	.ms-lead__media { min-height: 220px; }

	.ms-post-head { padding-top: 24px; }
	.ms-post-head .ms-crumbs { margin-bottom: 24px; }
	.ms-post-title { font-size: 34px; }
	:lang(bn) .ms-post-title { font-size: 30px; }
	.ms-post-dek { font-size: 17px; }
	.ms-post-cover { height: 240px; border-radius: 22px; }
	.ms-post-caption { margin-bottom: 40px; }
	.ms-post-layout { padding-bottom: 64px; }

	.ms-entry-content { font-size: 18px; }
	.ms-entry-content h2 { font-size: 26px; margin-top: 36px; }
	.ms-entry-content h3 { font-size: 21px; }
	.ms-entry-content blockquote { font-size: 21px; padding-inline-start: 20px; }
	:lang(bn) .ms-entry-content blockquote { font-size: 19px; }
	.ms-callout { padding: 20px 22px; }
	.ms-step { padding: 18px 20px; gap: 14px; }

	.ms-authorbox { flex-direction: column; gap: 16px; padding: 24px; }
	.ms-commentform { flex-direction: column; }
	.ms-commentform__fields { grid-template-columns: 1fr; }
	.ms-commentlist .children { padding-inline-start: 18px; }

	.ms-quote { padding: 48px 24px; border-radius: 24px; }
	.ms-quote blockquote { font-size: 26px; }
	:lang(bn) .ms-quote blockquote { font-size: 23px; }

	.ms-nl { padding: 40px 24px; border-radius: 24px; }
	.ms-nl__title { font-size: 30px; }
	.ms-nl__form { flex-direction: column; gap: 8px; }
	.ms-nl__form input { height: 48px; padding: 0 14px; }
	.ms-nl__form button { width: 100%; }

	.ms-contact-card { padding: 26px; }
	.ms-contact-card .ms-grid-2 { grid-template-columns: 1fr; }

	.ms-pagehero { padding: 48px var(--gutter) 48px; }
	.ms-pagehero__title { font-size: 36px; }
	:lang(bn) .ms-pagehero__title { font-size: 32px; }
	.ms-pagehero__lede { font-size: 17.5px; }
	.ms-pagecover { padding-bottom: 56px; }
	.ms-pagecover__frame { height: 240px; border-radius: 22px; }
	.ms-page-body { padding-bottom: 72px; }
	.ms-band { padding: 56px 0; margin-bottom: 56px; }
	.ms-mission { padding: 28px; }

	.ms-searchhero__title { font-size: 34px; }
	:lang(bn) .ms-searchhero__title { font-size: 30px; }
	.ms-searchhero__form { padding: 8px 8px 8px 16px; }
	.ms-searchhero__form input { font-size: 16.5px; }
	.ms-resultcard { grid-template-columns: 96px 1fr; gap: 16px; }
	.ms-resultcard__media { height: 76px; }
	.ms-resultcard__title { font-size: 18px; }

	.ms-archero__inner { padding-bottom: 44px; }
	.ms-archive-body { padding-top: 36px; }
	.ms-main--archive { padding-top: 32px; }

	.ms-404 { padding: 72px var(--gutter) 90px; }
	.ms-404__code { font-size: 84px; }
	.ms-404__title { font-size: 32px; }

	.ms-footer { padding: 56px 0 32px; }
	.ms-footer__grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 36px; }
	.ms-footer__bar { flex-direction: column; align-items: flex-start; gap: 10px; }

	.ms-faq__q { font-size: 18px; padding: 20px; gap: 14px; }
	.ms-faq__a { padding: 0 20px 22px; font-size: 15px; }

	.ms-timeline__item { padding-inline-start: 26px; }
	.ms-timeline__title { font-size: 22px; }

	.ms-searchmodal { padding-top: 6vh; }
	.ms-searchmodal__body { max-height: 62vh; }

	/* Bottom tab bar — mirrors the mobile design's one-thumb navigation. */
	.ms-tabbar {
		position: sticky;
		bottom: 0;
		z-index: 55;
		padding: 10px 14px calc(18px + env(safe-area-inset-bottom, 0px));
		background: var(--scrim);
		backdrop-filter: blur(18px);
		-webkit-backdrop-filter: blur(18px);
		border-top: 1px solid var(--line-soft);
		display: flex;
		justify-content: space-around;
	}

	.ms-tabbar a {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 5px;
		min-width: 56px;
		padding: 6px 0;
		color: var(--ink-3);
		font-size: 10.5px;
		font-weight: 600;
		letter-spacing: .01em;
	}

	.ms-tabbar a.is-active { color: var(--indigo); }
}

/* The mobile design specifies 44px minimum touch targets. */
@media (hover: none) and (pointer: coarse) {
	.ms-icon-btn,
	.ms-burger {
		width: 44px;
		height: 44px;
		border-radius: 13px;
	}

	.ms-lang__toggle { height: 44px; border-radius: 13px; }
	.ms-chip { padding: 11px 17px; }
	.ms-nav a { padding: 11px 12px; }
	.ms-footer__list a,
	.ms-linklist a { padding-block: 6px; }
}

/* ==========================================================================
   17. Accessibility, utilities & print
   ========================================================================== */

.screen-reader-text,
.ms-sr-only {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

.screen-reader-text:focus,
.ms-skip-link:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	display: block;
	inset-inline-start: 20px;
	top: 20px;
	z-index: 100000;
	padding: 14px 22px;
	border-radius: 12px;
	background: var(--surface);
	border: 1px solid var(--lav);
	box-shadow: var(--shadow-lg);
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

:focus-visible {
	outline: 2px solid var(--teal);
	outline-offset: 3px;
	border-radius: 4px;
}

.ms-no-scroll { overflow: hidden; }

.ms-relative { position: relative; }

/*
 * Whole-card link: the design uses card-shaped buttons. Semantically we keep a
 * real <a> on the title and stretch it over the card, so screen readers get one
 * meaningful link instead of a wrapper full of nested interactive elements.
 */
.ms-stretch::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ms-stretch-host { position: relative; }
.ms-stretch-host a:not(.ms-stretch) { position: relative; z-index: 2; }

.alignwide { max-width: 1100px; margin-inline: auto; }
.alignfull { max-width: none; }
.alignleft { float: left; margin: 6px 28px 20px 0; }
.alignright { float: right; margin: 6px 0 20px 28px; }
.aligncenter { margin-inline: auto; display: block; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--ink-3); text-align: center; }
.gallery-caption { font-size: 13px; color: var(--ink-3); }
.bypostauthor > .ms-comment .ms-comment__name::after {
	content: "★";
	color: var(--teal);
	margin-inline-start: 6px;
	font-size: 11px;
}

.ms-clear::after { content: ""; display: table; clear: both; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.ms-header,
	.ms-footer,
	.ms-share,
	.ms-toc,
	.ms-related,
	.ms-comments,
	.ms-tabbar,
	.ms-drawer,
	.ms-searchmodal,
	.ms-postnav { display: none !important; }

	body { background: #fff; color: #000; }
	.ms-post-layout { display: block; padding: 0; }
	.ms-entry-content { font-size: 12pt; color: #000; }
	.ms-post-cover { height: auto; box-shadow: none; }
	a { color: #000; text-decoration: underline; }
}

/* Footer widget columns inherit their spacing from the grid. */
.ms-footer-widgets__col > * + * { margin-top: 28px; }

/* Hook class used by the Customizer's column override. */
.ms-archive-grid { align-items: stretch; }