/**
 * Discovery Agrotech — the design layer.
 *
 * One file, no imports, no external requests. Source of truth is the brand's
 * design system (v1.0, Aug 2026): soil-first palette, the matra rule device,
 * Anek Bangla + Noto Serif Bengali, no shadows, square corners, minimal
 * motion. Judged at 320px on mobile data first.
 */

/* ------------------------------------------------------------------ *
 *  Fonts — self-hosted, 4 files total (the brand's hard limit).
 *  Variable weight axes; Bengali and Latin split on unicode-range so a
 *  Bangla-only page never downloads Latin glyphs it doesn't paint.
 * ------------------------------------------------------------------ */

@font-face {
	font-family: 'Anek Bangla';
	font-style: normal;
	font-weight: 100 800;
	font-stretch: 100%;
	font-display: swap;
	src: url('../fonts/anek-bangla-bengali-var.woff2') format('woff2');
	unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}
@font-face {
	font-family: 'Anek Bangla';
	font-style: normal;
	font-weight: 100 800;
	font-stretch: 100%;
	font-display: swap;
	src: url('../fonts/anek-bangla-latin-var.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Noto Serif Bengali';
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 100%;
	font-display: swap;
	src: url('../fonts/noto-serif-bengali-bengali-var.woff2') format('woff2');
	unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}
@font-face {
	font-family: 'Noto Serif Bengali';
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 100%;
	font-display: swap;
	src: url('../fonts/noto-serif-bengali-latin-var.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ *
 *  Tokens
 * ------------------------------------------------------------------ */

:root {
	/* Core palette */
	--mati:       #7A3B26; /* মাটি — soil. Primary brand. Headings, rules, logo. */
	--chara:      #2F6427; /* চারা — seedling. Action only: buttons, links, active. */
	--chara-dark: #245019; /* hover state of চারা */
	--holud:      #E0A526; /* হলুদ — turmeric. Surface/border accent. NEVER text on light. */
	--tush:       #F1F3EA; /* তুষ — husk. Page background. */
	--kali:       #1C1A17; /* কালি — ink. Body text. */
	--chhai:      #6E6A60; /* ছাই — ash. Secondary text, captions, metadata. */

	/* Supporting */
	--surface:    #FFFFFF;
	--line:       #DCDDD1;
	--mati-tint:  #F0E3DD;
	--chara-tint: #E4EDE1;
	--holud-tint: #FAF0D8;
	--bipod:      #A32A1C; /* বিপদ — danger. Safety alerts only. */

	/* Typefaces */
	--font-display: 'Anek Bangla', system-ui, sans-serif;
	--font-body:    'Noto Serif Bengali', Georgia, serif;
	--font-ui:      'Anek Bangla', system-ui, sans-serif;

	/* Type scale (desktop) */
	--t-display: 40px;
	--t-h1:      32px;
	--t-h2:      26px;
	--t-h3:      21px;
	--t-body-lg: 20px;
	--t-body:    18px;
	--t-ui:      16px;
	--t-caption: 15px;
	--t-micro:   13px;
	--t-data:    16px;

	--lh-display: 1.15;
	--lh-h1:      1.25;
	--lh-h2:      1.3;
	--lh-h3:      1.4;
	--lh-body-lg: 1.75;
	--lh-body:    1.8;
	--lh-ui:      1.5;
	--lh-caption: 1.6;
	--lh-micro:   1.5;
	--lh-data:    1.5;

	/* Spacing — 4px base */
	--s-1: 4px;  --s-2: 8px;   --s-3: 12px; --s-4: 16px; --s-5: 24px;
	--s-6: 32px; --s-7: 48px;  --s-8: 64px; --s-9: 96px;

	/* Structure */
	--matra:     3px;   /* the signature rule device */
	--radius:    2px;   /* controls only; cards stay square */
	--measure:   680px;
	--max-width: 1200px;
	--gutter:    32px;

	--transition: 150ms ease-out;

	/* Prevent browser dark-mode auto-inversion of the palette */
	color-scheme: light;
}

@media (max-width: 768px) {
	:root {
		--matra: 2px;
		--t-display: 30px;
		--t-h1: 26px;
		--t-h2: 22px;
		--gutter: 16px;
	}
}

/* ------------------------------------------------------------------ *
 *  Base — Bangla typesetting guards (non-negotiable)
 * ------------------------------------------------------------------ */

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

/* A display value in a component rule outranks the UA's [hidden] rule, so
   panes that hide themselves — calculator modes, season rows, symptom
   groups — need this to stay hidden. */
[hidden] { display: none !important; }

body {
	background: var(--tush);
	color: var(--kali);
	font-family: var(--font-body);
	font-size: var(--t-body);
	line-height: var(--lh-body);
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

/* Tracking breaks conjuncts; justified Bangla makes rivers; there is no
   Bangla hyphenation standard. Left-align everywhere. */
:lang(bn), body {
	letter-spacing: 0;
	text-align: left;
	hyphens: none;
	word-break: break-word;
}
body p, body li, body td, body th { text-align: left; }

.tabular { font-variant-numeric: tabular-nums; }

/* Bangla prose may break inside a long word; a number never may. Without
   this, break-word splits 60.606 across two lines in a narrow table cell
   and the figure reads as two different numbers. */
.da-num, .tabular, .da-result__value { white-space: nowrap; word-break: normal; }
.da-table th, .da-table td,
.da-content th, .da-content td { word-break: normal; }

body a {
	color: var(--chara);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 2px;
	transition: color var(--transition);
}
body a:hover { color: var(--chara-dark); }

/* Focus — holud fails 2:1 on tush; kali carries contrast on light. On dark
   surfaces holud passes at 3.9:1. */
:focus-visible { outline: 3px solid var(--kali); outline-offset: 2px; }
.on-dark :focus-visible, .on-dark:focus-visible { outline: 3px solid var(--holud); outline-offset: 2px; }

button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { cursor: pointer; min-height: 44px; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--kali);
	letter-spacing: 0;
	text-align: left;
	margin: 0 0 var(--s-4);
}
h1 { font-size: var(--t-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--t-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--t-h3); line-height: var(--lh-h3); }

img { max-width: 100%; height: auto; }

/*
 * Both spellings. `.da-screen-reader-text` is the theme's own, but WordPress
 * core emits the unprefixed `.screen-reader-text` from markup the theme does
 * not author — the heading in the_posts_pagination(), comment form fields —
 * and the parent stylesheet that used to define it is dequeued in setup.php.
 * Without this, that text renders at full size in the middle of the page.
 */
.da-screen-reader-text,
.screen-reader-text {
	border: 0; clip-path: inset(50%); height: 1px; width: 1px;
	margin: -1px; overflow: hidden; padding: 0; position: absolute;
	white-space: nowrap;
}
.skip-link:focus {
	clip-path: none; height: auto; width: auto;
	position: fixed; top: var(--s-2); left: var(--s-2); z-index: 100;
	background: var(--surface); color: var(--kali);
	padding: var(--s-3) var(--s-4);
	font-family: var(--font-ui);
}

/* The animated underline the design uses for quiet links */
.da-underline-link {
	text-decoration: none;
	padding-bottom: 4px;
	background-image: linear-gradient(var(--holud), var(--holud));
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0% 2px;
	transition: background-size var(--transition), color var(--transition);
}
.da-underline-link:hover { background-size: 100% 2px; }

/* ------------------------------------------------------------------ *
 *  Badge
 * ------------------------------------------------------------------ */

.da-badge {
	display: inline-block;
	font-family: var(--font-ui);
	font-size: var(--t-micro);
	font-weight: 600;
	line-height: var(--lh-micro);
	padding: 2px 8px;
	border-radius: var(--radius);
	text-decoration: none;
	white-space: nowrap;
}
.da-badge--mati    { background: var(--mati-tint); color: var(--mati); }
.da-badge--chara   { background: var(--chara-tint); color: var(--chara); }
.da-badge--holud   { background: var(--holud-tint); color: var(--kali); }
.da-badge--bipod   { background: #FDE8E6; color: var(--bipod); }
.da-badge--neutral { background: transparent; color: var(--chhai); border: 1px solid var(--line); }
a.da-badge:hover   { color: var(--mati); }

/* ------------------------------------------------------------------ *
 *  Section heading — matra rule above, heading hangs beneath
 * ------------------------------------------------------------------ */

.da-section-heading__rule { height: var(--matra); background: var(--mati); margin-bottom: var(--s-4); }
.da-section-heading__title { margin: 0; }
.da-section-heading__desc {
	font-family: var(--font-ui);
	font-size: var(--t-caption);
	line-height: var(--lh-caption);
	color: var(--chhai);
	margin-top: var(--s-2);
	max-width: var(--measure);
}

/* Source citation — 12px matra dash, then the text */
.da-source {
	display: flex;
	gap: var(--s-2);
	align-items: flex-start;
	margin-top: var(--s-2);
	font-family: var(--font-ui);
	font-size: var(--t-caption);
	line-height: var(--lh-caption);
	color: var(--chhai);
}
.da-source__dash { width: 12px; height: 2px; background: var(--chhai); margin-top: 10px; flex-shrink: 0; }

/* ------------------------------------------------------------------ *
 *  Header
 * ------------------------------------------------------------------ */

.da-header {
	background: var(--mati);
	position: sticky;
	top: 0;
	z-index: 30;
}
.da-header__bar {
	max-width: 1120px;
	margin: 0 auto;
	padding: var(--s-3) var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	min-height: 64px;
}
/*
 * The lockup is identity, not a control: it must not restate itself on
 * hover. The global link hover would otherwise pull currentColor — and
 * with it the inline mark — toward চারা green.
 */
.da-header__brand,
body .da-header__brand:hover,
body .da-header__brand:focus {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	min-height: 44px;
	color: var(--tush);
	text-decoration: none;
}
/* The brand mark — one uploaded logo, three placements. The inline
   fallback inherits currentColor; an uploaded file keeps its own colours
   and is height-constrained per placement, width following. */
.da-mark { display: block; flex-shrink: 0; }
.da-mark--img { width: auto; max-width: 220px; object-fit: contain; }
.da-mark-slot { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 0; }
/* Opt-in via the da_reverse_logo_on_dark filter: flattens a one-colour
   logo to husk on the soil-brown header and legal bar. */
.da-mark-slot--reverse .da-mark--img { filter: brightness(0) invert(1); }

.da-header__brand .da-mark { display: block; flex-shrink: 0; }
.da-header__wordmark {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	color: var(--tush);
	white-space: nowrap;
}

.da-header__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	background: transparent;
	border: 1px solid rgba(241, 243, 234, 0.4);
	border-radius: var(--radius);
	color: var(--tush);
	font-family: var(--font-ui);
	font-size: var(--t-ui);
	font-weight: 600;
	padding: 0 var(--s-4);
	min-height: 44px;
}
.da-header__toggle-bars,
.da-header__toggle-bars::before,
.da-header__toggle-bars::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	position: relative;
	content: '';
}
.da-header__toggle-bars::before { position: absolute; top: -6px; }
.da-header__toggle-bars::after  { position: absolute; top: 6px; }

.da-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.da-nav__link {
	font-family: var(--font-ui);
	font-size: var(--t-ui);
	color: var(--tush);
	text-decoration: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding-bottom: 4px;
	background-image: linear-gradient(var(--holud), var(--holud));
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0% 2px;
	transition: background-size var(--transition), color var(--transition);
}
.da-nav__link:hover { color: var(--holud); background-size: 100% 2px; }
.da-nav__cta {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--t-ui);
	color: var(--tush);
	background: var(--chara);
	text-decoration: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	border-radius: var(--radius);
	transition: background-color var(--transition);
}
.da-nav__cta:hover { background: var(--chara-dark); color: var(--tush); }

/* Phone: the whole menu is a disclosure, and so is each panel inside it.
   A hover menu has nothing to hover with, so every level opens on tap. */
.da-nav { display: none; width: 100%; }
.da-nav.is-open { display: block; padding-bottom: var(--s-4); }
.da-header__bar { flex-wrap: wrap; }

.da-nav__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.da-nav__expand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-height: 44px;
	padding: 0;
	background: transparent;
	border: none;
	color: var(--tush);
	transition: transform var(--transition);
}
.da-nav__item.is-open > .da-nav__row .da-nav__expand { transform: rotate(180deg); }

