/*
 * Mrittika — Main Stylesheet
 * Monochrome editorial design, Material Expressive 3.
 * Depends on material-tokens.css for custom properties.
 * Sections: 1 Reset · 2 Base · 3 Layout · 4 Header · 5 Nav · 6 Cards
 *           7 Single · 8 Sidebar · 9 Comments · 10 Footer · 11 Forms
 *           12 Utilities · 13 Responsive
 */

/* ============ 1. RESET ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--color-surface);
	color: var(--color-on-surface);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background var(--dur-med) var(--ease-standard), color var(--dur-med) var(--ease-standard);
}
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; font-family: var(--font-display); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
p { margin: 0 0 1.25em; }
ul, ol { margin: 0 0 1.25em; padding-left: 1.25em; }
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--color-on-surface-variant); }
hr { border: 0; border-top: var(--border-hair); margin: var(--space-5) 0; }
:focus-visible { outline: 2px solid var(--color-on-surface); outline-offset: 2px; border-radius: var(--shape-xs); }
::selection { background: var(--color-on-surface); color: var(--color-surface); }

/* ============ 2. BASE TYPOGRAPHY ============ */
.entry-content h2 { font-size: var(--text-xl); margin-top: 1.6em; }
.entry-content h3 { font-size: var(--text-lg); margin-top: 1.4em; }
.entry-content > p:first-of-type { font-size: 1.15em; }
.entry-content a { text-decoration: underline; }
blockquote {
	margin: var(--space-4) 0;
	padding: var(--space-2) var(--space-4);
	border-left: 3px solid var(--color-on-surface);
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--text-lg);
}
code, pre, kbd { font-family: var(--font-mono); font-size: 0.92em; }
:not(pre) > code { background: var(--color-surface-container); padding: 0.15em 0.4em; border-radius: var(--shape-xs); }
pre {
	background: var(--color-surface-container);
	padding: var(--space-3);
	border-radius: var(--shape-md);
	overflow-x: auto;
	border: var(--border-hair);
}
figcaption, .thumb-caption { font-size: var(--text-sm); color: var(--color-on-surface-faint); margin-top: var(--space-2); }

/* Data tables — important for a property-index site */
.entry-content table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; font-size: var(--text-sm); }
.entry-content th, .entry-content td { padding: 0.7em 0.9em; text-align: left; border-bottom: var(--border-hair); }
.entry-content thead th { background: var(--color-surface-inverse); color: var(--color-on-inverse); font-family: var(--font-body); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-size: var(--text-xs); }
.entry-content tbody tr:nth-child(even) { background: var(--color-surface-container); }

/* ============ 3. LAYOUT ============ */
.wrap { width: 100%; max-width: var(--wide-width); margin-inline: auto; padding-inline: var(--gutter); }
.site-content { padding-block: var(--space-5); }
.layout-with-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-6); align-items: start; }
.no-sidebar .layout-with-sidebar, .layout-with-sidebar.no-sidebar { grid-template-columns: minmax(0, 1fr); }
.content-area { min-width: 0; }
.entry-single, .entry-page { max-width: var(--content-width); margin-inline: auto; }
.is-wide .entry-content { max-width: var(--wide-width); margin-inline: auto; padding-inline: var(--gutter); }
.entry-content > .alignwide { width: min(var(--wide-width), 100%); }
.entry-content > .alignfull { width: 100vw; margin-left: 50%; transform: translateX(-50%); }

/* ============ 4. HEADER ============ */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: color-mix(in srgb, var(--color-surface) 88%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: var(--border-hair);
}
.header-inner { display: flex; align-items: center; gap: var(--space-3); min-height: var(--header-h); flex-wrap: nowrap; }
.site-branding { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: 0 1 auto; }
.custom-logo { max-height: 36px; width: auto; }
.site-identity { min-width: 0; }
.site-title { margin: 0; font-size: var(--text-lg); letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.site-title a { text-decoration: none; }
.site-description { margin: 0; font-size: var(--text-xs); color: var(--color-on-surface-faint); font-family: var(--font-body); letter-spacing: var(--tracking-wide); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main-navigation { margin-left: var(--space-4); margin-right: auto; min-width: 0; }
.header-actions { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; flex: 0 0 auto; }
.search-toggle, .scheme-toggle, .menu-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; padding: 0;
	background: transparent; border: 0; border-radius: var(--shape-pill);
	color: var(--color-on-surface); cursor: pointer;
	transition: background var(--dur-fast) var(--ease-standard);
}
.search-toggle:hover, .scheme-toggle:hover, .menu-toggle:hover { background: var(--color-surface-container); }
.scheme-toggle .icon-moon { display: none; }
[data-theme="dark"] .scheme-toggle .icon-sun { display: none; }
[data-theme="dark"] .scheme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .scheme-toggle .icon-sun { display: none; }
	:root:not([data-theme="light"]) .scheme-toggle .icon-moon { display: block; }
}

