/*
 * Ar-Risalah — supplemental styles.
 *
 * theme.json cannot express these: inline elements (strong, em), script-level
 * direction, and the four custom blocks. Every value below is a theme.json
 * token. If you find yourself typing a colour or a pixel here, put it in
 * theme.json instead and reference it.
 */

/* -------------------------------------------------------------------------
 * Inline emphasis
 *
 * SolaimanLipi ships a single weight, so <strong> borrows the bold face.
 * Bengali has no true italic — browsers synthesise a slant that smears the
 * matra — so <em> is rendered as a term marker instead of an oblique. Latin
 * text inside <em> keeps a real italic, because Latin faces have one.
 * ---------------------------------------------------------------------- */

strong,
b {
	font-family: var(--wp--preset--font-family--strong);
	font-weight: 700;
}

/*
 * Emphasis is set with spaced letters, the classical solution in scripts that
 * have no italic. It is deliberately NOT coloured: links are green, and a
 * green emphasis reads as a link the reader cannot click.
 */
em,
i {
	font-style: normal;
	letter-spacing: 0.07em;
	word-spacing: 0.08em;
}

em:lang(en),
i:lang(en),
cite em {
	font-style: italic;
	letter-spacing: 0;
	word-spacing: normal;
}

/* Arabic inside <em> must never be spaced: it would break the joins. */
em:lang(ar),
i:lang(ar) {
	font-style: normal;
	letter-spacing: 0;
	word-spacing: normal;
}

/* -------------------------------------------------------------------------
 * Arabic
 *
 * Fully vowelled text needs room: at a tight line-height the marks of one line
 * collide with the descenders of the next.
 * ---------------------------------------------------------------------- */

[lang="ar"],
.ar-risalah-arabic {
	font-family: var(--wp--preset--font-family--arabic);
	direction: rtl;
	text-align: right;
	line-height: 2.05;
	font-feature-settings: "calt" 1, "liga" 1;
}

/* -------------------------------------------------------------------------
 * Scripture blocks
 *
 * Ayah and hadith are deliberately different objects. An ayah sits in a filled
 * field with a coloured edge; a hadith is outlined only. The reader should be
 * able to tell which is which before reading a word.
 * ---------------------------------------------------------------------- */

.ar-risalah-scripture {
	margin-block: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
}

.ar-risalah-scripture__arabic {
	font-family: var(--wp--preset--font-family--arabic);
	font-size: var(--wp--preset--font-size--subhead);
	direction: rtl;
	text-align: right;
	line-height: 2.15;
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--ink);
}

.ar-risalah-scripture__bangla {
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.85;
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--ink-soft);
}

.ar-risalah-scripture__source {
	font-family: var(--wp--preset--font-family--strong);
	font-size: var(--wp--preset--font-size--tiny);
	line-height: 1.6;
	margin: 0;
	color: var(--wp--preset--color--muted);
}

/* Ayah — filled, with a green edge. */
.ar-risalah-ayah {
	background-color: var(--wp--preset--color--wash);
	border-inline-start: 2px solid var(--wp--preset--color--akhlaq);
}

/* Hadith — outlined only. */
.ar-risalah-hadith {
	border: 1px solid var(--wp--preset--color--rule);
}

/* -------------------------------------------------------------------------
 * Hashiya — a gloss on a term, set apart from the argument.
 * ---------------------------------------------------------------------- */

.ar-risalah-hashiya {
	margin-block: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--surface);
	border: 1px dashed var(--wp--preset--color--faint);
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.8;
}

.ar-risalah-hashiya__term {
	display: block;
	font-family: var(--wp--preset--font-family--strong);
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--akhlaq);
	margin-block-end: var(--wp--preset--spacing--20);
}

.ar-risalah-hashiya__body {
	margin: 0;
	color: var(--wp--preset--color--ink-soft);
}

/* -------------------------------------------------------------------------
 * Pull quote — a sentence lifted out of the argument, not a citation.
 * ---------------------------------------------------------------------- */

.ar-risalah-pullquote {
	margin-block: var(--wp--preset--spacing--60);
	padding-inline-start: var(--wp--preset--spacing--40);
	border-inline-start: 3px solid var(--wp--preset--color--akhlaq);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.62;
	color: var(--wp--preset--color--ink-soft);
}