.da-panel { display: none; }
.da-nav__item.is-open > .da-panel { display: block; }
.da-panel__inner { padding: var(--s-2) 0 var(--s-2) var(--s-4); }
.da-panel__lead { display: none; }
.da-panel__rule { height: 2px; background: rgba(241, 243, 234, 0.25); margin: var(--s-2) 0; }
.da-panel__group-title {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--t-micro);
	color: rgba(241, 243, 234, 0.7);
	margin-bottom: var(--s-2);
}
.da-panel__links {
	list-style: none;
	margin: 0 0 var(--s-2);
	padding: 0;
	display: grid;
	gap: var(--s-2);
}
.da-panel__links a {
	font-family: var(--font-ui);
	font-size: var(--t-caption);
	color: var(--tush);
	text-decoration: none;
}
.da-panel__links a:hover { color: var(--holud); }

/* Desktop: inline nav, hover/focus mega-panel on a white surface */
@media (min-width: 900px) {
	.da-header__toggle, .da-nav__expand { display: none; }
	.da-nav { display: block !important; width: auto; }
	.da-nav.is-open { padding-bottom: 0; }
	.da-nav__list { flex-direction: row; flex-wrap: wrap; gap: 28px; align-items: center; }

	.da-nav__item--has-panel .da-panel {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--surface);
		border-top: var(--matra) solid var(--holud);
		border-bottom: 1px solid var(--line);
	}
	/*
	 * The panel hangs from the header's bottom edge, but the nav item's
	 * own box ends higher up, inside the bar's padding. That gap would
	 * drop :hover the instant the pointer set off toward the panel. This
	 * bridges it — and because the bridge belongs to the panel, which is
	 * a descendant of the item, crossing it keeps the item hovered.
	 */
	.da-nav__item--has-panel .da-panel::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: var(--s-5);
	}
	.da-nav__item--has-panel:hover .da-panel,
	.da-nav__item--has-panel:focus-within .da-panel,
	.da-nav__item--has-panel.is-open .da-panel { display: block; }
	.da-nav__item--has-panel:hover > .da-nav__row .da-nav__link,
	.da-nav__item--has-panel:focus-within > .da-nav__row .da-nav__link,
	.da-nav__item--has-panel.is-open > .da-nav__row .da-nav__link { color: var(--holud); background-size: 100% 2px; }

	.da-panel__inner {
		max-width: 1120px;
		margin: 0 auto;
		padding: var(--s-6) var(--gutter);
		display: grid;
		grid-template-columns: minmax(200px, 1fr) minmax(200px, 2fr);
		gap: 40px;
	}
	.da-panel__lead { display: flex; flex-direction: column; gap: var(--s-2); }
	.da-panel__title {
		font-family: var(--font-display);
		font-weight: 700;
		font-size: var(--t-h3);
		line-height: var(--lh-h3);
		color: var(--mati);
	}
	.da-panel__blurb {
		font-family: var(--font-body);
		font-size: var(--t-caption);
		line-height: var(--lh-caption);
		color: var(--kali);
		margin: 0;
		max-width: 280px;
		text-wrap: pretty;
	}
	.da-panel__cta {
		font-family: var(--font-ui);
		font-size: var(--t-caption);
		align-self: start;
		margin-top: var(--s-2);
	}
	.da-panel__groups {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
		gap: var(--s-5) var(--s-6);
	}
	.da-panel__rule { height: 2px; background: var(--line); margin: 0 0 var(--s-3); }
	.da-panel__group-title { color: var(--chhai); margin-bottom: var(--s-3); }
	.da-panel__links { gap: 10px; }
	.da-panel__links a {
		color: var(--kali);
		align-self: start;
		padding-bottom: 4px;
		background-image: linear-gradient(var(--holud), var(--holud));
		background-repeat: no-repeat;
		background-position: left bottom;
		background-size: 0% 2px;
		transition: background-size var(--transition), color var(--transition);
	}
	.da-panel__links a:hover { color: var(--chara); background-size: 100% 2px; }
}

