/**
 * Glossary: the bar, the index and the entry pages.
 *
 * Loaded on the Glossary page and its children, after article.css. Palette
 * tokens only, so the Night variation and the reader's toggle apply.
 */

.boi-glossary-page,
.boi-gbar {
	--boi-ink: var(--wp--preset--color--contrast, #0D2B4E);
	--boi-mute: var(--wp--preset--color--accent-5, #4A5A6E);
	--boi-blue: var(--wp--preset--color--accent-1, #1F6FCC);
	--boi-gold: var(--wp--preset--color--accent-2, #E8B33C);
	--boi-tint: var(--wp--preset--color--accent-3, #EAF2FB);
	--boi-rule: var(--wp--preset--color--accent-6, #D9E3EF);
	--boi-base: var(--wp--preset--color--base, #fff);
}

/* The bar: the way back to the index, search and the letters. It stays in
   view, so any term is one step away from wherever the reader is. */
.boi-gbar {
	position: sticky;
	inset-block-start: var(--wp-admin--admin-bar--height, 0px);
	z-index: 20;
	background: color-mix(in srgb, var(--boi-base) 94%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-block-end: 1px solid var(--boi-rule);
}

.boi-gbar__inner {
	font-family: var(--wp--preset--font-family--ysabeau-office, sans-serif);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1.25rem;
	max-inline-size: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding: 0.6rem var(--wp--preset--spacing--30, 1rem);
}

.boi-gbar__brand {
	font-family: var(--wp--preset--font-family--platypi, serif);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--boi-ink);
	text-decoration: none;
}

.boi-gbar__brand::before {
	content: "";
	display: inline-block;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	margin-inline-end: 0.5rem;
	border-radius: 50%;
	background: var(--boi-gold);
}

.boi-gbar__search {
	position: relative;
	flex: 1 1 14rem;
	max-inline-size: 22rem;
}

.boi-gbar__search input {
	inline-size: 100%;
	padding: 0.5rem 0.9rem;
	font: inherit;
	font-size: 0.95rem;
	color: var(--boi-ink);
	background: var(--boi-tint);
	border: 1px solid transparent;
	border-radius: 999px;
}

.boi-gbar__search input:focus {
	outline: 2px solid var(--boi-blue);
	outline-offset: 1px;
	background: var(--boi-base);
	border-color: var(--boi-rule);
}

.boi-gbar__results {
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(100% + 0.35rem);
	margin: 0;
	padding: 0.3rem;
	list-style: none;
	background: var(--boi-base);
	border: 1px solid var(--boi-rule);
	border-radius: var(--wp--custom--radius--md, 10px);
	box-shadow: 0 10px 30px rgb(0 0 0 / 0.12);
}

.boi-gbar__results li a {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.45rem 0.65rem;
	color: var(--boi-ink);
	text-decoration: none;
	border-radius: 8px;
}

.boi-gbar__results li a small {
	color: var(--boi-mute);
}

.boi-gbar__results li a:hover,
.boi-gbar__results li a[aria-selected="true"] {
	background: var(--boi-tint);
}

.boi-gbar__az {
	flex: 1 1 100%;
	min-inline-size: 0;
	overflow-x: auto;
	scrollbar-width: thin;
}

.boi-gbar__az ul {
	display: flex;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.boi-gbar__az a {
	display: grid;
	place-items: center;
	min-inline-size: 1.9rem;
	block-size: 1.9rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--boi-mute);
	text-decoration: none;
	border-radius: 8px;
}

.boi-gbar__az a:hover,
.boi-gbar__az a:focus-visible {
	color: var(--boi-blue);
	background: var(--boi-tint);
}

.boi-gbar__az a.is-active {
	color: var(--boi-base);
	background: var(--boi-blue);
}

@media (min-width: 62em) {
	.boi-gbar__az {
		flex: 0 1 auto;
		margin-inline-start: auto;
	}
}

/* The index page is wide; entries stay in a reading column. */
.boi-glossary-index .boi-glossary-page > .wp-block-post-content,
.boi-glossary-index .boi-glossary-page > .boi-article__head {
	max-inline-size: var(--wp--style--global--wide-size, 1200px);
}

.boi-glossary-index .boi-glossary-page > .boi-article__head > * {
	max-inline-size: none;
}

.boi-glossary-index .boi-glossary-page .wp-block-post-content > p {
	max-inline-size: 44rem;
	margin-inline: 0;
	font-size: 1.1rem;
	text-align: start;
}

/* The tools: kind filters and the count. */
.boi-glossary {
	max-inline-size: none;
	margin-block-start: 1.5rem;
}

.boi-glossary__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
	margin-block-end: 2rem;
}

.boi-glossary__tools[hidden] {
	display: none;
}

.boi-glossary__types {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.boi-chip {
	padding: 0.3rem 0.85rem;
	font: inherit;
	font-size: 0.9rem;
	color: var(--boi-ink);
	background: transparent;
	border: 1px solid var(--boi-rule);
	border-radius: 999px;
	cursor: pointer;
}

.boi-chip span {
	color: var(--boi-mute);
	font-size: 0.8em;
}

.boi-chip:hover {
	background: var(--boi-tint);
}

.boi-chip.is-active {
	color: var(--boi-base);
	background: var(--boi-blue);
	border-color: var(--boi-blue);
}

.boi-chip.is-active span {
	color: inherit;
	opacity: 0.8;
}

.boi-glossary__count {
	margin: 0 0 0 auto;
	font-size: 0.9rem;
	color: var(--boi-mute);
}

.boi-glossary__reset {
	padding: 0.3rem 0.85rem;
	font: inherit;
	font-size: 0.9rem;
	color: var(--boi-blue);
	background: none;
	border: 1px solid var(--boi-blue);
	border-radius: 999px;
	cursor: pointer;
}

.boi-glossary__reset[hidden] {
	display: none;
}

.boi-glossary__empty {
	padding: 2rem 0;
	color: var(--boi-mute);
}

/* The two parts of the index: terms, then people. */
.boi-glossary__part {
	margin: 3.5rem 0 1.5rem;
	padding-block-end: 0.5rem;
	border-block-end: 2px solid var(--boi-blue);
	font-size: 1.9rem;
	line-height: 1.2;
	scroll-margin-block-start: 8rem;
}

.boi-glossary__part:first-of-type {
	margin-block-start: 1.5rem;
}

.boi-glossary__part[hidden] {
	display: none;
}

/* A letter and its entries, as cards. */
.boi-glossary__group {
	margin-block-end: 3rem;
	scroll-margin-block-start: 8rem;
}

.boi-glossary__group[hidden] {
	display: none;
}

.boi-glossary__letter {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0 0 1rem;
	font-size: 2.4rem;
	line-height: 1;
	color: var(--boi-blue);
}

.boi-glossary__letter::after {
	content: "";
	order: 1;
	flex: 1;
	align-self: center;
	block-size: 1px;
	background: var(--boi-rule);
}

.boi-glossary__n {
	font-family: var(--wp--preset--font-family--ysabeau-office, sans-serif);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--boi-mute);
}

.boi-glossary__top {
	order: 2;
	font-family: var(--wp--preset--font-family--ysabeau-office, sans-serif);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--boi-mute);
	text-decoration: none;
}

.boi-glossary__top::before {
	content: "\2191\00a0";
}

.boi-glossary__top:hover {
	color: var(--boi-blue);
}

.boi-glossary__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
	gap: 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.boi-glossary__item {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-content: start;
	column-gap: 0.75rem;
	padding: 1rem 1.1rem;
	background: var(--boi-tint);
	border: 1px solid var(--boi-rule);
	border-radius: var(--wp--custom--radius--md, 10px);
	transition: border-color 0.15s, transform 0.15s;
}

.boi-glossary__item[hidden] {
	display: none;
}

.boi-glossary__item:not(.is-alias):hover,
.boi-glossary__item:not(.is-alias):focus-within {
	border-color: var(--boi-blue);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.boi-glossary__item {
		transition: none;
	}

	.boi-glossary__item:hover {
		transform: none;
	}
}

.boi-glossary__term {
	font-family: var(--wp--preset--font-family--platypi, serif);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--boi-ink);
	text-decoration: none;
}

/* The whole card is the link. */
.boi-glossary__term::after {
	content: "";
	position: absolute;
	inset: 0;
}

.boi-glossary__term:hover {
	color: var(--boi-blue);
}

.boi-glossary__ar {
	grid-column: 2;
	grid-row: 1;
	font-family: "BOI Arabic", "Noto Naskh Arabic", serif;
	font-size: 1.3rem;
	color: var(--boi-mute);
}

.boi-article .boi-glossary__def {
	grid-column: 1 / -1;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin: 0.35rem 0 0;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--boi-mute);
	text-align: start;
	hyphens: manual;
}

/* Another name for an entry: a short line pointing to it. */
.boi-glossary__item.is-alias {
	align-items: baseline;
	padding: 0.6rem 1.1rem;
	background: transparent;
	border-style: dashed;
}

.boi-glossary__name {
	font-family: var(--wp--preset--font-family--platypi, serif);
	font-weight: 600;
	color: var(--boi-mute);
}

.boi-glossary__see {
	grid-column: 2;
	grid-row: 1;
	font-size: 0.85rem;
	color: var(--boi-mute);
}

.boi-glossary__see a {
	color: var(--boi-blue);
}

.boi-glossary__type,
.boi-article .boi-term__kind {
	display: inline-block;
	margin-inline-start: 0.6rem;
	padding: 0.05rem 0.5rem;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-5, #4A5A6E);
	background: var(--wp--preset--color--accent-3, #EAF2FB);
	border-radius: 999px;
	vertical-align: middle;
}

.boi-article .boi-term__kind {
	margin: 0.4rem 0 0;
}

/* An entry. */
.boi-article .boi-term {
	margin-block-end: 0.5rem;
}

.boi-article .boi-term__script {
	margin: 0;
	font-family: "BOI Arabic", "Noto Naskh Arabic", serif;
	font-weight: 500;
	font-size: clamp(2.6rem, 2rem + 3vw, 3.8rem);
	line-height: 1.3;
	color: var(--wp--preset--color--accent-1, #1F6FCC);
	text-align: left;
}

/* A verified Quranic quotation, not a name or a general formula: swap to
 * the Uthmanic face. Size, colour and layout stay the same as any other
 * entry's script display. */
.boi-article .boi-term__script.boi-script-quran {
	font-family: "BOI Quran", "BOI Arabic", serif;
}

.boi-article .boi-term__translit {
	margin: 0;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--accent-5, #4A5A6E);
	text-align: start;
}

.boi-article .boi-term__def {
	margin-block: 1rem 0.5rem;
	padding-inline-start: 1rem;
	border-inline-start: 3px solid var(--wp--preset--color--accent-2, #E8B33C);
	font-family: var(--wp--preset--font-family--platypi, serif);
	font-size: 1.25em;
	line-height: 1.4;
	text-align: start;
	hyphens: manual;
}

.boi-article .wp-block-post-content > p.boi-term__def:first-of-type::first-letter {
	all: unset;
}

.boi-article .boi-term__misread {
	margin-block: 1.75rem;
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--accent-3, #EAF2FB);
	border-radius: var(--wp--custom--radius--md, 10px);
}

.boi-article .boi-term__label {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-5, #4A5A6E);
	text-align: start;
}

.boi-article .boi-term__misread p:last-child {
	margin: 0;
	font-style: italic;
}

.boi-article .boi-term__related {
	display: grid;
	gap: 1.5rem;
	margin-block: 3rem 1.5rem;
	padding: 1.75rem;
	background: var(--boi-tint);
	border: 1px solid var(--boi-rule);
	border-block-start: 3px solid var(--boi-gold);
	border-radius: var(--wp--custom--radius--lg, 14px);
}

.boi-article .boi-term__related > .boi-term__label {
	margin: 0;
}

.boi-article .boi-term__related h3 {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--ysabeau-office, sans-serif);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--boi-ink);
}

.boi-article .boi-term__related ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.boi-article .boi-term__related a {
	text-decoration: none;
}

/* Related terms: chips. */
.boi-article .boi-term__group--terms ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.boi-article .boi-term__group--terms a {
	display: inline-block;
	padding: 0.3rem 0.9rem;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--boi-ink);
	background: var(--wp--preset--color--base, #FFFFFF);
	border: 1px solid var(--boi-rule);
	border-radius: 999px;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.boi-article .boi-term__group--terms a:hover,
.boi-article .boi-term__group--terms a:focus-visible {
	color: var(--wp--preset--color--base, #FFFFFF);
	background: var(--boi-blue);
	border-color: var(--boi-blue);
}

/* Related articles: a list of cards. */
.boi-article .boi-term__group--reads ul {
	display: grid;
	gap: 0.5rem;
	counter-reset: boi-read;
}

.boi-article .boi-term__group--reads li {
	counter-increment: boi-read;
}

.boi-article .boi-term__group--reads a {
	display: grid;
	grid-template-columns: 2rem 1fr auto;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	font-family: var(--wp--preset--font-family--platypi, serif);
	font-size: 1.05rem;
	line-height: 1.35;
	color: var(--boi-ink);
	background: var(--wp--preset--color--base, #FFFFFF);
	border: 1px solid var(--boi-rule);
	border-radius: var(--wp--custom--radius--md, 10px);
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.boi-article .boi-term__group--reads a::before {
	content: counter(boi-read, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--ysabeau-office, sans-serif);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--boi-gold);
}

.boi-article .boi-term__group--reads a::after {
	content: "\2192";
	color: var(--boi-mute);
	transition: transform 0.15s ease, color 0.15s ease;
}

.boi-article .boi-term__group--reads a:hover,
.boi-article .boi-term__group--reads a:focus-visible {
	border-color: var(--boi-blue);
	color: var(--boi-blue);
}

.boi-article .boi-term__group--reads a:hover::after,
.boi-article .boi-term__group--reads a:focus-visible::after {
	color: var(--boi-blue);
	transform: translateX(3px);
}

/* Back to the index, and to the top. */
.boi-article .boi-term__back {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--boi-rule);
}

.boi-article .boi-term__back a {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 1rem;
	font-family: var(--wp--preset--font-family--ysabeau-office, sans-serif);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--boi-ink);
	text-decoration: none;
	border: 1px solid var(--boi-rule);
	border-radius: 999px;
	background: var(--wp--preset--color--base, #FFFFFF);
}

.boi-article .boi-term__back a:first-child {
	color: var(--wp--preset--color--base, #FFFFFF);
	background: var(--boi-ink);
	border-color: var(--boi-ink);
}

.boi-article .boi-term__back a:hover,
.boi-article .boi-term__back a:focus-visible {
	border-color: var(--boi-blue);
	color: var(--boi-blue);
	background: var(--wp--preset--color--base, #FFFFFF);
}

@media (prefers-reduced-motion: reduce) {
	.boi-article .boi-term__related a,
	.boi-article .boi-term__related a::after {
		transition: none;
	}
}

@media (max-width: 600px) {
	.boi-article .boi-term__related {
		padding: 1.25rem;
	}

	.boi-article .boi-term__group--reads a {
		grid-template-columns: 1.6rem 1fr auto;
		font-size: 1rem;
	}

	.boi-article .boi-term__pager {
		grid-template-columns: 1fr;
	}

	.boi-article .boi-term__next {
		grid-column: 1;
	}
}

/* An entry's head, as a panel. */
.boi-article .boi-term:has(.boi-term__script),
.boi-article .boi-term:has(.boi-term__translit) {
	padding: 1.5rem 1.75rem;
	background: var(--boi-tint);
	border: 1px solid var(--boi-rule);
	border-radius: var(--wp--custom--radius--lg, 14px);
}

/* On to the next term. */
.boi-article .boi-term__pager {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-block: 2rem 1rem;
}

.boi-article .boi-term__pager a {
	display: grid;
	gap: 0.15rem;
	padding: 0.9rem 1.1rem;
	font-family: var(--wp--preset--font-family--platypi, serif);
	font-weight: 600;
	color: var(--boi-ink);
	text-decoration: none;
	border: 1px solid var(--boi-rule);
	border-radius: var(--wp--custom--radius--md, 10px);
}

.boi-article .boi-term__pager a:hover {
	border-color: var(--boi-blue);
	color: var(--boi-blue);
}

.boi-article .boi-term__pager span {
	font-family: var(--wp--preset--font-family--ysabeau-office, sans-serif);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--boi-mute);
}

.boi-article .boi-term__next {
	grid-column: 2;
	text-align: end;
}

/* The photograph at the head of the index and of each entry. */
.boi-glossary__hero,
.boi-article .boi-term-hero {
	margin: 0 0 2rem;
}

.boi-glossary__hero img,
.boi-article .boi-term-hero img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--lg, 14px);
}

.boi-article .boi-term-hero {
	max-inline-size: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30, 1rem);
}

.boi-article .boi-term-hero img {
	aspect-ratio: 3 / 1;
}

.boi-glossary__hero figcaption,
.boi-article .boi-term-hero figcaption {
	margin-block-start: 0.4rem;
	font-size: 0.75rem;
	color: var(--boi-mute);
	text-align: end;
}

.boi-glossary__hero figcaption a,
.boi-article .boi-term-hero figcaption a {
	color: inherit;
}

/* The intro is plain text; no drop cap. */
.boi-article.boi-glossary-page .wp-block-post-content > p:first-of-type::first-letter {
	all: unset;
}

/* Kinds of entry, as photograph tiles that filter the list. */
.boi-glossary__types {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: 0.75rem;
	inline-size: 100%;
}

.boi-glossary__tools {
	flex-direction: column;
	align-items: stretch;
}

.boi-chip.boi-kind {
	position: relative;
	display: block;
	overflow: hidden;
	padding: 0;
	min-block-size: 6.5rem;
	color: #fff;
	text-align: start;
	background: var(--boi-ink);
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--md, 10px);
}

.boi-kind__img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	opacity: 0.75;
	transition: opacity 0.15s, transform 0.3s;
}

.boi-chip.boi-kind::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(0 0 0 / 0.65), rgb(0 0 0 / 0.05) 70%);
}