/* Header search drawer */
.header-search { border-top: var(--border-hair); padding-block: var(--space-3); background: var(--color-surface); }
.header-search[hidden] { display: none; }

/* ============ 5. NAVIGATION ============ */
.primary-menu-list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-1); }
.primary-menu-list a { display: block; padding: 0.5em 0.9em; text-decoration: none; border-radius: var(--shape-pill); font-size: var(--text-sm); font-weight: 500; transition: background var(--dur-fast) var(--ease-standard); }
.primary-menu-list a:hover, .primary-menu-list .current-menu-item > a { background: var(--color-surface-container); }
.primary-menu-list .sub-menu { display: none; position: absolute; min-width: 200px; background: var(--color-surface); border: var(--border-hair); border-radius: var(--shape-md); box-shadow: var(--elev-2); padding: var(--space-1); list-style: none; }
.primary-menu-list li { position: relative; }
.primary-menu-list li:hover > .sub-menu, .primary-menu-list li:focus-within > .sub-menu { display: block; }

.menu-toggle { display: none; }
.menu-toggle-bars { display: inline-flex; flex-direction: column; gap: 4px; }
.menu-toggle-bars span { width: 20px; height: 2px; background: currentColor; transition: transform var(--dur-med) var(--ease-emphasized), opacity var(--dur-fast); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Topics bar */
.topics-bar { border-top: var(--border-hair); overflow-x: auto; scrollbar-width: none; }
.topics-bar::-webkit-scrollbar { display: none; }
.topics-list { list-style: none; display: flex; gap: var(--space-3); margin: 0; padding: 0.7em 0; white-space: nowrap; }
.topics-list a { text-decoration: none; font-size: var(--text-sm); color: var(--color-on-surface-variant); padding-bottom: 2px; border-bottom: 2px solid transparent; }
.topics-list a:hover, .topics-list .current-menu-item > a { color: var(--color-on-surface); border-bottom-color: var(--color-on-surface); }

/* Breadcrumbs — expressive sticky chips */
.breadcrumbs-wrap {
	padding-block: 0.55rem;
	border-bottom: var(--border-hair);
	background: color-mix(in srgb, var(--color-surface) 92%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.breadcrumb-list {
	list-style: none; display: flex; flex-wrap: wrap; align-items: center;
	gap: 0.15em; margin: 0; padding: 0;
	font-size: var(--text-xs);
}
.breadcrumb-item { display: inline-flex; align-items: center; }
.breadcrumb-item:not(:last-child)::after {
	content: "›"; margin: 0 0.2em;
	color: var(--color-outline-strong); font-size: 1.1em; line-height: 1;
}
.breadcrumb-item a {
	display: inline-block; text-decoration: none;
	color: var(--color-on-surface-variant);
	padding: 0.28em 0.7em;
	border-radius: var(--shape-pill);
	transition: background var(--dur-fast) var(--ease-standard),
	            color var(--dur-fast) var(--ease-standard),
	            transform var(--dur-fast) var(--ease-spring);
}
.breadcrumb-item a:hover { background: var(--color-surface-container-high); color: var(--color-on-surface); }
.breadcrumb-item a:active { transform: scale(0.93); background: var(--color-surface-inverse); color: var(--color-on-inverse); }
.breadcrumb-item.is-current {
	color: var(--color-on-surface); font-weight: 600;
	padding: 0.28em 0.7em;
	background: var(--color-surface-container);
	border-radius: var(--shape-pill);
}

/* ============ 6. CARDS & GRID ============ */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5); }
.post-card { display: flex; flex-direction: column; }
.card-media { overflow: hidden; border-radius: var(--shape-lg); margin-bottom: var(--space-3); background: var(--color-surface-container); }
.card-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform var(--dur-slow) var(--ease-emphasized); }
.post-card:hover .card-media img { transform: scale(1.04); }
.card-title { font-size: var(--text-lg); margin: 0.2em 0 0.4em; }
.card-title a { text-decoration: none; }
.card-title a:hover { text-decoration: underline; }
.card-excerpt { color: var(--color-on-surface-variant); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.card-meta, .entry-meta, .result-meta, .card-meta { font-size: var(--text-xs); color: var(--color-on-surface-faint); display: flex; flex-wrap: wrap; gap: 0.5em; align-items: center; }
.meta-sep { color: var(--color-outline-strong); }

/* Category pills */
.category-pills { display: flex; flex-wrap: wrap; gap: 0.4em; margin-bottom: 0.5em; }
.pill { display: inline-block; text-decoration: none; font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: 600; padding: 0.3em 0.8em; border: var(--border-hair); border-radius: var(--shape-pill); color: var(--color-on-surface-variant); transition: all var(--dur-fast) var(--ease-standard); }
.pill:hover { background: var(--color-on-surface); color: var(--color-surface); border-color: var(--color-on-surface); }

/* Magazine hero */
.home-hero { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-5); padding-top: var(--space-5); }
.home-hero .post-card--feature .card-title { font-size: var(--text-2xl); }
.home-hero .post-card--feature .card-media img { aspect-ratio: 3 / 2; }
.hero-secondary-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.post-card--secondary { flex-direction: row; gap: var(--space-3); }
.post-card--secondary .card-media { flex: 0 0 120px; margin-bottom: 0; }
.post-card--secondary .card-media img { aspect-ratio: 1; }
.post-card--secondary .card-title { font-size: var(--text-base); }