/* ------------------------------------------------------------------ *
 *  Post layout — sticky TOC + article
 * ------------------------------------------------------------------ */

.da-post {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: var(--s-7) var(--gutter);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-7);
	align-items: flex-start;
}
.da-article { flex: 1 1 420px; min-width: 0; max-width: var(--measure); }
.da-post--page { justify-content: center; }

/*
 * The table of contents is a desktop affordance. On a phone it would sit
 * above the headline and push the answer below the fold, which is exactly
 * backwards for a reader standing next to the plant. It returns as the
 * sticky sidebar once there is a column to put it in.
 */
.da-toc { display: none; }
.da-toc:empty { display: none; }
.da-toc__rule { height: var(--matra); background: var(--mati); margin-bottom: var(--s-3); }
.da-toc__label {
	font-family: var(--font-ui);
	font-size: var(--t-micro);
	font-weight: 600;
	color: var(--chhai);
	margin-bottom: var(--s-3);
}
.da-toc__nav { display: flex; flex-direction: column; gap: 10px; }
.da-toc__link {
	display: flex;
	gap: var(--s-2);
	align-items: baseline;
	font-family: var(--font-ui);
	font-size: var(--t-caption);
	line-height: var(--lh-caption);
	text-decoration: none;
	color: var(--kali);
}
.da-toc__link:hover { color: var(--chara); }
.da-toc__tick {
	width: 12px;
	height: 2px;
	background: var(--mati);
	flex-shrink: 0;
	display: none;
	transform: translateY(-6px);
}
.da-toc__link.is-active .da-toc__tick { display: block; }

@media (min-width: 1024px) {
	.da-toc {
		display: block;
		position: sticky;
		top: 104px;
		flex: 0 1 220px;
	}
}

/* Breadcrumb */
.da-crumbs {
	font-family: var(--font-ui);
	font-size: var(--t-micro);
	line-height: var(--lh-micro);
	color: var(--chhai);
	margin-bottom: var(--s-4);
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.da-crumbs a { color: var(--chhai); text-decoration: none; }
.da-crumbs a:hover { color: var(--chara); }

.da-article__badge { display: flex; margin-bottom: var(--s-4); }
.da-article__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--t-h1);
	line-height: var(--lh-h1);
	color: var(--mati);
	margin: 0 0 var(--s-4);
}
.da-article__lead {
	font-family: var(--font-body);
	font-size: var(--t-body-lg);
	line-height: var(--lh-body-lg);
	color: var(--kali);
	text-wrap: pretty;
	margin: 0 0 var(--s-5);
}

/* Dateline + share */
.da-dateline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4) var(--s-5);
	align-items: center;
	justify-content: space-between;
	padding: var(--s-3) 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	margin-bottom: var(--s-6);
}
.da-dateline__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	font-family: var(--font-ui);
	font-size: var(--t-caption);
	line-height: var(--lh-caption);
	color: var(--chhai);
}
.da-dateline__meta b { font-weight: 400; color: var(--kali); }
.da-share { display: flex; align-items: center; gap: var(--s-2); }
.da-share__label {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--t-micro);
	color: var(--chhai);
	margin-right: var(--s-1);
}
.da-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	width: 44px;
	height: 44px;
	color: var(--kali);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.da-share__btn:hover { background: var(--mati); color: var(--tush); border-color: var(--mati); }
.da-share__btn--copy {
	width: auto;
	padding: 0 14px;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--t-caption);
}

/* Hero figure */
.da-hero { margin: 0 0 var(--s-6); }
.da-hero__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--line); }
.da-hero__caption,
.da-content figcaption {
	padding-top: var(--s-2);
	font-family: var(--font-ui);
	font-size: var(--t-caption);
	line-height: var(--lh-caption);
	color: var(--chhai);
}

/* ------------------------------------------------------------------ *
 *  Article content — sections hang from matra rules
 * ------------------------------------------------------------------ */

.da-content { font-family: var(--font-body); }
.da-content > * { margin-top: 0; margin-bottom: var(--s-4); }

.da-content h2 {
	color: var(--kali);
	margin: var(--s-7) 0 var(--s-4);
	scroll-margin-top: 96px;
}
.da-content h2::before {
	content: '';
	display: block;
	height: var(--matra);
	background: var(--mati);
	margin-bottom: var(--s-4);
}
.da-content h2:first-child { margin-top: 0; }
.da-content h3 { margin: var(--s-5) 0 var(--s-3); }

.da-content ul, .da-content ol { padding-left: 1.4em; }
.da-content li { margin-bottom: var(--s-2); }
.da-content li::marker { color: var(--mati); }

/* Pull quote — holud rule, bold serif, mati ink. No italics: Bangla has none. */
.da-content blockquote {
	margin: var(--s-5) 0;
	padding: 0;
	border: none;
	font-style: normal;
}
.da-content blockquote::before {
	content: '';
	display: block;
	height: var(--matra);
	background: var(--holud);
	margin-bottom: var(--s-3);
}
.da-content blockquote p {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--t-body-lg);
	line-height: var(--lh-body-lg);
	color: var(--mati);
	margin: 0;
}
.da-content blockquote cite {
	font-family: var(--font-ui);
	font-size: var(--t-caption);
	color: var(--chhai);
	font-style: normal;
	display: block;
	margin-top: var(--s-2);
}

/* Tables — white surface hanging from a mati matra; horizontal scroll with
   gradient edge hints on narrow screens; Western tabular numerals. */
.da-content .wp-block-table,
.da-content figure.wp-block-table { margin: var(--s-5) 0 var(--s-2); }
.da-content .wp-block-table {
	border-top: var(--matra) solid var(--mati);
	background:
		linear-gradient(to right, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0)) left center / 16px 100% no-repeat local,
		linear-gradient(to left, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0)) right center / 16px 100% no-repeat local,
		var(--surface);
	overflow-x: auto;
	overscroll-behavior-x: contain;
}
.da-content table {
	width: 100%;
	min-width: 460px;
	border-collapse: collapse;
	font-family: var(--font-ui);
	font-size: var(--t-data);
	line-height: var(--lh-data);
	font-variant-numeric: tabular-nums;
	border: none;
	margin: 0;
}
.da-content th, .da-content td {
	text-align: left;
	padding: 10px var(--s-4);
	border: none;
	border-bottom: 1px solid var(--line);
	color: var(--kali);
}
.da-content thead th {
	background: var(--tush);
	color: var(--chhai);
	font-weight: 600;
	padding: var(--s-2) var(--s-4);
}
.da-content tbody tr:last-child td, .da-content tbody tr:last-child th { border-bottom: none; }
.da-content table caption {
	text-align: left;
	caption-side: top;
	padding: var(--s-3) var(--s-4);
	font-family: var(--font-ui);
	font-size: var(--t-caption);
	line-height: var(--lh-caption);
	color: var(--chhai);
}