.boi-kind__label,
.boi-kind__n {
	position: absolute;
	z-index: 1;
	inset-block-end: 0.55rem;
	font-weight: 600;
}

.boi-kind__label {
	inset-inline-start: 0.75rem;
	font-family: var(--wp--preset--font-family--platypi, serif);
	font-size: 1.05rem;
}

.boi-kind__n {
	inset-inline-end: 0.75rem;
	font-size: 0.85rem;
	opacity: 0.85;
}

.boi-chip.boi-kind:hover .boi-kind__img,
.boi-chip.boi-kind.is-active .boi-kind__img {
	opacity: 1;
}

.boi-chip.boi-kind:hover .boi-kind__img {
	transform: scale(1.04);
}

.boi-chip.boi-kind.is-active {
	border-color: var(--boi-gold);
	background: var(--boi-ink);
}

.boi-chip.boi-kind:focus-visible {
	outline: 3px solid var(--boi-blue);
	outline-offset: 2px;
}

.boi-glossary__count {
	margin: 0;
	text-align: end;
}

/* Cards: kind on top, name, other names, then the definition. */
.boi-glossary__item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1.1rem 1.2rem 1.2rem;
	text-align: start;
	hyphens: manual;
}

.boi-glossary__item .boi-glossary__type {
	order: -1;
	align-self: flex-start;
	margin: 0 0 0.3rem;
}