.ar-risalah-pullquote p {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Category accents
 *
 * The three pillars each carry a colour. It is applied to the edge of a
 * scripture block and to the kicker, never as a background wash — the reading
 * surface stays one colour throughout.
 * ---------------------------------------------------------------------- */

.pillar-akhlaq  { --ar-pillar: var(--wp--preset--color--akhlaq); }
.pillar-chinta  { --ar-pillar: var(--wp--preset--color--chinta); }
.pillar-khandan { --ar-pillar: var(--wp--preset--color--khandan); }

.pillar-akhlaq  .ar-risalah-ayah,
.pillar-chinta  .ar-risalah-ayah,
.pillar-khandan .ar-risalah-ayah,
.pillar-akhlaq  .ar-risalah-pullquote,
.pillar-chinta  .ar-risalah-pullquote,
.pillar-khandan .ar-risalah-pullquote {
	border-inline-start-color: var(--ar-pillar);
}

/* -------------------------------------------------------------------------
 * Accessibility
 * ---------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--akhlaq);
	outline-offset: 2px;
}

.skip-link:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Long Bengali compounds and URLs must not force a horizontal scrollbar. */
.entry-content {
	overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------
 * Dark mode
 *
 * No colour values live here. theme.json holds both schemes under
 * settings.custom.scheme; this only decides which set feeds the preset
 * tokens, so every block, template and style keeps using the same names.
 *
 * The dark surface is a warm near-black rather than #000, and the text is
 * off-white rather than #FFF: maximum contrast makes light letterforms
 * bleed into a black field, which is hardest on readers with astigmatism
 * and unkind to the dense conjuncts of Bengali.
 * ---------------------------------------------------------------------- */

:root {
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--wp--preset--color--paper: var(--wp--custom--scheme--dark--paper);
		--wp--preset--color--surface: var(--wp--custom--scheme--dark--surface);
		--wp--preset--color--wash: var(--wp--custom--scheme--dark--wash);
		--wp--preset--color--rule: var(--wp--custom--scheme--dark--rule);
		--wp--preset--color--border: var(--wp--custom--scheme--dark--border);
		--wp--preset--color--faint: var(--wp--custom--scheme--dark--faint);
		--wp--preset--color--muted: var(--wp--custom--scheme--dark--muted);
		--wp--preset--color--ink-soft: var(--wp--custom--scheme--dark--ink-soft);
		--wp--preset--color--ink: var(--wp--custom--scheme--dark--ink);
		--wp--preset--color--akhlaq: var(--wp--custom--scheme--dark--akhlaq);
		--wp--preset--color--chinta: var(--wp--custom--scheme--dark--chinta);
		--wp--preset--color--khandan: var(--wp--custom--scheme--dark--khandan);
	}
}

/* Explicit choice always wins over the system preference. */
:root[data-theme="dark"] {
	--wp--preset--color--paper: var(--wp--custom--scheme--dark--paper);
	--wp--preset--color--surface: var(--wp--custom--scheme--dark--surface);
	--wp--preset--color--wash: var(--wp--custom--scheme--dark--wash);
	--wp--preset--color--rule: var(--wp--custom--scheme--dark--rule);
	--wp--preset--color--border: var(--wp--custom--scheme--dark--border);
	--wp--preset--color--faint: var(--wp--custom--scheme--dark--faint);
	--wp--preset--color--muted: var(--wp--custom--scheme--dark--muted);
	--wp--preset--color--ink-soft: var(--wp--custom--scheme--dark--ink-soft);
	--wp--preset--color--ink: var(--wp--custom--scheme--dark--ink);
	--wp--preset--color--akhlaq: var(--wp--custom--scheme--dark--akhlaq);
	--wp--preset--color--chinta: var(--wp--custom--scheme--dark--chinta);
	--wp--preset--color--khandan: var(--wp--custom--scheme--dark--khandan);
}

/* -------------------------------------------------------------------------
 * Light / dark toggle
 *
 * A quiet control: it belongs to the furniture, not to the argument. The icon
 * is Phosphor Regular; the label carries the accessible name, so the icon is
 * hidden from assistive technology.
 * ---------------------------------------------------------------------- */

.ar-theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.4em 0.7em;
	margin: 0;
	background: none;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0.125rem;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--strong);
	font-size: var(--wp--preset--font-size--tiny);
	line-height: 1;
	cursor: pointer;
}

.ar-theme-toggle:hover,
.ar-theme-toggle:focus-visible {
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--faint);
}

.ar-theme-toggle__icon {
	display: inline-flex;
	width: 1.25em;
	height: 1.25em;
}

.ar-theme-toggle .ar-icon {
	width: 100%;
	height: 100%;
}

/* Show whichever icon describes the destination, not the current state. */
.ar-theme-toggle .ar-icon--sun { display: none; }
.ar-theme-toggle .ar-icon--moon { display: block; }

.ar-theme-toggle[aria-pressed="true"] .ar-icon--sun { display: block; }
.ar-theme-toggle[aria-pressed="true"] .ar-icon--moon { display: none; }

/* The label is the accessible name, so it stays in the accessibility tree
   even where the layout is too tight to show it. */

/* -------------------------------------------------------------------------
 * Article appendix
 *
 * What an article carries besides its argument: the recap, the citations, the
 * reading list, and the question it leaves open. It is set quieter and tighter
 * than the body so a reader can tell at a glance that the argument has ended.
 * ---------------------------------------------------------------------- */

.ar-risalah-appendix {
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block-start: var(--wp--preset--spacing--50);
	border-block-start: 1px solid var(--wp--preset--color--rule);
}

.ar-appendix__section + .ar-appendix__section {
	margin-block-start: var(--wp--preset--spacing--60);
}

.ar-appendix__heading {
	font-family: var(--wp--preset--font-family--strong);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 var(--wp--preset--spacing--40);
}

.ar-risalah-appendix ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The recap. Numbered, because the points are an ordered summary of an
   argument that was itself numbered. */
.ar-appendix__takeaways {
	counter-reset: ar-takeaway;
}

.ar-appendix__takeaways li {
	position: relative;
	counter-increment: ar-takeaway;
	padding-inline-start: 2.1em;
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.8;
	color: var(--wp--preset--color--ink-soft);
}

.ar-appendix__takeaways li + li {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ar-appendix__takeaways li::before {
	content: counter( ar-takeaway, bengali );
	position: absolute;
	inset-inline-start: 0;
	font-family: var(--wp--preset--font-family--strong);
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--akhlaq);
}

/* Citations, grouped by kind. */
.ar-appendix__kind {
	font-family: var(--wp--preset--font-family--strong);
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--muted);
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--20);
}