/* Callouts — tint surface hanging from a coloured matra. No box, no shadow. */
.is-style-da-callout-tip,
.is-style-da-callout-warning,
.is-style-da-callout-danger,
.is-style-da-safety {
	padding: var(--s-4) var(--s-5);
	margin: var(--s-5) 0;
}
.is-style-da-callout-tip     { background: var(--chara-tint); border-top: var(--matra) solid var(--chara); }
.is-style-da-callout-warning { background: var(--holud-tint); border-top: var(--matra) solid var(--holud); }
.is-style-da-callout-danger  { background: var(--mati-tint);  border-top: var(--matra) solid var(--bipod); }

.is-style-da-callout-tip h4, .is-style-da-callout-warning h4, .is-style-da-callout-danger h4,
.is-style-da-callout-tip h3, .is-style-da-callout-warning h3, .is-style-da-callout-danger h3 {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--t-ui);
	line-height: var(--lh-ui);
	color: var(--kali);
	margin: 0 0 var(--s-2);
}
.is-style-da-callout-tip h4::before, .is-style-da-callout-warning h4::before, .is-style-da-callout-danger h4::before,
.is-style-da-callout-tip h3::before, .is-style-da-callout-warning h3::before, .is-style-da-callout-danger h3::before { content: none; }
.is-style-da-callout-tip p:last-child,
.is-style-da-callout-warning p:last-child,
.is-style-da-callout-danger p:last-child { margin-bottom: 0; }

/* Safety block — mandatory on every pesticide page. Warning surface;
   dose figures stay in Western tabular numerals. */
.is-style-da-safety {
	background: var(--holud-tint);
	border-top: var(--matra) solid var(--holud);
	font-variant-numeric: tabular-nums;
}
.is-style-da-safety .da-safety__label {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--t-micro);
	color: var(--chhai);
	margin: 0 0 var(--s-3);
}
.is-style-da-safety p { margin: 0 0 var(--s-2); }
.is-style-da-safety p strong { font-family: var(--font-ui); font-weight: 600; }
.is-style-da-safety .is-style-da-source {
	border-top: 1px solid var(--line);
	padding-top: var(--s-2);
	margin-top: var(--s-3);
}

/* Source paragraph style — the matra-dash prefix */
.da-content .is-style-da-source {
	display: flex;
	gap: var(--s-2);
	align-items: flex-start;
	font-family: var(--font-ui);
	font-size: var(--t-caption);
	line-height: var(--lh-caption);
	color: var(--chhai);
	margin: var(--s-2) 0;
}
.da-content .is-style-da-source::before {
	content: '';
	width: 12px;
	height: 2px;
	background: var(--chhai);
	margin-top: 10px;
	flex-shrink: 0;
}

/* Sources section + corrections invitation */
.da-sources { margin-top: var(--s-7); }
.da-sources__title { margin: 0 0 var(--s-3); }
.da-sources__title::before {
	content: '';
	display: block;
	height: var(--matra);
	background: var(--mati);
	margin-bottom: var(--s-4);
}
.da-sources__list { display: flex; flex-direction: column; gap: var(--s-1); }

.da-corrections {
	margin-top: var(--s-5);
	padding-top: 20px;
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-4);
	align-items: baseline;
	font-family: var(--font-ui);
	font-size: var(--t-caption);
	line-height: var(--lh-caption);
	color: var(--kali);
}
.da-corrections__note { color: var(--chhai); }

/* Reviewer box — white surface hanging from a holud matra */
.da-reviewer { margin-top: var(--s-7); background: var(--surface); padding: 0 var(--s-5) var(--s-5); }
.da-reviewer__rule { height: var(--matra); background: var(--holud); margin: 0 calc(-1 * var(--s-5)) var(--s-5); }
.da-reviewer__body { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.da-reviewer__photo { width: 72px; height: 72px; flex-shrink: 0; background: var(--line); }
.da-reviewer__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.da-reviewer__text { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.da-reviewer__label { font-family: var(--font-ui); font-weight: 600; font-size: var(--t-micro); color: var(--chhai); }
.da-reviewer__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--t-h3);
	line-height: var(--lh-h3);
	color: var(--mati);
}
.da-reviewer__role { font-family: var(--font-ui); font-size: var(--t-caption); line-height: var(--lh-caption); color: var(--chhai); }
.da-reviewer__note { font-size: var(--t-body); line-height: var(--lh-body); margin: 6px 0 0; text-wrap: pretty; }

/* ------------------------------------------------------------------ *
 *  Cards, related, loop
 * ------------------------------------------------------------------ */

.da-related { border-top: 1px solid var(--line); padding: var(--s-8) 0; }
.da-related__inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); }

.da-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-auto-rows: 1fr;
	gap: 40px var(--s-6);
	margin-top: var(--s-6);
	align-items: stretch;
}
.da-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--surface);
	padding: 0 20px 20px;
	transition: transform var(--transition);
}
.da-card:hover { transform: translateY(-1px); }
.da-card__rule { height: var(--matra); background: var(--mati); margin: 0 -20px; }
.da-card__media { margin-top: 20px; }
.da-card__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--line); }
.da-card__badge { display: flex; margin-top: 20px; }
/* Titles and excerpts clamp to two lines and reserve both, so every card
   foot in a row sits on the same line whatever the headline length. */
.da-card__title {
	font-size: var(--t-h3);
	line-height: var(--lh-h3);
	margin: var(--s-3) 0 0;
	min-height: calc(2 * var(--lh-h3) * var(--t-h3));
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.da-card__title a { color: var(--kali); text-decoration: none; }
.da-card__excerpt {
	font-size: var(--t-body);
	line-height: var(--lh-body);
	margin: var(--s-2) 0 0;
	min-height: calc(2 * var(--lh-body) * var(--t-body));
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.da-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 20px;
}
.da-card__date { font-family: var(--font-ui); font-size: var(--t-caption); color: var(--chhai); }
.da-card__cta {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--t-caption);
	color: var(--chara);
	border: 1px solid var(--chara);
	border-radius: var(--radius);
	padding: var(--s-2) 14px;
	white-space: nowrap;
}
.da-card__overlay { position: absolute; inset: 0; }

/* Archive shell */
.da-loop { max-width: var(--max-width); margin: 0 auto; padding: var(--s-7) var(--gutter); }

.da-pagination { margin-top: var(--s-7); font-family: var(--font-ui); }
.da-pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.da-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--s-4);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--kali);
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.da-pagination a.page-numbers:hover { background: var(--mati); color: var(--tush); border-color: var(--mati); }
.da-pagination .page-numbers.current { background: var(--mati); color: var(--tush); border-color: var(--mati); }