.boi-glossary__item .boi-glossary__term {
	padding-inline-end: 3.5rem;
	font-size: 1.25rem;
	line-height: 1.2;
	text-align: start;
	hyphens: manual;
}

.boi-glossary__item .boi-glossary__ar {
	position: absolute;
	inset-block-start: 0.8rem;
	inset-inline-end: 1.1rem;
	font-size: 1.6rem;
	line-height: 1.3;
}

.boi-glossary__aka {
	font-size: 0.82rem;
	color: var(--boi-mute);
	text-align: start;
}

.boi-article .boi-glossary__def {
	margin-block-start: 0.3rem;
}

@media (prefers-reduced-motion: reduce) {
	.boi-kind__img {
		transition: none;
	}

	.boi-chip.boi-kind:hover .boi-kind__img {
		transform: none;
	}
}

/* Refinements: hero height, tile labels, card header. */
.boi-glossary__hero img {
	aspect-ratio: 3.4 / 1;
}

.boi-chip.boi-kind span {
	color: #fff;
	font-size: inherit;
}

.boi-chip.boi-kind .boi-kind__n {
	font-size: 0.85rem;
}

.boi-chip.boi-kind::after {
	background: linear-gradient(to top, rgb(0 0 0 / 0.78), rgb(0 0 0 / 0.1) 75%);
}