.section-heading { margin: var(--space-6) 0 var(--space-4); padding-bottom: var(--space-2); border-bottom: var(--border-strong); }
.section-heading h2 { margin: 0; font-size: var(--text-lg); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

/* Page headers */
.page-header { margin-bottom: var(--space-5); }
.page-title { font-size: var(--text-2xl); }
.archive-description { color: var(--color-on-surface-variant); max-width: var(--content-width); }

/* ============ 7. SINGLE POST ============ */
.single-header { text-align: center; max-width: var(--content-width); margin: var(--space-5) auto var(--space-4); }
.single-header .category-pills { justify-content: center; }
.single-header .entry-title { font-size: var(--text-2xl); }
.entry-standfirst { font-size: var(--text-lg); color: var(--color-on-surface-variant); font-family: var(--font-display); }
.single-header .entry-meta { justify-content: center; }
.post-thumbnail { display: block; margin: var(--space-4) 0 var(--space-5); }
.entry-single .post-thumbnail img { width: 100%; border-radius: var(--shape-xl); aspect-ratio: 3 / 2; object-fit: cover; }
.entry-content { font-size: 1.0625rem; }
.entry-footer { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-hair); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; }
.entry-tags a, .share-link { display: inline-block; font-size: var(--text-sm); margin-right: 0.5em; text-decoration: none; }
.entry-share { display: flex; gap: 0.5em; align-items: center; }
.share-label, .tags-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-on-surface-faint); margin-right: 0.5em; }
.share-link { padding: 0.3em 0.8em; border: var(--border-hair); border-radius: var(--shape-pill); }
.share-link:hover { background: var(--color-on-surface); color: var(--color-surface); }

/* Author bio */
.author-bio { display: flex; gap: var(--space-3); max-width: var(--content-width); margin: var(--space-5) auto; padding: var(--space-4); background: var(--color-surface-container); border-radius: var(--shape-lg); }
.author-bio .avatar { border-radius: var(--shape-pill); }
.author-eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-on-surface-faint); margin: 0; }
.author-name { font-size: var(--text-lg); margin: 0.1em 0 0.3em; }
.author-name a { text-decoration: none; }
.author-description { font-size: var(--text-sm); color: var(--color-on-surface-variant); margin: 0; }