/* Empty states + 404 — an invitation to act, not a shrug */
.da-empty, .da-404 p { max-width: var(--measure); }
.da-empty__lede { font-size: var(--t-body-lg); line-height: var(--lh-body-lg); }
.da-404__cats { margin-top: var(--s-6); }
/*
 * A column, not a wrapped row. These are full article headlines in Bangla, and
 * a row would break them mid-title at 320px — the reference width — leaving the
 * reader to work out where one link ends and the next begins. One per line, at
 * the tap target the rest of the theme uses.
 */
.da-404__list {
	list-style: none;
	margin: var(--s-3) 0 0;
	padding: 0;
	font-family: var(--font-ui);
	max-width: var(--measure);
}
.da-404__list li + li { border-top: 1px solid var(--line); }
/*
 * Headlines, so they take the headline colour and drop the underline the body
 * gives every link — five stacked underlines read as a wall of rules once the
 * separators are already doing that job. The underline returns on hover.
 */
.da-404__list a {
	display: block;
	padding: var(--s-3) 0;
	color: var(--mati);
	font-weight: 600;
	text-decoration: none;
}
.da-404__list a:hover {
	color: var(--chara-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 2px;
}
.da-404__all { margin-top: var(--s-6); }

/* The 404 leads with the search box, so it sits under the standfirst rather
   than a band's worth of air away from it. */
.da-404 .da-archive__body { padding-top: var(--s-5); }
.da-404 .search-form { margin-top: 0; }

/* Search form */
.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	max-width: var(--measure);
	margin-top: var(--s-4);
}
.search-form label { flex: 1 1 240px; }
.search-form .search-field {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	font-family: var(--font-body);
	font-size: var(--t-body);
	color: var(--kali);
	border: 2px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	transition: border-color var(--transition);
}
.search-form .search-field:focus { border-color: var(--chara); }
.search-form .search-submit {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--t-ui);
	background: var(--chara);
	color: #fff;
	border: none;
	border-radius: var(--radius);
	min-height: 48px;
	padding: 0 var(--s-5);
	transition: background-color var(--transition);
}
.search-form .search-submit:hover { background: var(--chara-dark); }

/* ------------------------------------------------------------------ *
 *  Footer
 * ------------------------------------------------------------------ */

.da-footer { background: rgba(122, 59, 38, 0.08); margin-top: var(--s-8); }
.da-footer__main { max-width: 1120px; margin: 0 auto; padding: var(--s-8) var(--gutter) 0; }
.da-footer__rule { height: var(--matra); background: var(--mati); margin-bottom: var(--s-6); }
.da-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-7) 40px;
	align-items: start;
	padding-bottom: var(--s-8);
}
@media (min-width: 744px) {
	.da-footer__grid { grid-template-columns: minmax(280px, 1.5fr) repeat(auto-fit, minmax(160px, 1fr)); }
}
.da-footer__brand { display: flex; flex-direction: column; gap: var(--s-4); }
.da-footer__lockup,
body .da-footer__lockup:hover,
body .da-footer__lockup:focus { display: flex; align-items: center; gap: var(--s-3); color: var(--mati); text-decoration: none; }
.da-footer__wordmark { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--mati); }
.da-footer__about {
	font-family: var(--font-body);
	font-size: var(--t-caption);
	line-height: var(--lh-caption);
	color: var(--kali);
	margin: 0;
	max-width: 380px;
	text-wrap: pretty;
}
.da-footer__contact { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s-2); font-family: var(--font-ui); font-size: var(--t-caption); }
.da-footer__contact .da-underline-link { color: var(--chara); align-self: flex-start; }

.da-footer__col-rule { height: 2px; background: var(--holud); width: 32px; margin-bottom: 14px; }
.da-footer__col-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--t-ui);
	color: var(--mati);
	margin-bottom: var(--s-4);
}
.da-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.da-footer__links .da-underline-link {
	font-family: var(--font-ui);
	font-size: var(--t-caption);
	line-height: var(--lh-caption);
	color: var(--kali);
	justify-self: start;
}
.da-footer__links .da-underline-link:hover { color: var(--chara); }

.da-footer__legal { background: var(--mati); padding: 28px 0; }
.da-footer__legal-inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: flex;
	gap: 20px 40px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
}
.da-footer__copy {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	font-family: var(--font-ui);
	font-size: var(--t-caption);
	color: var(--tush);
}
.da-footer__legal-nav { display: flex; gap: var(--s-3) var(--s-5); flex-wrap: wrap; align-items: center; }
.da-footer__legal-nav .da-underline-link { font-family: var(--font-ui); font-size: var(--t-caption); color: var(--tush); }
.da-footer__legal-nav .da-underline-link:hover { color: var(--holud); }

/* ------------------------------------------------------------------ *
 *  Back to top
 * ------------------------------------------------------------------ */

.da-top {
	position: fixed;
	right: var(--gutter);
	bottom: var(--gutter);
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 0;
	background: var(--surface);
	color: var(--mati);
	border: 1px solid var(--line);
	border-radius: 0;
	transition: background-color var(--transition), color var(--transition);
}
.da-top:hover { background: var(--chara); color: var(--tush); border-color: var(--chara); }
.da-top__rule { display: block; height: var(--matra); background: var(--holud); }
.da-top__body {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: var(--s-3) var(--s-4);
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--t-ui);
	line-height: 1;
}

/* ------------------------------------------------------------------ *
 *  Bands — the alternating full-width sections the home page is built from
 * ------------------------------------------------------------------ */

.da-band { padding: var(--s-9) 0; }
.da-band__inner { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.da-band--tush { background: var(--tush); }
.da-band--surface { background: var(--surface); }
.da-band--mati { background: var(--mati); }

.da-band__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-5) 40px;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--s-7);
}
.da-band__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--t-h1);
	line-height: var(--lh-h1);
	color: var(--mati);
	margin: 0 0 var(--s-4);
}
.da-band--mati .da-band__title { color: var(--tush); }
.da-band__lede {
	font-family: var(--font-body);
	font-size: var(--t-body-lg);
	line-height: var(--lh-body-lg);
	color: var(--kali);
	max-width: 620px;
	text-wrap: pretty;
	margin: 0;
}
.da-band--mati .da-band__lede,
.da-band--mati .da-band__coda { color: var(--tush); }
.da-band__coda {
	font-family: var(--font-body);
	font-size: var(--t-body-lg);
	line-height: var(--lh-body-lg);
	max-width: 680px;
	margin: 56px 0 0;
}

.da-eyebrow {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--t-caption);
	color: var(--chhai);
	margin-bottom: var(--s-4);
}
.da-rule { height: var(--matra); background: var(--mati); margin-bottom: var(--s-4); }
.da-rule-short { height: var(--matra); background: var(--mati); width: 64px; margin-bottom: var(--s-5); }
.da-rule-short--holud { background: var(--holud); }

/* ------------------------------------------------------------------ *
 *  Buttons
 * ------------------------------------------------------------------ */

.da-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--t-ui);
	line-height: var(--lh-ui);
	min-height: 48px;
	padding: 14px var(--s-5);
	border: none;
	border-radius: var(--radius);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.da-btn--lg { min-height: 56px; font-size: 18px; padding: var(--s-4) var(--s-6); }
.da-btn--primary { background: var(--chara); color: #fff; }
body .da-btn--primary:hover { background: var(--chara-dark); color: #fff; }
.da-btn--secondary { background: transparent; color: var(--mati); border: 2px solid var(--mati); }
body .da-btn--secondary:hover { background: var(--mati-tint); color: var(--mati); }

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

.da-home-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 56px;
	align-items: start;
}
@media (min-width: 900px) {
	.da-home-hero__grid { grid-template-columns: minmax(320px, 1.15fr) minmax(300px, 1fr); gap: 56px 64px; }
}
.da-home-hero__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--t-display);
	line-height: var(--lh-display);
	color: var(--mati);
	margin: 0 0 var(--s-5);
}
.da-home-hero__standfirst {
	font-family: var(--font-body);
	font-size: var(--t-body-lg);
	line-height: var(--lh-body-lg);
	color: var(--kali);
	text-wrap: pretty;
	margin: 0 0 var(--s-6);
	max-width: 620px;
}
.da-home-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-bottom: 40px; }