.boi-chip.boi-kind .boi-kind__label {
	font-size: 1.1rem;
	text-shadow: 0 1px 3px rgb(0 0 0 / 0.5);
}

.boi-glossary__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 0.75rem;
	row-gap: 0.15rem;
	align-content: start;
}

.boi-glossary__item .boi-glossary__type {
	grid-column: 1;
	grid-row: 1;
	order: 0;
	margin: 0 0 0.2rem;
}

.boi-glossary__item .boi-glossary__term {
	grid-column: 1;
	grid-row: 2;
	padding-inline-end: 0;
}

.boi-glossary__item .boi-glossary__ar {
	position: static;
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: start;
	justify-self: end;
	max-inline-size: 11rem;
	font-size: 1.4rem;
	line-height: 1.45;
	text-align: end;
}

.boi-glossary__item .boi-glossary__aka {
	grid-column: 1 / -1;
}

.boi-article .boi-glossary__item .boi-glossary__def {
	grid-column: 1 / -1;
}

.boi-glossary__item .boi-glossary__ar {
	max-inline-size: 42%;
	font-size: 1.3rem;
}

/* The basis of the terms, under the index photograph. */
.boi-article .boi-glossary__basis {
	max-inline-size: 44rem;
	margin: 0 0 1.5rem;
	font-size: 0.95rem;
	color: var(--boi-mute);
	text-align: start;
}