.ar-appendix__kind:first-of-type {
	margin-block-start: 0;
}

.ar-appendix__refs li {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.75;
	color: var(--wp--preset--color--ink-soft);
	padding-inline-start: 1em;
	text-indent: -1em;
}

.ar-appendix__refs li::before {
	content: "\2014\00a0";
	color: var(--wp--preset--color--faint);
}

/* Reading list. Each entry is a small stack rather than a run-on line, because
   these are meant to be scanned by someone deciding what to read next. */
.ar-appendix__book {
	padding-block: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--preset--color--rule);
}

.ar-appendix__book:first-child {
	border-block-start: 0;
	padding-block-start: 0;
}

.ar-appendix__book-title {
	display: block;
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}

.ar-appendix__book-author {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.ar-appendix__lang {
	display: inline-block;
	margin-inline-start: 0.5em;
	padding: 0.15em 0.55em;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0.125rem;
	font-family: var(--wp--preset--font-family--strong);
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--muted);
	vertical-align: 0.1em;
}

.ar-appendix__book-note {
	display: block;
	margin-block-start: 0.35em;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
}

/* The open question. Marked with the pillar colour, because it is an
   invitation rather than a conclusion. */
.ar-appendix__section--direction {
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--wash);
	border-inline-start: 2px solid var(--wp--preset--color--akhlaq);
}

.ar-appendix__direction {
	margin: 0;
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.85;
	color: var(--wp--preset--color--ink-soft);
}

/* The editor placeholder. */
.ar-risalah-appendix--placeholder {
	padding: var(--wp--preset--spacing--40);
	border: 1px dashed var(--wp--preset--color--faint);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.ar-risalah-appendix--placeholder p {
	margin: 0;
}

.ar-risalah-appendix--placeholder p:first-child {
	font-family: var(--wp--preset--font-family--strong);
	color: var(--wp--preset--color--ink);
	margin-block-end: 0.3em;
}

/* An empty subtitle must not leave a gap. */
.ar-subtitle:empty {
	display: none;
}

/* =========================================================================
 * HEADER
 *
 * Motion here follows one rule: an underline enters from the right and leaves
 * to the left, so the eye is led the way the line of text runs. That is done
 * by swapping transform-origin between the two states rather than animating
 * width, which keeps every sweep on the compositor.
 *
 * Everything below respects prefers-reduced-motion through the global rule
 * near the top of this file.
 * ====================================================================== */

:root {
	--ar-ease: cubic-bezier(0.65, 0, 0.35, 1);
	--ar-quick: 0.2s;
	--ar-sweep: 0.34s;
}

.ar-skip {
	position: absolute;
	inset-inline-start: var(--wp--preset--spacing--40);
	top: 0;
	z-index: 100;
	padding: 0.6em 1.1em;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--strong);
	font-size: var(--wp--preset--font-size--tiny);
	text-decoration: none;
	transform: translateY(-120%);
	transition: transform var(--ar-quick) var(--ar-ease);
}

.ar-skip:focus {
	transform: translateY(0);
}

.ar-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: color-mix(in srgb, var(--wp--preset--color--paper) 88%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-block-end: 1px solid var(--wp--preset--color--rule);
}

@supports not (backdrop-filter: blur(10px)) {
	.ar-header { background: var(--wp--preset--color--paper); }
}

.ar-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
}

/* --- wordmark --- */

.ar-brand {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	text-decoration: none;
	color: inherit;
	flex: 0 0 auto;
}

.ar-brand__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.1;
	color: var(--wp--preset--color--ink);
}

.ar-brand__tag {
	font-family: var(--wp--preset--font-family--strong);
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 30rem) {
	.ar-brand__tag { display: none; }
}

/* --- primary menu --- */

.ar-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.ar-nav__list {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ar-nav__item {
	position: relative;
}

.ar-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding-block: 0.65em;
	font-family: var(--wp--preset--font-family--strong);
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
	transition: color var(--ar-quick) var(--ar-ease);
}

.ar-nav__link:hover,
.ar-nav__link:focus-visible {
	color: var(--wp--preset--color--ink);
}

.ar-nav__text {
	position: relative;
}

/* Resting: collapsed against the left, so it retracts leftwards. */
.ar-nav__text::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -0.35em;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--ar-sweep) var(--ar-ease);
}

/* Hovered: drawn from the right. */
.ar-nav__link:hover .ar-nav__text::after,
.ar-nav__link:focus-visible .ar-nav__text::after,
.ar-nav__item.is-current .ar-nav__text::after {
	transform: scaleX(1);
	transform-origin: right center;
}

.ar-nav__item.is-current .ar-nav__link {
	color: var(--wp--preset--color--akhlaq);
}

.ar-nav__caret {
	display: inline-flex;
	color: var(--wp--preset--color--faint);
	transition: transform var(--ar-quick) var(--ar-ease), color var(--ar-quick) var(--ar-ease);
}

.ar-nav__item:hover .ar-nav__caret,
.ar-nav__item:focus-within .ar-nav__caret {
	transform: rotate(180deg);
	color: var(--wp--preset--color--ink);
}

/* --- dropdown --- */

.ar-nav__panel {
	position: absolute;
	top: calc(100% + 0.5rem);
	inset-inline-start: 50%;
	min-width: 19rem;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0.25rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 28px -12px rgba(0, 0, 0, 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -0.4rem);
	transition:
		opacity var(--ar-quick) var(--ar-ease),
		transform var(--ar-quick) var(--ar-ease),
		visibility 0s linear var(--ar-quick);
}