.da-stats {
	border-top: 1px solid var(--line);
	padding-top: var(--s-5);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--s-5) var(--s-6);
}
.da-stat { display: flex; flex-direction: column; gap: 6px; }
.da-stat__figure {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--t-h3);
	line-height: var(--lh-h3);
	color: var(--mati);
}
.da-stat__label { font-family: var(--font-ui); font-size: var(--t-caption); line-height: var(--lh-caption); color: var(--chhai); }

/* ------------------------------------------------------------------ *
 *  Calculator
 * ------------------------------------------------------------------ */

.da-calc { background: var(--surface); border-top: var(--matra) solid var(--chara); }
.da-calc__head { padding: var(--s-5); border-bottom: 1px solid var(--line); }
.da-calc__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--t-h3);
	line-height: var(--lh-h3);
	color: var(--kali);
}
.da-calc__desc { font-family: var(--font-ui); font-size: var(--t-caption); color: var(--chhai); margin-top: var(--s-1); }
.da-calc__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.da-calc__pane { display: flex; flex-direction: column; gap: var(--s-4); }
.da-calc__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.da-calc__source { padding: 0 var(--s-5) var(--s-5); }

.da-modes {
	display: flex;
	margin: var(--s-5) var(--s-5) 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface);
}
.da-modes__btn {
	flex: 1;
	min-height: 44px;
	padding: 10px 14px;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--t-ui);
	border: none;
	background: var(--surface);
	color: var(--kali);
	transition: background-color var(--transition), color var(--transition);
}
.da-modes__btn + .da-modes__btn { border-left: 1px solid var(--line); }
.da-modes__btn.is-active { background: var(--chara); color: var(--tush); }

/* Side by side, "ছাদের টব ও গ্রো ব্যাগ" has nowhere to go on a 320px phone. */
@media (max-width: 420px) {
	.da-modes { flex-direction: column; }
	.da-modes__btn + .da-modes__btn { border-left: none; border-top: 1px solid var(--line); }
}

.da-field {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	font-family: var(--font-ui);
	font-size: var(--t-ui);
	font-weight: 600;
	color: var(--kali);
}
.da-field input, .da-field select {
	font-family: var(--font-ui);
	font-size: var(--t-data);
	line-height: var(--lh-data);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	color: var(--kali);
	height: 48px;
	width: 100%;
	padding: 0 12px;
	border: 2px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	transition: border-color var(--transition);
}
.da-field input:focus, .da-field select:focus { border-color: var(--chara); }

.da-result { border-top: var(--matra) solid var(--holud); background: var(--holud-tint); padding: var(--s-4) var(--s-5); }
.da-result__label { font-family: var(--font-ui); font-size: var(--t-micro); color: var(--chhai); margin-bottom: var(--s-1); }
.da-result__value {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--t-display);
	line-height: 1.1;
	color: var(--kali);
	font-variant-numeric: tabular-nums;
}
.da-result--columns { border-top-color: var(--chara); background: var(--chara-tint); margin-top: var(--s-2); padding: var(--s-5); }
.da-result--columns .da-result__label { font-weight: 600; margin-bottom: var(--s-4); }
.da-result__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--s-5); }
.da-result__name { font-family: var(--font-ui); font-size: var(--t-caption); color: var(--chhai); }
.da-result__col .da-result__value { font-size: var(--t-h1); line-height: 1.2; }
.da-result__unit { font-family: var(--font-ui); font-size: var(--t-caption); color: var(--chhai); }
.da-result__source { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }

/* Standalone data table (calculator page) */
.da-table-wrap {
	border-top: var(--matra) solid var(--mati);
	background: var(--surface);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	margin-bottom: var(--s-2);
}
.da-table {
	width: 100%;
	min-width: 420px;
	border-collapse: collapse;
	font-family: var(--font-ui);
	font-size: var(--t-data);
	line-height: var(--lh-data);
}
.da-table caption {
	text-align: left;
	caption-side: top;
	padding: var(--s-3) var(--s-4);
	font-size: var(--t-caption);
	line-height: var(--lh-caption);
	color: var(--chhai);
}
.da-table th, .da-table td { text-align: left; padding: 10px var(--s-4); border-bottom: 1px solid var(--line); color: var(--kali); }
.da-table thead th { background: var(--tush); color: var(--chhai); font-weight: 600; padding: var(--s-2) var(--s-4); }
.da-table tbody th { font-weight: 400; }
.da-table tbody tr:last-child th, .da-table tbody tr:last-child td { border-bottom: none; }
.da-table .da-num { text-align: right; font-variant-numeric: tabular-nums; }
.da-table tbody td.da-num { font-weight: 600; }

/* ------------------------------------------------------------------ *
 *  Split section (text beside a tool)
 * ------------------------------------------------------------------ */

.da-split { display: grid; grid-template-columns: 1fr; gap: var(--s-7); align-items: start; }
@media (min-width: 900px) {
	.da-split { grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.2fr); gap: var(--s-7) 64px; }
}
.da-split__text p { max-width: 520px; }
.da-split__text .da-band__lede { margin-bottom: var(--s-4); }

/* Symptom chooser */
.da-chooser { background: var(--surface); border-top: var(--matra) solid var(--chara); padding: var(--s-5); }
.da-chooser__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--t-h3);
	color: var(--kali);
	margin-bottom: var(--s-3);
}
.da-chooser__chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.da-chooser__divider { height: 1px; background: var(--line); margin: var(--s-5) 0 var(--s-4); }

/* ------------------------------------------------------------------ *
 *  Chips — filters, crops, symptoms
 * ------------------------------------------------------------------ */

.da-chip {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-ui);
	font-size: var(--t-caption);
	font-weight: 600;
	padding: 10px 16px;
	min-height: 44px;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--kali);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