.boi-article .boi-term__source {
	margin-block-start: 1.5rem;
	font-size: 0.85rem;
	color: var(--boi-mute);
	text-align: start;
}

/* A photograph at the head of each card. */
.boi-glossary__item {
	overflow: hidden;
	padding-block-start: 0;
}

.boi-glossary__item .boi-glossary__thumb {
	grid-column: 1 / -1;
	display: block;
	inline-size: calc(100% + 2.4rem);
	max-inline-size: none;
	block-size: 7rem;
	margin: 0 -1.2rem 0.85rem;
	object-fit: cover;
}

.boi-glossary__item .boi-glossary__type,
.boi-glossary__item .boi-glossary__term,
.boi-glossary__item .boi-glossary__ar {
	grid-row: auto;
}

.boi-glossary__item .boi-glossary__type {
	grid-row: 2;
}

.boi-glossary__item .boi-glossary__term {
	grid-row: 3;
}

.boi-glossary__item .boi-glossary__ar {
	grid-row: 2 / span 2;
}

/* A long Arabic phrase takes its own line under the name. */
.boi-glossary__item.has-long-ar .boi-glossary__ar {
	grid-column: 1 / -1;
	grid-row: auto;
	justify-self: stretch;
	max-inline-size: none;
	margin-block: 0.15rem 0.2rem;
	font-size: 1.25rem;
}

.boi-glossary__item.has-long-ar .boi-glossary__term {
	grid-column: 1 / -1;
}