.ar-nav__item:hover > .ar-nav__panel,
.ar-nav__item:focus-within > .ar-nav__panel {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition-delay: 0s;
}

/* A forgiving bridge, so the pointer can cross the gap without the panel
   closing under it. */
.ar-nav__item.has-sub::after {
	content: "";
	position: absolute;
	top: 100%;
	inset-inline: 0;
	height: 0.75rem;
}

.ar-nav__sub {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ar-nav__sub a {
	display: block;
	padding: 0.6rem 0.75rem;
	border-radius: 0.125rem;
	text-decoration: none;
	color: inherit;
	transition: background-color var(--ar-quick) var(--ar-ease);
}

.ar-nav__sub a:hover,
.ar-nav__sub a:focus-visible {
	background: var(--wp--preset--color--wash);
}

.ar-nav__sub-title {
	display: block;
	font-family: var(--wp--preset--font-family--strong);
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--ink);
}

.ar-nav__sub-desc {
	display: block;
	margin-block-start: 0.15em;
	font-size: var(--wp--preset--font-size--tiny);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

/* --- tools --- */

.ar-header__tools {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex: 0 0 auto;
}

.ar-tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	background: none;
	border: 1px solid transparent;
	border-radius: 0.2rem;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	transition: color var(--ar-quick) var(--ar-ease), border-color var(--ar-quick) var(--ar-ease), background-color var(--ar-quick) var(--ar-ease);
}

.ar-tool:hover,
.ar-tool:focus-visible {
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--rule);
	background: var(--wp--preset--color--wash);
}

.ar-theme-toggle .ar-icon--sun { display: none; }
.ar-theme-toggle .ar-icon--moon { display: block; }
.ar-theme-toggle[aria-pressed="true"] .ar-icon--sun { display: block; }
.ar-theme-toggle[aria-pressed="true"] .ar-icon--moon { display: none; }

.ar-theme-toggle__icon {
	display: inline-flex;
}

/* --- search --- */

.ar-search {
	border-block-start: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--surface);
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.22s var(--ar-ease), opacity 0.22s var(--ar-ease);
}

.ar-search.is-open {
	max-height: 8rem;
	opacity: 1;
}

.ar-search__form {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--40);
}

.ar-search__field {
	flex: 1 1 auto;
	padding: 0.7em 0.9em;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--faint);
	border-radius: 0.2rem;
}

.ar-search__submit {
	padding: 0.7em 1.4em;
	font-family: var(--wp--preset--font-family--strong);
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--surface);
	background: var(--wp--preset--color--akhlaq);
	border: 0;
	border-radius: 0.2rem;
	cursor: pointer;
	transition: background-color var(--ar-quick) var(--ar-ease);
}

.ar-search__submit:hover {
	background: var(--wp--preset--color--ink);
}

/* -------------------------------------------------------------------------
 * Hamburger
 *
 * Three rules that fold into a cross. The middle one collapses to nothing
 * while the outer two rotate and meet, so the shape reads as one object
 * changing state rather than two icons swapping.
 * ---------------------------------------------------------------------- */

.ar-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	background: none;
	border: 1px solid transparent;
	border-radius: 0.2rem;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

.ar-burger:hover,
.ar-burger:focus-visible {
	border-color: var(--wp--preset--color--rule);
	background: var(--wp--preset--color--wash);
}

.ar-burger__box {
	position: relative;
	display: block;
	width: 20px;
	height: 14px;
}

.ar-burger__line {
	position: absolute;
	inset-inline: 0;
	height: 1.5px;
	border-radius: 2px;
	background: currentColor;
	transition:
		transform 0.34s var(--ar-ease),
		opacity 0.16s var(--ar-ease),
		top 0.34s var(--ar-ease);
}

.ar-burger__line:nth-child(1) { top: 0; }
.ar-burger__line:nth-child(2) { top: 6.25px; }
.ar-burger__line:nth-child(3) { top: 12.5px; }

.ar-burger[aria-expanded="true"] .ar-burger__line:nth-child(1) {
	top: 6.25px;
	transform: rotate(45deg);
}

.ar-burger[aria-expanded="true"] .ar-burger__line:nth-child(2) {
	opacity: 0;
	transform: scaleX(0.4);
}

.ar-burger[aria-expanded="true"] .ar-burger__line:nth-child(3) {
	top: 6.25px;
	transform: rotate(-45deg);
}

/* -------------------------------------------------------------------------
 * Drawer
 *
 * Slides in from the trailing edge with the items arriving a beat behind it,
 * which reads as the panel bringing them rather than everything appearing at
 * once. Only shown on small screens, and only when scripting is available:
 * without it the trigger stays hidden and the footer carries the whole menu.
 * ---------------------------------------------------------------------- */

.ar-drawer {
	position: fixed;
	inset: 0;
	z-index: 60;
}

.ar-drawer__scrim {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--wp--preset--color--ink) 45%, transparent);
	opacity: 0;
	transition: opacity 0.3s var(--ar-ease);
}

.ar-drawer.is-open .ar-drawer__scrim {
	opacity: 1;
}

.ar-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(22rem, 88vw);
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--paper);
	border-inline-start: 1px solid var(--wp--preset--color--rule);
	transform: translateX(100%);
	transition: transform 0.34s var(--ar-ease);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ar-drawer.is-open .ar-drawer__panel {
	transform: translateX(0);
}