body a.da-chip:hover, .da-chip:hover { background: var(--mati); color: var(--tush); border-color: var(--mati); }
.da-chip.is-active { background: var(--mati); color: var(--tush); border-color: var(--mati); }
.da-chip--chara { background: var(--chara-tint); color: var(--chara); border-color: transparent; }
.da-chip--chara.is-active { background: var(--chara); color: #fff; border-color: var(--chara); }
body a.da-chip--chara:hover, .da-chip--chara:hover { background: var(--chara); color: #fff; border-color: var(--chara); }
.da-chip--mati { background: var(--mati-tint); color: var(--mati); border-color: transparent; white-space: normal; }
.da-chip--outline { background: var(--surface); color: var(--chara); border-color: var(--chara); }

/* ------------------------------------------------------------------ *
 *  Season ribbon + work lanes
 * ------------------------------------------------------------------ */

.da-ribbon { display: flex; flex-wrap: wrap; gap: var(--s-2); background: var(--surface); margin-bottom: var(--s-6); }
.da-ribbon__btn {
	/* Full width until there is room for the arc-proportional layout —
	   at 320px a 60-unit season is too narrow for its own month range. */
	flex: 1 1 100%;
	padding: 10px var(--s-1);
	border: none;
	border-top: var(--matra) solid #C4A093; /* মাটি at 48% — an inactive season */
	background: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-height: 48px;
	transition: background-color var(--transition), color var(--transition);
}
.da-ribbon__btn.is-active { border-top-color: var(--mati); background: var(--mati); }
.da-ribbon__name { font-family: var(--font-display); font-weight: 500; font-size: var(--t-ui); color: var(--kali); }
.da-ribbon__btn.is-active .da-ribbon__name { font-weight: 700; color: #fff; }
.da-ribbon__months { font-family: var(--font-ui); font-size: var(--t-micro); color: var(--chhai); }
.da-ribbon__btn.is-active .da-ribbon__months { color: rgba(255, 255, 255, 0.72); }

@media (min-width: 560px) {
	.da-ribbon { flex-wrap: nowrap; overflow: hidden; }
	/* The ribbon is the logo mark unrolled: each season's width is its
	   arc sweep, carried in from the markup. */
	.da-ribbon__btn { flex: var(--flex, 1) 1 0; }
}

.da-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-6); }
.da-lane { display: flex; flex-direction: column; height: 100%; background: var(--surface); padding: 0 var(--s-5) var(--s-5); }
.da-lane__rule { height: var(--matra); background: var(--mati); margin: 0 calc(-1 * var(--s-5)); }
.da-lane__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--t-h3);
	line-height: var(--lh-h3);
	color: var(--mati);
	margin-top: var(--s-5);
}
.da-lane__note { font-family: var(--font-body); font-size: var(--t-caption); line-height: var(--lh-caption); color: var(--kali); margin: var(--s-2) 0 0; }
.da-lane__rows { display: grid; margin-top: 20px; }
.da-lane__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-4);
	padding: var(--s-3) 0;
	border-top: 1px solid var(--line);
	text-decoration: none;
	font-family: var(--font-ui);
	font-size: var(--t-caption);
	line-height: var(--lh-caption);
}
.da-lane__crop { color: var(--kali); }
.da-lane__row:hover .da-lane__crop { color: var(--chara); }
.da-lane__months { color: var(--chhai); white-space: nowrap; }
.da-lane__link {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--t-ui);
	color: var(--chara);
	text-decoration: none;
	margin-top: auto;
	padding-top: 20px;
	align-self: start;
}
.da-lane__link:hover { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 2px; }

/* ------------------------------------------------------------------ *
 *  Trust band + follow
 * ------------------------------------------------------------------ */

.da-band--mati .da-band__lede { margin-bottom: 56px; }
.da-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px var(--s-6); }
.da-step { display: flex; flex-direction: column; gap: var(--s-3); }
.da-step__rule { height: 2px; background: rgba(241, 243, 234, 0.35); }
.da-step__index { font-family: var(--font-ui); font-weight: 600; font-size: var(--t-caption); color: var(--holud); }
.da-step__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--t-h3);
	line-height: var(--lh-h3);
	color: var(--tush);
}
.da-step__body { font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-body); color: var(--tush); }

.da-follow { padding: var(--s-8) 0; }
.da-follow__rule { height: var(--matra); background: var(--mati); margin-bottom: var(--s-6); }
.da-follow__body {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-5) 64px;
	align-items: center;
	justify-content: space-between;
}
.da-follow__text { max-width: 620px; }
.da-follow__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--t-h2);
	line-height: var(--lh-h2);
	color: var(--mati);
	margin: 0 0 var(--s-3);
}
.da-follow__text p { margin: 0; text-wrap: pretty; }
.da-follow__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* ------------------------------------------------------------------ *
 *  Archive
 * ------------------------------------------------------------------ */

.da-archive__head { background: var(--tush); padding: 40px 0 var(--s-6); }
.da-archive__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--t-h1);
	line-height: var(--lh-h1);
	color: var(--mati);
	margin: 0 0 var(--s-4);
}
.da-archive__standfirst {
	font-family: var(--font-body);
	font-size: var(--t-body-lg);
	line-height: var(--lh-body-lg);
	color: var(--kali);
	max-width: 680px;
	text-wrap: pretty;
	margin: 0;
}
.da-archive__body { background: var(--tush); padding: var(--s-7) 0 var(--s-8); }
.da-archive .da-band__inner { max-width: var(--max-width); }

.da-filters {
	background: var(--surface);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 20px 0;
	position: sticky;
	top: 64px;
	z-index: 10;
}
.da-filters__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}
.da-filters__line { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.da-filters__line--wrap { flex-wrap: wrap; gap: var(--s-3) var(--s-5); }
.da-filters__label {
	font-family: var(--font-ui);
	font-size: var(--t-micro);
	font-weight: 600;
	color: var(--chhai);
	flex-shrink: 0;
}
.da-filters__scroll {
	display: flex;
	gap: var(--s-2);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	flex: 1;
	min-width: 0;
	padding-bottom: 2px;
}
.da-filters__scroll .da-chip { flex: 0 0 auto; }
.da-filters__group { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.da-filters__group .da-filters__scroll { flex: 0 1 auto; }
.da-filters__search {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	width: 100%;
	max-width: 380px;
	border: 2px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	padding: 0 14px;
	height: 48px;
	color: var(--chhai);
	transition: border-color var(--transition);
}
.da-filters__search:focus-within { border-color: var(--chara); }
.da-filters__search input {
	font-family: var(--font-ui);
	font-size: var(--t-ui);
	color: var(--kali);
	border: none;
	outline: none;
	background: transparent;
	width: 100%;
	height: 44px;
}
.da-filters__count {
	font-family: var(--font-ui);
	font-size: var(--t-caption);
	color: var(--chhai);
	margin-left: auto;
	font-variant-numeric: tabular-nums;
}

/* Featured article */
.da-featured {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 40px;
	background: var(--surface);
	padding: 0 var(--s-6) var(--s-6);
	margin-bottom: var(--s-7);
	transition: transform var(--transition);
}
@media (min-width: 900px) {
	.da-featured { grid-template-columns: minmax(280px, 1fr) minmax(280px, 1.05fr); }
}
.da-featured:hover { transform: translateY(-1px); }
.da-featured__rule { grid-column: 1 / -1; height: 4px; background: var(--mati); margin: 0 calc(-1 * var(--s-6)); }
.da-featured__media { margin-top: var(--s-6); }
.da-featured__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--line); }
.da-featured__body { display: flex; flex-direction: column; margin-top: var(--s-6); }
.da-featured__top { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.da-featured__flag { font-family: var(--font-ui); font-weight: 600; font-size: var(--t-micro); color: var(--chhai); }
.da-featured__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--t-h2);
	line-height: var(--lh-h2);
	margin: var(--s-3) 0 0;
}
.da-featured__title a { color: var(--mati); text-decoration: none; }
.da-featured__standfirst {
	font-family: var(--font-body);
	font-size: var(--t-body-lg);
	line-height: var(--lh-body-lg);
	color: var(--kali);
	margin: var(--s-3) 0 0;
	text-wrap: pretty;
}
.da-featured__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: var(--s-5);
}
.da-card__meta {
	display: flex;
	align-items: baseline;
	gap: var(--s-2);
	font-family: var(--font-ui);
	font-size: var(--t-caption);
	color: var(--chhai);
}

/* Empty state */
.da-empty { background: var(--surface); padding: 0 var(--s-6) var(--s-6); max-width: var(--measure); }
.da-empty__rule { height: var(--matra); background: var(--holud); margin: 0 calc(-1 * var(--s-6)) var(--s-6); }
.da-empty__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--t-h3);
	line-height: var(--lh-h3);
	color: var(--mati);
	margin-bottom: var(--s-3);
}
.da-empty__chips { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }

/* Calculator page */
.da-post--tool { justify-content: center; }
.da-post--tool .da-article { max-width: 744px; flex-basis: 744px; }
.da-dateline--tool { margin-bottom: var(--s-6); }
.da-calc-section { margin-bottom: var(--s-6); }
.da-tool-section { margin-bottom: 40px; }
.da-tool-section h2 { margin: 0 0 var(--s-4); }

/* Result note — the sentence a figure alone would not say */
.da-result__note {
	margin-top: var(--s-4);
	font-family: var(--font-body);
	font-size: var(--t-body);
	line-height: var(--lh-body);
	color: var(--kali);
}

/* "অন্য হিসাব" — the other calculators, from inside one */
.da-others__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-5); }
.da-others__item {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	border-top: 1px solid var(--line);
	padding-top: var(--s-3);
	text-decoration: none;
}
.da-others__title { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3); color: var(--kali); }
.da-others__item:hover .da-others__title { color: var(--chara); }
.da-others__note { font-family: var(--font-ui); font-size: var(--t-caption); color: var(--chhai); }

/* ------------------------------------------------------------------ *
 *  The calculators band — a tool is a door, so each card names the
 *  thing it computes with a glyph, then says what you get, then how to
 *  start. Structure comes from the matra rule and the husk icon plate;
 *  there is still no shadow and no rounded corner anywhere.
 * ------------------------------------------------------------------ */

/* Three to a row on desktop: with six tools that makes two even rows,
   which auto-fit would only manage by accident at some widths. */
.da-toolband .da-tools {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-6);
}
@media (min-width: 560px) {
	.da-toolband .da-tools { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.da-toolband .da-tools { grid-template-columns: repeat(3, 1fr); }
}
.da-tool {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-2);
	background: var(--surface);
	padding: 0 var(--s-5) var(--s-5);
	text-decoration: none;
	transition: transform var(--transition), background-color var(--transition);
}
.da-tool:hover { transform: translateY(-1px); background: var(--tush); }
.da-tool__rule {
	display: block;
	align-self: stretch;
	height: var(--matra);
	background: var(--mati);
	margin: 0 calc(-1 * var(--s-5)) var(--s-5);
	transition: background-color var(--transition);
}
.da-tool:hover .da-tool__rule { background: var(--chara); }

/* The glyph sits on its own husk square — the square language again,
   and enough contrast that the icon reads at a glance on a cheap screen. */
.da-tool__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: var(--tush);
	color: var(--mati);
	margin-bottom: var(--s-3);
	transition: background-color var(--transition), color var(--transition);
}
.da-tool:hover .da-tool__icon { background: var(--holud-tint); color: var(--chara); }
.da-tool__glyph { display: block; }

.da-tool__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--t-h3);
	line-height: var(--lh-h3);
	color: var(--mati);
}
.da-tool__note {
	font-family: var(--font-ui);
	font-size: var(--t-caption);
	line-height: var(--lh-caption);
	color: var(--chhai);
}
.da-tool__cta {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--t-caption);
	color: var(--chara);
	margin-top: auto;
	padding-top: var(--s-4);
	padding-bottom: 2px;
	background-image: linear-gradient(var(--chara), var(--chara));
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0% 2px;
	transition: background-size var(--transition);
}
.da-tool:hover .da-tool__cta { background-size: 100% 2px; }

/* Hub page */
.da-hub__group { margin-bottom: var(--s-8); }
.da-hub__content { max-width: var(--measure); }
.da-card--tool { padding-top: 0; }
.da-card--tool .da-card__title { min-height: 0; margin-top: var(--s-5); }
.da-card--tool .da-card__excerpt { min-height: 0; }

/* ------------------------------------------------------------------ *
 *  Diagnostic figure zoom
 * ------------------------------------------------------------------ */

.da-figure { position: relative; }
.da-figure__zoom {
	position: absolute;
	top: var(--s-3);
	right: var(--s-3);
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	min-height: 44px;
	padding: 10px 14px;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--t-caption);
	color: var(--kali);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.da-figure__zoom:hover { background: var(--mati); color: var(--tush); border-color: var(--mati); }

.da-zoom {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: rgba(28, 26, 23, 0.88);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--gutter);
	overflow-y: auto;
}
.da-zoom__panel { width: 100%; max-width: 900px; background: var(--surface); padding: 0 var(--s-5) var(--s-5); }
.da-zoom__rule { height: var(--matra); background: var(--holud); margin: 0 calc(-1 * var(--s-5)) var(--s-5); }
.da-zoom__figure { margin: 0; }
.da-zoom__img { width: 100%; height: auto; display: block; background: var(--line); }
.da-zoom__caption {
	padding-top: var(--s-2);
	font-family: var(--font-ui);
	font-size: var(--t-caption);
	line-height: var(--lh-caption);
	color: var(--chhai);
}
.da-zoom__close { margin-top: 20px; background: var(--surface); color: var(--kali); border: 1px solid var(--line); }
body .da-zoom__close:hover { background: var(--mati); color: var(--tush); border-color: var(--mati); }

/* The page behind must not scroll while the dialog owns the screen. */
body.da-zoom-open { overflow: hidden; }

@media print {
	.da-figure__zoom, .da-zoom { display: none !important; }
}

/* ------------------------------------------------------------------ *
 *  Content protection (optional, off by default)
 * ------------------------------------------------------------------ */

.da-protect {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

/*
 * Never the form fields. The calculators are the reason: a reader who
 * cannot type into জমির পরিমাণ, or select a wrong figure to correct it,
 * has lost more than the site protected.
 */
.da-protect input,
.da-protect textarea,
.da-protect select,
.da-protect [contenteditable="true"] {
	-webkit-user-select: text;
	user-select: text;
	-webkit-touch-callout: default;
}

/* The note: bottom centre, hanging from a holud rule like the
   back-to-top button, so it reads as part of the same furniture. */
.da-protect-note {
	position: fixed;
	left: 50%;
	bottom: var(--gutter);
	transform: translate(-50%, 8px);
	z-index: 40;
	max-width: calc(100vw - 2 * var(--gutter));
	background: var(--mati);
	color: var(--tush);
	opacity: 0;
	transition: opacity var(--transition), transform var(--transition);
}
.da-protect-note.is-visible { opacity: 1; transform: translate(-50%, 0); }
.da-protect-note__rule { display: block; height: var(--matra); background: var(--holud); }
.da-protect-note__body {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-5);
	font-family: var(--font-ui);
	font-size: var(--t-caption);
	line-height: var(--lh-caption);
}
.da-protect-note__body svg { flex-shrink: 0; }

@media print {
	.da-protect-note { display: none !important; }
}

/* ------------------------------------------------------------------ *
 *  Astra chrome that the design layer replaces
 * ------------------------------------------------------------------ */

.ast-header-break-point .main-header-bar, .site-header .ast-container { display: none; }

/* ------------------------------------------------------------------ *
 *  Motion + print
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
	html { scroll-behavior: auto; }
}
html { scroll-behavior: smooth; }

@media print {
	@page { margin: 18mm; }
	html, body { background: #fff !important; }
	.da-header, .da-footer, .da-toc, .da-share, .da-top, .da-related,
	.da-crumbs, .skip-link, .da-corrections { display: none !important; }
	.da-post { display: block; padding: 0; max-width: none; }
	.da-article { max-width: none; }
	table, figure, section, blockquote { break-inside: avoid; }
	h1, h2 { break-after: avoid; }
	a { color: #000 !important; }
}