/* Related + post nav */
.related-posts { max-width: var(--wide-width); margin: var(--space-6) auto 0; }
.related-heading { font-size: var(--text-lg); text-transform: uppercase; letter-spacing: var(--tracking-wide); border-bottom: var(--border-strong); padding-bottom: var(--space-2); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.related-thumb img { border-radius: var(--shape-md); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.related-title { font-size: var(--text-base); margin: 0.5em 0 0.2em; }
.related-title a { text-decoration: none; }
.related-meta { font-size: var(--text-xs); color: var(--color-on-surface-faint); }
.post-nav { max-width: var(--content-width); margin: var(--space-5) auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.post-nav .nav-links { display: contents; }
.post-nav a { text-decoration: none; padding: var(--space-3); border: var(--border-hair); border-radius: var(--shape-md); display: block; transition: border-color var(--dur-fast); }
.post-nav a:hover { border-color: var(--color-on-surface); }
.post-nav .nav-next { text-align: right; }
.nav-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-on-surface-faint); display: block; }
.nav-title { font-weight: 600; }

/* ============ 8. SIDEBAR ============ */
.sidebar .widget { margin-bottom: var(--space-5); }
.widget-title { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); padding-bottom: var(--space-2); border-bottom: var(--border-strong); margin-bottom: var(--space-3); }
.sidebar ul { list-style: none; padding: 0; }
.sidebar li { padding: 0.4em 0; border-bottom: var(--border-hair); }
.sidebar a { text-decoration: none; }
.sidebar a:hover { text-decoration: underline; }

/* ============ 9. COMMENTS ============ */
.comments-area { max-width: var(--content-width); margin: var(--space-6) auto 0; }
.comments-title, .comment-reply-title { font-size: var(--text-lg); }
.comment-list { list-style: none; padding: 0; }
.comment-list ol { list-style: none; }
.comment-body { padding: var(--space-3) 0; border-bottom: var(--border-hair); }
.comment-author { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.comment-author .avatar { border-radius: var(--shape-pill); }
.comment-metadata { font-size: var(--text-xs); color: var(--color-on-surface-faint); }
.comment-respond { margin-top: var(--space-4); }

/* ============ 10. FOOTER ============ */
.site-footer { margin-top: var(--space-7); border-top: var(--border-strong); background: var(--color-surface-container); }
.footer-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-5); padding-block: var(--space-6); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; padding-block: var(--space-4); border-top: var(--border-hair); }
.footer-brand { margin-right: auto; }
.footer-sitename { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); }
.footer-tagline { display: block; font-size: var(--text-xs); color: var(--color-on-surface-faint); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.footer-menu-list, .social-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0; }
.footer-menu-list a, .social-list a { text-decoration: none; font-size: var(--text-sm); color: var(--color-on-surface-variant); }
.footer-menu-list a:hover, .social-list a:hover { color: var(--color-on-surface); }
.site-info { width: 100%; font-size: var(--text-xs); color: var(--color-on-surface-faint); padding-top: var(--space-2); }

/* ============ 11. FORMS & BUTTONS ============ */
input, textarea, select, button { font: inherit; color: inherit; }
input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="password"], textarea, select {
	width: 100%; padding: 0.7em 0.9em;
	background: var(--color-surface);
	border: var(--border-hair); border-radius: var(--shape-md);
	transition: border-color var(--dur-fast) var(--ease-standard);
}
input:focus, textarea:focus, select:focus { border-color: var(--color-on-surface); outline: none; }
.button, button[type="submit"], .comment-submit, .search-submit, .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--color-primary); color: var(--color-on-primary);
	border: 0; border-radius: var(--shape-pill);
	padding: 0.75em 1.5em; font-weight: 600; cursor: pointer; text-decoration: none;
	transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast);
}
.button:hover, button[type="submit"]:hover, .search-submit:hover { background: var(--color-charcoal, #2e2e2e); transform: translateY(-1px); }
.button:active { transform: translateY(0); }

/* Search form */
.search-form .search-field-wrap { position: relative; display: flex; gap: var(--space-2); }
.search-form .search-icon { position: absolute; left: 0.9em; top: 50%; transform: translateY(-50%); color: var(--color-on-surface-faint); pointer-events: none; }
.search-form .search-field { padding-left: 2.6em; border-radius: var(--shape-pill); }
.search-form .search-submit { border-radius: var(--shape-pill); white-space: nowrap; }

/* Search results list */
.search-result { display: flex; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: var(--border-hair); }
.result-thumb img { width: 100px; height: 100px; object-fit: cover; border-radius: var(--shape-md); }
.result-title { font-size: var(--text-lg); margin: 0.2em 0; }
.result-title a { text-decoration: none; }
.result-excerpt { font-size: var(--text-sm); color: var(--color-on-surface-variant); margin: 0.3em 0; }

/* Pagination */
.mrittika-pagination { margin-top: var(--space-6); }
.mrittika-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.4em; justify-content: center; }
.mrittika-pagination .page-numbers { display: inline-flex; min-width: 42px; height: 42px; align-items: center; justify-content: center; padding: 0 0.6em; border-radius: var(--shape-pill); text-decoration: none; border: var(--border-hair); }
.mrittika-pagination .page-numbers.current { background: var(--color-on-surface); color: var(--color-surface); border-color: var(--color-on-surface); }
.mrittika-pagination .page-numbers:hover:not(.current) { background: var(--color-surface-container); }

/* ============ 12. UTILITIES ============ */
.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; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--color-on-surface); color: var(--color-surface); padding: 0.7em 1.2em; border-radius: 0 0 var(--shape-md) 0; }
.skip-link:focus { left: 0; }