.ar-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--wp--preset--spacing--40);
	border-block-end: 1px solid var(--wp--preset--color--rule);
}

.ar-drawer__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--ink);
}

.ar-drawer__search {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: var(--wp--preset--spacing--40);
	padding: 0 0.8em;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--faint);
	border-radius: 0.2rem;
	color: var(--wp--preset--color--muted);
}

.ar-drawer__search input {
	flex: 1 1 auto;
	padding: 0.75em 0;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--ink);
	background: none;
	border: 0;
}

.ar-drawer__search input:focus {
	outline: none;
}

.ar-drawer__nav {
	flex: 1 1 auto;
	padding-inline: var(--wp--preset--spacing--40);
}

.ar-drawer__nav > ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Each row arrives slightly after the one above it. */
.ar-drawer__item {
	border-block-end: 1px solid var(--wp--preset--color--rule);
	opacity: 0;
	transform: translateX(0.75rem);
	transition:
		opacity 0.28s var(--ar-ease),
		transform 0.28s var(--ar-ease);
	transition-delay: calc(60ms + var(--ar-stagger, 0) * 45ms);
}

.ar-drawer.is-open .ar-drawer__item {
	opacity: 1;
	transform: translateX(0);
}

.ar-drawer__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ar-drawer__link {
	flex: 1 1 auto;
	padding: 0.95em 0;
	font-family: var(--wp--preset--font-family--strong);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.ar-drawer__link[aria-current="page"] {
	color: var(--wp--preset--color--akhlaq);
}

.ar-drawer__disclose {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: none;
	border: 0;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
}

.ar-drawer__disclose .ar-icon {
	transition: transform 0.26s var(--ar-ease);
}

.ar-drawer__disclose[aria-expanded="true"] .ar-icon {
	transform: rotate(180deg);
}

.ar-drawer__sub {
	overflow: hidden;
	height: 0;
	transition: height 0.26s var(--ar-ease);
}

.ar-drawer__sub ul {
	list-style: none;
	margin: 0;
	padding: 0 0 var(--wp--preset--spacing--30);
}

.ar-drawer__sub a {
	display: block;
	padding: 0.6em 0 0.6em 0.9em;
	border-inline-start: 2px solid var(--wp--preset--color--rule);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--ar-quick) var(--ar-ease);
}

.ar-drawer__sub a:hover,
.ar-drawer__sub a:focus-visible {
	border-inline-start-color: var(--wp--preset--color--akhlaq);
}

.ar-drawer__sub-title {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
}

.ar-drawer__sub-desc {
	display: block;
	margin-block-start: 0.1em;
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--muted);
}

.ar-drawer__foot {
	padding: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--rule);
}

.ar-drawer__theme {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.6em 1em;
	background: none;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0.2rem;
	font-family: var(--wp--preset--font-family--strong);
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--muted);
	cursor: pointer;
}

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

/* -------------------------------------------------------------------------
 * The switch between the two headers
 * ---------------------------------------------------------------------- */

@media (max-width: 56rem) {
	.ar-nav { display: none; }
	.ar-js .ar-burger { display: inline-flex; }
	.ar-header__tools [data-ar-search-toggle] { display: none; }
}

@media (min-width: 56.0625rem) {
	.ar-drawer { display: none; }
}

/* =========================================================================
 * FOOTER
 *
 * The second navigation, not a legal dustbin. Links use the same right-to-left
 * sweep as the header so the whole chrome behaves as one thing.
 * ====================================================================== */

.ar-footer {
	margin-block-start: var(--wp--preset--spacing--80);
	border-block-start: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--wash);
}

.ar-footer__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.ar-footer__lede {
	max-width: 26rem;
	margin-block-end: var(--wp--preset--spacing--60);
}

.ar-footer__brand {
	display: inline-block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.ar-footer__says {
	margin: 0.5em 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.75;
	color: var(--wp--preset--color--muted);
}

.ar-footer__mail {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin-block-start: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--strong);
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
	transition: color var(--ar-quick) var(--ar-ease);
}

.ar-footer__mail:hover,
.ar-footer__mail:focus-visible {
	color: var(--wp--preset--color--akhlaq);
}

.ar-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.ar-footer__head {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--strong);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.ar-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ar-footer__col li + li {
	margin-block-start: 0.5em;
}

.ar-footer__col a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45em;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
}

.ar-footer__col a > span:first-child {
	position: relative;
}

.ar-footer__col a > span:first-child::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -0.18em;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--ar-sweep) var(--ar-ease);
}

.ar-footer__col a:hover > span:first-child::after,
.ar-footer__col a:focus-visible > span:first-child::after {
	transform: scaleX(1);
	transform-origin: right center;
}

.ar-footer__col a:hover,
.ar-footer__col a:focus-visible {
	color: var(--wp--preset--color--ink);
}

.ar-footer__count {
	font-family: var(--wp--preset--font-family--strong);
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--muted);
}

.ar-footer__base {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--rule);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
}

.ar-footer__credit,
.ar-footer__legal {
	margin: 0;
	font-size: var(--wp--preset--font-size--tiny);
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
}

/* -------------------------------------------------------------------------
 * Editor placeholders for the two chrome blocks
 * ---------------------------------------------------------------------- */

.ar-block-note {
	padding: var(--wp--preset--spacing--40);
	border: 1px dashed var(--wp--preset--color--faint);
	background: var(--wp--preset--color--wash);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.ar-block-note p {
	margin: 0;
}

.ar-block-note__title {
	font-family: var(--wp--preset--font-family--strong);
	color: var(--wp--preset--color--ink);
	margin-block-end: 0.35em !important;
}

/* Visually hidden, still announced. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ==========================================================================
   Front page
   ==========================================================================

   The page is built from full-bleed bands rather than one constrained
   column, so the eye gets a change of ground between sections. Ornament is
   the geometric SVG from inc/ornament.php: it inherits currentColor, so one
   asset serves both colour schemes.
   -------------------------------------------------------------------------- */

.ar-main-flush > * {
	max-width: none;
}

/* --- ornament ------------------------------------------------------------ */

.ar-girih {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: currentColor;
	/* Low enough that body text sitting on it keeps its contrast ratio and
	   the pattern reads as paper texture rather than as a second layer. */
	opacity: 0.035;
	pointer-events: none;
}

.ar-rosette {
	display: block;
	color: var(--ar-pillar, var(--wp--preset--color--akhlaq));
}

.ar-orule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--faint);
}

.ar-orule__line {
	flex: 1 1 auto;
	height: 1px;
	max-width: 7rem;
	background: var(--wp--preset--color--rule);
}

/* --- shared link sweep, lifted from the nav so every link behaves alike.
   The origin swap is what makes it sweep: anchored left at rest, anchored
   right on hover so it grows leftward, then collapsing left again. -------- */

.ar-swipe {
	position: relative;
	text-decoration: none;
	color: inherit;
}

.ar-swipe__text {
	position: relative;
	display: inline;
}

.ar-swipe__text::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -0.18em;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--ar-sweep) var(--ar-ease);
}

.ar-swipe:hover .ar-swipe__text::after,
.ar-swipe:focus-visible .ar-swipe__text::after,
a:hover .ar-swipe__text::after,
a:focus-visible .ar-swipe__text::after {
	transform: scaleX(1);
	transform-origin: right center;
}

/* --- buttons ------------------------------------------------------------- */

.ar-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.72em 1.35em;
	border: 1px solid transparent;
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--strong);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
	text-decoration: none;
	transition: background var(--ar-sweep) var(--ar-ease),
		color var(--ar-sweep) var(--ar-ease),
		border-color var(--ar-sweep) var(--ar-ease);
}

.ar-btn svg {
	flex: none;
	transition: transform var(--ar-sweep) var(--ar-ease);
}

.ar-btn:hover svg,
.ar-btn:focus-visible svg {
	transform: translateX(0.22em);
}

.ar-btn--solid {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.ar-btn--solid:hover,
.ar-btn--solid:focus-visible {
	background: var(--wp--preset--color--akhlaq);
	color: var(--wp--custom--scheme--light--paper);
}

.ar-btn--ghost {
	border-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink);
}

.ar-btn--ghost:hover,
.ar-btn--ghost:focus-visible {
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--wash);
}

.ar-btn--outline {
	border-color: rgba(225, 223, 220, 0.35);
	color: var(--wp--custom--scheme--dark--ink);
}

.ar-btn--outline:hover,
.ar-btn--outline:focus-visible {
	border-color: var(--wp--custom--scheme--dark--ink);
	background: rgba(225, 223, 220, 0.08);
}

@media (prefers-reduced-motion: reduce) {
	.ar-swipe__text::after,
	.ar-btn,
	.ar-btn svg {
		transition: none;
	}

	.ar-btn:hover svg {
		transform: none;
	}
}

/* --- bands --------------------------------------------------------------- */

.ar-band {
	position: relative;
	padding-block: clamp(3rem, 7vw, 5.5rem);
	overflow: hidden;
}

.ar-band__inner {
	position: relative;
	max-width: 68rem;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

.ar-band__field {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ar-band--wash {
	background: var(--wp--preset--color--wash);
}

/*
 * The method band stays dark in both schemes, so it is pinned to the dark
 * scheme's own values rather than the live preset tokens. Those values were
 * already chosen to avoid halation, which a plain #000 band would cause.
 */
.ar-band--ink {
	background: var(--wp--custom--scheme--dark--surface);
	color: var(--wp--custom--scheme--dark--ink);
}

.ar-band--ink .ar-shead__title,
.ar-band--ink .ar-step__name {
	color: var(--wp--custom--scheme--dark--ink);
}

.ar-band--ink .ar-shead__note,
.ar-band--ink .ar-step__desc {
	color: var(--wp--custom--scheme--dark--ink-soft);
}

.ar-band--ink .ar-band__field {
	color: var(--wp--custom--scheme--dark--akhlaq);
}

.ar-band--ink .ar-girih {
	opacity: 0.09;
}

.ar-band__go {
	margin: var(--wp--preset--spacing--60) 0 0;
}

/* --- section headings ---------------------------------------------------- */

.ar-shead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.ar-band--ink .ar-shead {
	border-bottom-color: rgba(225, 223, 220, 0.18);
}

.ar-shead__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--head);
	line-height: 1.28;
	color: var(--wp--preset--color--ink);
}

.ar-shead__note {
	flex: 1 1 22rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
	max-width: 46ch;
}

.ar-shead--wide {
	display: block;
}

.ar-shead--wide .ar-shead__note {
	margin-top: var(--wp--preset--spacing--30);
	max-width: 58ch;
}

.ar-shead__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	flex: none;
	font-family: var(--wp--preset--font-family--strong);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
}