/* Reading progress bar */
.reading-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--color-on-surface); z-index: 200; transition: width 80ms linear; }

/* ============ West Bengal 404 ============ */

/* Local WB accent tokens */
.error-404-page {
	--wb-terracotta: #C4622D;
	--wb-mustard: #C49A22;
	padding: 0;
	overflow: hidden;
}

/* Hero art canvas */
.e404-hero { position: relative; width: 100%; background: var(--color-surface-container); overflow: hidden; }
.e404-canvas { position: relative; max-width: var(--wide-width); margin-inline: auto; }
.e404-art { width: 100%; height: auto; display: block; }

/* SVG wave fills */
.wb-wave--1 { fill: var(--wb-mustard,#C49A22); opacity: 0.14; }
.wb-wave--2 { fill: var(--wb-terracotta,#C4622D); opacity: 0.10; }
.wb-wave--3 { fill: var(--wb-mustard,#C49A22); opacity: 0.07; }

/* Animated floating kantha dots */
.e404-float {
	position: absolute; border-radius: var(--shape-pill);
	background: var(--wb-terracotta,#C4622D); opacity: 0.18;
	animation: e404-drift linear infinite alternate;
}
.e404-float--1 { width: 11px; height: 11px; top: 18%; left: 12%; animation-duration: 3.4s; }
.e404-float--2 { width:  8px; height:  8px; top: 38%; right: 18%; animation-duration: 4.6s; animation-delay: .9s; }
.e404-float--3 { width: 14px; height: 14px; top: 12%; right: 32%; animation-duration: 5.8s; animation-delay: 1.7s; }
@keyframes e404-drift {
	from { transform: translateY(0)    scale(1);   }
	to   { transform: translateY(-14px) scale(1.08); }
}

/* Body content */
.e404-body { text-align: center; padding-block: var(--space-5) var(--space-7); }

/* Ghost numeral */
.e404-numeral {
	font-family: var(--font-display); font-weight: 700; line-height: 1;
	letter-spacing: -0.04em; pointer-events: none; user-select: none;
	font-size: clamp(5.5rem, 20vw, 10rem);
	color: var(--wb-terracotta,#C4622D); opacity: 0.13;
	margin-bottom: -0.18em;
}

/* Message */
.e404-bengali {
	font-family: "Noto Sans Bengali", var(--font-display);
	font-size: var(--text-lg); font-weight: 600;
	color: var(--wb-terracotta,#C4622D);
	letter-spacing: 0.02em; margin: 0 0 0.2em;
}
.e404-title { font-size: var(--text-2xl); margin: 0 0 0.5em; }
.e404-lead {
	color: var(--color-on-surface-variant); max-width: 44ch;
	margin-inline: auto; margin-bottom: var(--space-4);
}

/* Search */
.e404-search { max-width: 540px; margin-inline: auto; margin-bottom: var(--space-5); }

/* Suggestions two-column */
.e404-suggestions {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: var(--space-5); text-align: left;
	max-width: 800px; margin-inline: auto;
	margin-bottom: var(--space-5);
}
.e404-col-heading {
	font-size: var(--text-xs); text-transform: uppercase;
	letter-spacing: var(--tracking-wide); color: var(--color-on-surface-faint);
	margin: 0 0 var(--space-2); padding-bottom: var(--space-1);
	border-bottom: var(--border-hair);
}
.e404-recent { list-style: none; padding: 0; margin: 0; }
.e404-recent-item { padding: 0.45em 0; border-bottom: var(--border-hair); font-size: var(--text-sm); }
.e404-recent-item a { text-decoration: none; color: var(--color-on-surface-variant); transition: color var(--dur-fast); }
.e404-recent-item a:hover { color: var(--color-on-surface); }
.e404-topics ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4em; }
.e404-topics li a {
	display: inline-block; padding: 0.3em 0.8em;
	border: var(--border-hair); border-radius: var(--shape-pill);
	text-decoration: none; font-size: var(--text-sm);
	color: var(--color-on-surface-variant);
	transition: all var(--dur-fast) var(--ease-standard);
}
.e404-topics li a:hover { background: var(--color-on-surface); color: var(--color-surface); border-color: var(--color-on-surface); }

/* Home link */
.e404-home-link {
	display: inline-flex; align-items: center; gap: 0.35em;
	font-size: var(--text-sm); font-weight: 600; text-decoration: none;
	color: var(--color-on-surface-variant);
	padding: 0.65em 1.3em; border: var(--border-hair); border-radius: var(--shape-pill);
	transition: all var(--dur-fast) var(--ease-standard);
}
.e404-home-link:hover { background: var(--color-on-surface); color: var(--color-surface); border-color: var(--color-on-surface); }

/* Dark mode: tone down wave opacity */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .wb-wave--1 { opacity: 0.07; }
	:root:not([data-theme="light"]) .wb-wave--2 { opacity: 0.05; }
	:root:not([data-theme="light"]) .wb-wave--3 { opacity: 0.04; }
}
[data-theme="dark"] .wb-wave--1 { opacity: 0.07; }
[data-theme="dark"] .wb-wave--2 { opacity: 0.05; }
[data-theme="dark"] .wb-wave--3 { opacity: 0.04; }

/* 404 responsive */
@media (max-width: 600px) {
	.e404-suggestions { grid-template-columns: 1fr; }
	.e404-numeral { font-size: clamp(4rem,22vw,6rem); }
}

/* ============ 13. RESPONSIVE ============ */

/* Tablet: collapse desktop nav into the hamburger, drop sidebars to one column. */
@media (max-width: 900px) {
	.layout-with-sidebar { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
	.home-hero { grid-template-columns: 1fr; }

	.menu-toggle { display: inline-flex; }
	/* The inline desktop menu becomes a slide-down panel anchored to header height. */
	.main-navigation {
		position: fixed; inset: var(--header-h) 0 auto 0;
		margin: 0; z-index: 99;
		background: var(--color-surface);
		border-bottom: var(--border-hair);
		box-shadow: var(--shadow-lg);
		max-height: calc(100dvh - var(--header-h));
		overflow-y: auto;
		transform: translateY(-115%);
		visibility: hidden;
		transition: transform var(--dur-med) var(--ease-emphasized), visibility var(--dur-med);
	}
	.main-navigation.is-open { transform: translateY(0); visibility: visible; }
	body.menu-open { overflow: hidden; }
	.primary-menu-list { flex-direction: column; gap: 0; padding: var(--space-2); }
	.primary-menu-list > li { border-bottom: var(--border-hair); }
	.primary-menu-list > li:last-child { border-bottom: 0; }
	.primary-menu-list a { padding: 0.9em var(--space-3); border-radius: var(--shape-md); font-size: var(--text-base); }
	.primary-menu-list .sub-menu { position: static; display: block; box-shadow: none; border: 0; padding-left: var(--space-3); min-width: 0; background: transparent; }
}

/* Phone: tighten the bar, hide the tagline, keep a single clean row. */
@media (max-width: 560px) {
	:root { --header-h: 56px; }
	.site-description { display: none; }
	.site-title { font-size: var(--text-base); }
	.custom-logo { max-height: 30px; }
	.header-inner { gap: var(--space-2); }
	.search-toggle, .scheme-toggle, .menu-toggle { width: 40px; height: 40px; }
	.header-actions { gap: 0; }

	.single-header .entry-title { font-size: var(--text-xl); }
	.post-nav { grid-template-columns: 1fr; }
	.entry-footer { flex-direction: column; }
	.search-result { flex-direction: column; }
	.result-thumb img { width: 100%; height: auto; aspect-ratio: 16/9; }
	.footer-bottom { flex-direction: column; align-items: flex-start; }
	.concept-credit { margin-left: 0; }
	.post-card--secondary { flex-direction: column; }
	.post-card--secondary .card-media { flex-basis: auto; }
	.post-card--secondary .card-media img { aspect-ratio: 3/2; }
}

/* ============ 14. ADS (AdSense) ============ */
.mrittika-ad { margin: var(--space-5) auto; max-width: var(--content-width); text-align: center; }
.mrittika-ad .ad-label { display: block; font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-on-surface-faint); margin-bottom: var(--space-2); }
.mrittika-ad .ad-inner { min-height: 1px; overflow: hidden; }
.mrittika-ad--leadeboard, .mrittika-ad--leaderboard { max-width: var(--wide-width); padding-block: var(--space-3); }
.mrittika-ad--sidebar { margin: 0 0 var(--space-5); max-width: 100%; }
.mrittika-ad--in-content, .mrittika-ad--after-post { padding: var(--space-3) 0; border-block: var(--border-hair); }

/* ============ 15. TABLE OF CONTENTS ============ */
.toc { max-width: var(--content-width); margin: 0 auto var(--space-5); background: var(--color-surface-container); border: var(--border-hair); border-radius: var(--shape-lg); overflow: hidden; }
.toc-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: transparent; border: 0; cursor: pointer; font-family: var(--font-display); font-weight: 600; color: var(--color-on-surface); }
.toc-toggle svg { transition: transform var(--dur-med) var(--ease-emphasized); }
.toc[data-collapsed="true"] .toc-toggle svg { transform: rotate(-90deg); }
.toc-list { list-style: none; margin: 0; padding: 0 var(--space-4) var(--space-3); counter-reset: toc; transition: max-height var(--dur-med) var(--ease-emphasized); }
.toc[data-collapsed="true"] .toc-list { display: none; }
.toc-item { padding: 0.25em 0; }
.toc-item a { text-decoration: none; color: var(--color-on-surface-variant); font-size: var(--text-sm); border-left: 2px solid transparent; padding-left: 0.6em; transition: color var(--dur-fast), border-color var(--dur-fast); }
.toc-item a:hover, .toc-item.is-active a { color: var(--color-on-surface); border-left-color: var(--color-on-surface); }
.toc-level-3 { padding-left: var(--space-3); }

/* ============ 16. BACK TO TOP (M3 FAB) ============ */
.back-to-top { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 90; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-surface-inverse); color: var(--color-on-inverse); border: 0; border-radius: var(--shape-lg); box-shadow: var(--shadow-lg); cursor: pointer; opacity: 0; transform: translateY(16px) scale(0.9); pointer-events: none; transition: opacity var(--dur-med) var(--ease-emphasized), transform var(--dur-med) var(--ease-spring); }
.back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.back-to-top:hover { transform: translateY(-2px); }

/* Copy-link feedback */
.copy-link { background: transparent; cursor: pointer; }
.copy-link.copied { background: var(--color-on-surface); color: var(--color-surface); }

/* ============ 17. FAQ ACCORDION ============ */

.post-faq {
	max-width: var(--content-width);
	margin: var(--space-6) auto 0;
	padding-top: var(--space-4);
	border-top: var(--border-strong);
}
.post-faq-heading {
	font-size: var(--text-sm); text-transform: uppercase;
	letter-spacing: var(--tracking-wide); color: var(--color-on-surface-faint);
	margin-bottom: var(--space-4);
}
.faq-list { display: flex; flex-direction: column; gap: var(--space-2); }
.faq-item {
	border: var(--border-hair); border-radius: var(--shape-lg); overflow: hidden;
	transition: border-color var(--dur-fast) var(--ease-standard),
	            box-shadow var(--dur-med) var(--ease-emphasized);
}
.faq-item:has(.faq-question[aria-expanded="true"]) {
	border-color: var(--color-on-surface); box-shadow: var(--shadow-md);
}
.faq-question {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--space-3); width: 100%; padding: var(--space-3) var(--space-4);
	background: transparent; border: 0; cursor: pointer; text-align: left;
	font-family: var(--font-display); font-weight: 600; font-size: var(--text-base);
	color: var(--color-on-surface);
	transition: background var(--dur-fast) var(--ease-standard);
}
.faq-question:hover { background: var(--color-surface-container); }
.faq-question[aria-expanded="true"] { background: var(--color-surface-container); }
.faq-chevron {
	flex-shrink: 0; color: var(--color-on-surface-variant);
	transition: transform var(--dur-med) var(--ease-emphasized);
}
.faq-question[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-answer { overflow: hidden; }
.faq-answer[hidden] { display: none; }
.faq-answer-body {
	padding: 0 var(--space-4) var(--space-4);
	font-size: var(--text-base); color: var(--color-on-surface-variant);
	line-height: var(--leading-normal);
	animation: faq-appear var(--dur-med) var(--ease-emphasized-decel);
}
.faq-answer-body p:last-child { margin-bottom: 0; }
@keyframes faq-appear {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* AI citation strip */
.faq-citation {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em;
	margin: 0 var(--space-4) var(--space-3);
	padding: var(--space-2) var(--space-3);
	background: var(--color-surface-container); border-radius: var(--shape-md);
	font-size: var(--text-xs); color: var(--color-on-surface-faint);
}
.faq-citation-badge {
	display: inline-flex; align-items: center; gap: 0.3em;
	padding: 0.2em 0.6em; background: var(--color-surface-container-high);
	border-radius: var(--shape-pill); font-weight: 700;
	letter-spacing: var(--tracking-wide); text-transform: uppercase; font-size: 10px;
	color: var(--color-on-surface-variant);
}
.faq-citation-model { font-weight: 600; color: var(--color-on-surface-variant); }
.faq-citation-sep { color: var(--color-outline-strong); }
.faq-citation-source {
	text-decoration: underline; text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

/* ============ 17. CARD STYLE VARIANTS (settings) ============ */
.card-style-soft .card-media { box-shadow: var(--shadow-sm); }
.card-style-soft .post-card:hover .card-media { box-shadow: var(--shadow-md); }
.card-style-outline .card-media { border: var(--border-hair); }
.card-style-outline .card-media, .card-style-flat .card-media { box-shadow: none; }
.card-style-flat .card-media { border-radius: var(--shape-sm); }

/* ============ 18. M3 BLOCK STYLE VARIATIONS ============ */
.wp-block-group.is-style-m3-card { background: var(--color-surface-container); border-radius: var(--shape-xl); padding: var(--space-4); box-shadow: var(--shadow-md); }
.wp-block-group.is-style-m3-outline { border: var(--border-strong); border-radius: var(--shape-xl); padding: var(--space-4); }
.wp-block-image.is-style-m3-rounded img { border-radius: var(--shape-2xl); }
.wp-block-button.is-style-m3-tonal .wp-block-button__link { background: var(--color-surface-container-high); color: var(--color-on-surface); }
.wp-block-button.is-style-m3-text .wp-block-button__link { background: transparent; color: var(--color-on-surface); padding-inline: 0.5em; text-decoration: underline; }
.wp-block-quote.is-style-m3-pull { border: 0; text-align: center; font-size: var(--text-xl); max-width: 100%; }
.wp-block-separator.is-style-m3-dotted { border: 0; border-top: 2px dotted var(--color-outline-strong); background: none; }
.wp-block-list.is-style-m3-checklist { list-style: none; padding-left: 0; }
.wp-block-list.is-style-m3-checklist li { position: relative; padding-left: 1.8em; margin-bottom: 0.5em; }
.wp-block-list.is-style-m3-checklist li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 1.1em; height: 1.1em; border: 2px solid var(--color-on-surface); border-radius: var(--shape-xs); background: linear-gradient(135deg, transparent 45%, var(--color-on-surface) 45%, var(--color-on-surface) 55%, transparent 55%); }

/* ============ 19. CONCEPT CREDIT ============ */
.concept-credit { margin-left: auto; align-self: center; font-size: var(--text-xs); color: var(--color-on-surface-faint); text-decoration: none; letter-spacing: 0.02em; border: var(--border-hair); padding: 0.35em 0.9em; border-radius: var(--shape-pill); transition: all var(--dur-fast) var(--ease-standard); white-space: nowrap; }
.concept-credit:hover { background: var(--color-on-surface); color: var(--color-surface); border-color: var(--color-on-surface); }

/* View Transitions (progressive enhancement) */
@view-transition { navigation: auto; }

/* Print */
@media print {
	.site-header, .site-footer, .post-nav, .related-posts, .comments-area, .entry-share, .header-actions, .breadcrumbs, .mrittika-ad, .back-to-top, .toc, .reading-progress, .concept-credit { display: none; }
	body { color: #000; background: #fff; }
}