.ar-shead__more svg {
	transition: transform var(--ar-sweep) var(--ar-ease);
}

.ar-shead__more:hover svg,
.ar-shead__more:focus-visible svg {
	transform: translateX(0.22em);
}

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

.ar-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.ar-hero__field {
	position: absolute;
	inset: 0;
	color: var(--wp--preset--color--akhlaq);
	pointer-events: none;
}

.ar-hero__inner {
	position: relative;
	display: grid;
	gap: var(--wp--preset--spacing--60);
	align-items: center;
	max-width: 68rem;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

@media (min-width: 52rem) {
	.ar-hero__inner {
		grid-template-columns: 1.12fr 0.88fr;
		gap: clamp(2rem, 5vw, 4rem);
	}
}

.ar-hero__mark {
	display: block;
	margin-bottom: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--akhlaq);
}

.ar-hero__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.1rem, 6.2vw, 3.6rem);
	line-height: 1.22;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--ink);
}

.ar-hero__lede {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.75;
	color: var(--wp--preset--color--ink-soft);
	max-width: 42ch;
}

.ar-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--50) 0 0;
}

.ar-hero__art {
	margin: 0;
	overflow: hidden;
	border-radius: 2px;
	background: var(--wp--preset--color--wash);
}

.ar-hero__art img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

@media (max-width: 51.9375rem) {
	.ar-hero__art img {
		aspect-ratio: 16 / 10;
	}
}

/* --- kicker and byline --------------------------------------------------- */

.ar-kicker {
	margin: 0;
	font-family: var(--wp--preset--font-family--strong);
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: 0.04em;
	color: var(--ar-pillar, var(--wp--preset--color--muted));
}

.ar-kicker a {
	color: inherit;
	text-decoration: none;
}

.ar-kicker a:hover,
.ar-kicker a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.ar-kicker--akhlaq  { --ar-pillar: var(--wp--preset--color--akhlaq); }
.ar-kicker--chinta  { --ar-pillar: var(--wp--preset--color--chinta); }
.ar-kicker--khandan { --ar-pillar: var(--wp--preset--color--khandan); }

.ar-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4em;
	margin: var(--wp--preset--spacing--30) 0 0;
	font-family: var(--wp--preset--font-family--strong);
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--muted);
}

.ar-byline a {
	color: inherit;
	text-decoration: none;
}

.ar-byline a:hover,
.ar-byline a:focus-visible {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.ar-byline__dot {
	color: var(--wp--preset--color--faint);
}

/* --- the three pillars --------------------------------------------------- */

.ar-pillars {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
	.ar-pillars {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ar-pillar {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--rule);
	border-top: 2px solid var(--ar-pillar);
	background: var(--wp--preset--color--surface);
	text-decoration: none;
	color: inherit;
	transition: background var(--ar-sweep) var(--ar-ease),
		border-color var(--ar-sweep) var(--ar-ease),
		transform var(--ar-sweep) var(--ar-ease);
}

.ar-pillar:hover,
.ar-pillar:focus-visible {
	background: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--faint);
	border-top-color: var(--ar-pillar);
	transform: translateY(-2px);
}

.ar-pillar--akhlaq  { --ar-pillar: var(--wp--preset--color--akhlaq); }
.ar-pillar--chinta  { --ar-pillar: var(--wp--preset--color--chinta); }
.ar-pillar--khandan { --ar-pillar: var(--wp--preset--color--khandan); }

.ar-pillar__icon {
	display: block;
	margin-bottom: var(--wp--preset--spacing--40);
	color: var(--ar-pillar);
}

.ar-pillar__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--subhead);
	line-height: 1.34;
	color: var(--ar-pillar);
}

.ar-pillar__desc {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.7;
}

.ar-pillar__count {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-family: var(--wp--preset--font-family--strong);
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--muted);
}

.ar-pillar.is-empty {
	cursor: default;
}

.ar-pillar.is-empty .ar-pillar__name,
.ar-pillar.is-empty .ar-pillar__icon {
	color: var(--wp--preset--color--muted);
}

.ar-pillar.is-empty:hover {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--rule);
	border-top-color: var(--ar-pillar);
	transform: none;
}

/* --- the lead article ---------------------------------------------------- */

.ar-lead {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

@media (min-width: 48rem) {
	.ar-lead {
		grid-template-columns: 1.05fr 1fr;
		gap: var(--wp--preset--spacing--60);
		align-items: center;
	}
}

.ar-lead__media,
.ar-card__media {
	display: block;
	overflow: hidden;
	background: var(--wp--preset--color--wash);
	border-radius: 2px;
}

.ar-lead__img,
.ar-card__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transform: scale(1);
	transition: transform 0.6s var(--ar-ease);
}

.ar-lead__media:hover .ar-lead__img,
.ar-card:hover .ar-card__img {
	transform: scale(1.03);
}

.ar-lead__title {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--title);
	line-height: 1.24;
}

.ar-lead__sub {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.55;
}

.ar-lead__excerpt {
	margin: var(--wp--preset--spacing--30) 0 0;
	color: var(--wp--preset--color--ink-soft);
	max-width: 46ch;
}

/* --- the recent grid ----------------------------------------------------- */

.ar-grid {
	display: grid;
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.ar-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.ar-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ar-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.ar-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.ar-card__title {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--subhead);
	line-height: 1.32;
}

.ar-card__excerpt {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.7;
}

.ar-card .ar-byline {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}

@media (prefers-reduced-motion: reduce) {
	.ar-lead__img,
	.ar-card__img,
	.ar-pillar,
	.ar-shead__more svg {
		transition: none;
	}

	.ar-lead__media:hover .ar-lead__img,
	.ar-card:hover .ar-card__img,
	.ar-pillar:hover {
		transform: none;
	}
}

/* --- series -------------------------------------------------------------- */

.ar-series {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 44rem) {
	.ar-series {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ar-series__link {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 2px;
	background: var(--wp--preset--color--surface);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--ar-sweep) var(--ar-ease),
		background var(--ar-sweep) var(--ar-ease);
}

.ar-series__link:hover,
.ar-series__link:focus-visible {
	border-color: var(--wp--preset--color--faint);
	background: var(--wp--preset--color--paper);
}

.ar-series__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--wash);
	color: var(--wp--preset--color--akhlaq);
}

.ar-series__text {
	flex: 1 1 auto;
	min-width: 0;
}

.ar-series__name {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
}

.ar-series__count {
	display: block;
	margin-top: 0.25em;
	font-family: var(--wp--preset--font-family--strong);
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--muted);
}

.ar-series__go {
	flex: none;
	color: var(--wp--preset--color--faint);
	transition: transform var(--ar-sweep) var(--ar-ease),
		color var(--ar-sweep) var(--ar-ease);
}

.ar-series__link:hover .ar-series__go,
.ar-series__link:focus-visible .ar-series__go {
	transform: translateX(0.25em);
	color: var(--wp--preset--color--ink);
}

/* --- the six steps ------------------------------------------------------- */

.ar-steps {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

@media (min-width: 40rem) {
	.ar-steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.ar-steps {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ar-step {
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid rgba(225, 223, 220, 0.18);
}

.ar-step__num {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--subhead);
	line-height: 1;
	color: var(--wp--custom--scheme--dark--akhlaq);
}

.ar-step__name {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.35;
}

.ar-step__desc {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
}

/* --- the dawah offer ----------------------------------------------------- */

.ar-offer {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

@media (min-width: 48rem) {
	.ar-offer {
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--60);
	}
}

.ar-offer__art {
	margin: 0;
	overflow: hidden;
	border-radius: 2px;
	background: var(--wp--preset--color--wash);
}

.ar-offer__art img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.ar-offer__icon {
	display: block;
	margin-bottom: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--akhlaq);
}

.ar-offer__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--head);
	line-height: 1.28;
	color: var(--wp--preset--color--ink);
}

.ar-offer__body p {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--ink-soft);
	max-width: 46ch;
}

.ar-offer__terms {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted) !important;
}

/* --- contributors -------------------------------------------------------- */

.ar-people {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ar-people__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.6em 1.05em;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 100px;
	background: var(--wp--preset--color--surface);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--ar-sweep) var(--ar-ease),
		background var(--ar-sweep) var(--ar-ease);
}

.ar-people__link:hover,
.ar-people__link:focus-visible {
	border-color: var(--wp--preset--color--faint);
	background: var(--wp--preset--color--paper);
}

.ar-people__icon {
	flex: none;
	color: var(--wp--preset--color--faint);
}

.ar-people__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
}

.ar-people__count {
	font-family: var(--wp--preset--font-family--strong);
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--muted);
}

@media (prefers-reduced-motion: reduce) {
	.ar-series__link,
	.ar-series__go,
	.ar-people__link {
		transition: none;
	}

	.ar-series__link:hover .ar-series__go {
		transform: none;
	}
}

/* --- index grids and the article hero ------------------------------------
   The core query loop renders the archives, so these rules only align it
   with the hand-built cards on the front page. One card pattern, wherever a
   reader meets it. */

.ar-list {
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.ar-list .wp-block-post {
	display: flex;
	flex-direction: column;
}

.ar-list .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	border-radius: 2px;
	background: var(--wp--preset--color--wash);
}

.ar-list .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	transform: scale(1);
	transition: transform 0.6s var(--ar-ease);
}

.ar-list .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

.ar-list .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	line-height: 1.32;
}

.ar-list .wp-block-post-title a {
	text-decoration: none;
	color: inherit;
}

.ar-list .wp-block-post-title a:hover,
.ar-list .wp-block-post-title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

.ar-list .wp-block-post-excerpt {
	color: var(--wp--preset--color--ink-soft);
}

.ar-list .wp-block-post-excerpt__excerpt {
	line-height: 1.7;
}

.ar-list .wp-block-post-date {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--strong);
}

.ar-hero {
	overflow: hidden;
	border-radius: 2px;
	background: var(--wp--preset--color--wash);
}

.ar-hero img {
	display: block;
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.ar-list .wp-block-post-featured-image img {
		transition: none;
	}

	.ar-list .wp-block-post:hover .wp-block-post-featured-image img {
		transform: none;
	}
}


/* Core renders the archive kicker as plain links; match the front page so the
   same information looks the same wherever a reader meets it. */
.ar-list .wp-block-post-terms {
	font-family: var(--wp--preset--font-family--strong);
	letter-spacing: 0.04em;
}

.ar-list .wp-block-post-terms a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.ar-list .wp-block-post-terms a:hover,
.ar-list .wp-block-post-terms a:focus-visible {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.ar-list .wp-block-post-excerpt {
	margin-top: 0;
}

.ar-list .wp-block-post-excerpt p {
	margin-top: 0;
}