/*
 * Staff directory.
 *
 * Fifty-seven people in a single column with a photograph each is 17,651px of
 * page — twenty screens to pass one list. The cards go in a grid, so the same
 * list is about a third of that, and the search and the filter mean most people
 * never scroll it at all.
 */

.jmns-directory {
	margin-block-start: var(--wp--preset--spacing--40, 1.5rem);
}

/*
 * The sentence the page opens with.
 *
 * Without it the heading ran straight into a search box, which reads as a tool
 * somebody embedded rather than a page the department publishes. One line says
 * what the list is before asking what you want from it.
 *
 * Held to about 55 characters: it sits above a 1200px grid and a single line
 * run to that width reads as a stray caption.
 *
 * Closer to the title than to the search, so it reads as the heading's sentence
 * rather than as a caption floating between the two. 20px above it and 32px
 * below keeps that relationship at the tighter rhythm; the two values have to
 * move together or the sentence drifts to the middle and belongs to neither.
 */
.jmns-directory__intro {
	max-inline-size: 55ch;
	margin-block: 0 var(--wp--preset--spacing--60, 2rem);
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	line-height: 1.6;
}

/* ------------------------------------------------------------ controls -- */

.jmns-directory__controls {
	display: flex;
	flex-direction: column;
	/* The filters are a second decision, not a caption under the first. 20px is
	   the tightest that still reads that way — at 16 they became the caption. */
	gap: 1.25rem;
	margin-block-end: var(--wp--preset--spacing--40, 1.5rem);
}

/*
 * The search takes the measure, not a quarter of it.
 *
 * At 26rem the field sat in the left third of a 1200px page with the filters
 * under it and nothing to the right — the compression the revision names. It
 * spans the shell now, which is also what makes it read as the page's own
 * control rather than as a widget parked in a corner.
 */
.jmns-directory__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
	max-inline-size: none;
}

.jmns-directory__field label {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.jmns-directory .jmns-directory__search {
	min-block-size: 44px;
	padding-inline: var(--wp--preset--spacing--30, 0.75rem);
	border: 1px solid var(--wp--preset--color--border-strong, #6F8D7A);
	border-radius: var(--r-pill, 999px);
	background-color: var(--wp--preset--color--surface, #fff);
	/* Under 16px iOS zooms the page when the field takes focus. */
	font-size: max(1rem, 16px);
}

.jmns-directory__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

/*
 * Chips, not a select. Five divisions and "everyone" fit on screen, and a
 * select would hide the whole choice behind a click to save room the page is
 * not short of.
 */
.jmns-directory__chip {
	min-block-size: 36px;
	padding-inline: var(--wp--preset--spacing--30, 0.75rem);
	border: 1px solid var(--wp--preset--color--border-strong, #6F8D7A);
	border-radius: var(--r-pill, 999px);
	/* A ground of its own, so an unselected chip reads as a control at rest
	   rather than as text that happens to have a ring drawn round it. */
	background-color: var(--wp--preset--color--surface-muted, #F1F3F1);
	color: var(--wp--preset--color--text-primary, #1F2925);
	font: inherit;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--t-fast, 150ms) var(--ease, ease);
}

.jmns-directory__chip:hover {
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
	box-shadow: none;
}

.jmns-directory__chip.is-active {
	background-color: var(--wp--preset--color--interactive, #245746);
	border-color: var(--wp--preset--color--interactive, #245746);
	color: var(--wp--preset--color--surface, #fff);
}

.jmns-directory__count {
	margin-block: 0 var(--wp--preset--spacing--40, 1.5rem);
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

/* -------------------------------------------------------------- groups -- */

.jmns-directory__group[hidden] {
	display: none;
}

/*
 * The division and how many people are in it, on one line.
 *
 * The count belongs beside the heading rather than only at the top of the page:
 * once a reader has filtered to Bahagian Falak, "57 pegawai" up in the controls
 * is answering a question they have stopped asking.
 */
.jmns-directory__group-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	/*
	 * A tight row gap, which only has an effect once the count wraps. Below
	 * about 430px a long division name takes the whole row and pushes the pill
	 * onto a second line; at 8px the rule then sat 47px under the heading
	 * instead of the 12 it is set to. The pill is part of the head, so the
	 * padding measures from it — this just stops the head opening up when it
	 * happens.
	 */
	gap: 0.25rem 1rem;
	/*
	 * 40px above the first division, 24 below the rule: the rule belongs to the
	 * heading, and the grid needs to start clear of both.
	 *
	 * This used to be 64px for every division, which is right between two
	 * sections and wrong at the top of the list — the count and the first
	 * heading are one thought, and 64px of nothing put them on separate
	 * screens. The 64 is restored by the sibling rule below, which is the only
	 * place it was ever doing work.
	 */
	margin-block: var(--wp--preset--spacing--70, 2.5rem) var(--wp--preset--spacing--50, 1.5rem);
	padding-block-end: var(--wp--preset--spacing--30, 0.75rem);
	border-block-end: 1px solid rgb(var(--jmns-primary-rgb, 36 87 70) / 0.1);
}

/*
 * 64px between one division and the next. At 32 they ran together and the page
 * read as one long list rather than as five sections with headings.
 *
 * Keyed to a preceding *visible* division rather than to `:first-of-type`,
 * because filtering hides groups with the `hidden` attribute rather than
 * removing them. Under `:first-of-type` a reader who filtered to Bahagian Falak
 * would get the 64px gap back above the only division on screen — the exact gap
 * this revision is about, reappearing whenever the page is actually in use.
 */
.jmns-directory__group:not([hidden]) ~ .jmns-directory__group .jmns-directory__group-head {
	margin-block-start: var(--wp--preset--spacing--90, 4rem);
}

.jmns-directory__group-title {
	margin: 0;
	/* 24-28px: these head a gallery now, not a list, and at 20px the department
	   read as a caption above the portraits rather than as their heading. */
	font-size: var(--wp--preset--font-size--title-md, 1.5rem);
	/*
	 * The heading gives way, so the count never has to.
	 *
	 * Both are flex items under `space-between`, and a heading that will not
	 * shrink takes the whole row on a phone: "Bahagian Khidmat Pengurusan" and
	 * "Pengurusan Tertinggi" both did, dropping the count onto a line of its own
	 * and leaving the rule 43px below the heading it belongs to instead of 12.
	 *
	 * The basis has to be `0`, and this is the part that is easy to get wrong —
	 * `flex: 1 1 auto` with `min-inline-size: 0` looks like it should do it and
	 * changes nothing at all. Flex collects items into lines using their
	 * *hypothetical* main size, which under a basis of `auto` is the heading's
	 * max-content width, and it does that before any shrinking is allowed to
	 * run. So the line break is already decided by the time `min-inline-size`
	 * has anything to say. A basis of `0` makes the hypothetical size zero, both
	 * items always collect onto one line, and `grow` then hands the heading
	 * whatever the count does not need.
	 *
	 * Measured at 390: "Pengurusan Tertinggi" plus the gap and the pill wanted
	 * 343.19px of a 342px row and wrapped, missing by 1.19 pixels.
	 *
	 * Do not add `min-inline-size: 0` back alongside this. It is not merely
	 * redundant here, it is harmful: a flex item's automatic minimum size is
	 * min-content, and that is what stops a division name from being shrunk
	 * narrower than its own longest word at 320px. Zeroing it removes the floor
	 * that keeps these headings inside their own boxes.
	 */
	flex: 1 1 0%;
}

/*
 * A badge, not a grey afterthought.
 *
 * As plain 13px secondary text at the far end of a 1,296px rule it read as
 * something left over rather than as the section's own count. A pill gives it
 * an edge to sit in without letting it outrank the heading beside it.
 */
.jmns-directory__group-count {
	margin: 0;
	/* Never squeezed, and never wrapped to "22\nPegawai". */
	flex: none;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
	color: var(--wp--preset--color--interactive, #245746);
	font-size: 0.8125rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}


/*
 * A gallery of portraits, not a table of people.
 *
 * The approved direction replaces the compact row this used to be: the portrait
 * carries the card, the caption sits under it, and the card itself has no
 * ground, no border and no shadow — fifty-seven white rectangles on a warm page
 * is the database listing the review keeps asking this not to be.
 *
 * Four across on a desktop, three on a tablet, two on a phone. Stated rather
 * than derived: the review gives the counts, and `auto-fill` against a floor
 * would put four columns on a 1024 screen where three read better.
 */
.jmns-directory__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* One gap on both axes. A 24/16 split made the columns read as tighter
	   pairs than the rows, which is a grouping nobody intended. */
	gap: var(--wp--preset--spacing--50, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Tighter on a phone, where the card's own padding costs the most: two columns
 * of 342px leave 163px a card, and 16px of gutter plus 24px of padding took the
 * portrait down to 137. The gutter gives half of that back.
 */
@media (max-width: 30rem) {
	.jmns-directory__list {
		column-gap: 0.5rem;
	}

	.jmns-officer {
		padding: 0.5rem;
	}
}

@media (min-width: 48rem) {
	.jmns-directory__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.jmns-directory__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.jmns-directory__item[hidden] {
	display: none;
}

/* --------------------------------------------------------------- card -- */

/*
 * A white card with a hairline round it.
 *
 * The first cut of this gallery had no chrome at all — the portrait was the
 * card. On the page that read as photographs loose on a warm ground rather than
 * as an official gallery, so the card comes back: white, one hairline, a
 * moderate radius and a shadow you have to look for. The portrait still carries
 * it; the container only says where one officer ends and the next begins.
 */
.jmns-officer {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30, 0.75rem);
	block-size: 100%;
	padding: var(--wp--preset--spacing--30, 0.75rem);
	/* The card edge and its shadow, both on tokens. They were #E3E9E5 and a
	   23/61/56 rgba — one a step off `border`, the other a step off the brand
	   green used as a shadow. Neither could follow a scheme, and the shadow was
	   worse than that: cast in a brand colour it would have gone *light* under
	   the dark scheme, which is a glow rather than a shadow. */
	border: 1px solid var(--wp--preset--color--border, #DCE4DF);
	border-radius: 14px;
	background-color: var(--wp--preset--color--surface, #fff);
	box-shadow: 0 1px 2px rgb(var(--jmns-shade-rgb, 38 51 42) / 0.04);
	transition:
		border-color var(--t-fast, 150ms) var(--ease, ease),
		box-shadow var(--t-fast, 150ms) var(--ease, ease);
}

/*
 * The card a search result sent you to.
 *
 * Officers are findable now, and an officer's result cannot point at a page of
 * their own (ADR-056) — it points at this card, one of fifty-nine on a page
 * that is several screens long. Landing correctly and being unable to tell
 * which of the fifty-nine you landed on is most of the way to not having
 * arrived.
 *
 * Stated with a ring and a ground rather than a flash that fades. A fade is
 * gone by the time somebody who scrolled away scrolls back, and it has to be
 * suppressed under reduced motion, which leaves that reader with nothing at
 * all. This persists exactly as long as the fragment is in the URL, which is
 * the truthful condition: this *is* the card you were sent to, until you go
 * somewhere else.
 *
 * `scroll-margin-block-start` because the header is sticky. The theme sets
 * `scroll-padding-block-start` globally, but that is measured against a
 * collapsed header the page only reaches once a scroll handler has run — on
 * arrival it has not, and the card landed under the header. The same fix the
 * penerbitan sections needed.
 *
 * `:focus-visible` is deliberately not styled away: the card takes
 * `tabindex="-1"` so a screen reader lands on it, and a keyboard user who
 * subsequently tabs should still see the theme's own focus ring.
 */
.jmns-officer:target {
	border-color: var(--wp--preset--color--interactive, #245746);
	box-shadow: 0 0 0 3px rgb(var(--jmns-primary-rgb, 36 87 70) / 0.18);
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
	scroll-margin-block-start: var(--wp--preset--spacing--90, 4rem);
}

.jmns-officer:hover {
	border-color: var(--wp--preset--color--primary-light, #8DAFA4);
	box-shadow: 0 6px 18px rgb(var(--jmns-shade-rgb, 38 51 42) / 0.07);
}

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

/*
 * 4:5, cropped from the top.
 *
 * The ratio is the photography brief's, so the frame does not move when the
 * official portraits replace these. `center top` because these are
 * head-and-shoulders: when a crop has to give something up it should be the
 * chest, not the top of the head.
 */
.jmns-officer__photo {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
	/* A touch tighter than the card's 14, which is what keeps a rounded box
	   inside a rounded box from reading as two competing curves. */
	border-radius: 10px;
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
	transition: opacity var(--t-fast, 150ms) var(--ease, ease);
}

.jmns-officer:hover .jmns-officer__photo {
	opacity: 0.92;
}

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

/*
 * Nobody is missing a photograph today. This is for the next person to join,
 * and for the gap between them starting and the next photo session. Not a face:
 * a generated one can be mistaken for the person named beneath it, which on a
 * government directory is worse than an obvious absence.
 */
/*
 * On the approved backdrop, so a missing portrait sits in the same room as the
 * ones beside it.
 *
 * The photography brief settles one background for every officer — light wood,
 * the lattice on the left, the department's signage upper-right — and a
 * placeholder on flat sage would have been a second visual system standing next
 * to the first. Here the frame, the ratio and the room are already what the
 * official portrait will arrive in, so replacing one changes nothing but the
 * person.
 *
 * A silhouette, not a face. The brief is explicit that the approved background
 * must never be populated with a generated person: a portrait-shaped figure on
 * the department's own wall is exactly what someone would mistake for a real
 * officer. This reads as an absence, deliberately.
 *
 * The file is only fetched when one of these exists — no officer is missing a
 * photograph today, so the page pays nothing for it.
 */
.jmns-officer__photo--none {
	display: grid;
	place-items: end center;
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
	background-image: url("portrait-backdrop.webp");
	background-size: cover;
	background-position: center top;
}

.jmns-officer__photo--none svg {
	inline-size: 52%;
	block-size: auto;
	/* Standing on the floor of the frame rather than centred in it, which is
	   where a chest-up portrait puts a person. */
	margin-block-end: -1px;
	/* `text-disabled`, which is the ink for something that is not really there.
	   It was a warm brown at 28% matching nothing in the palette, and on the
	   dark scheme it would have been a dark mark on a dark plate. */
	fill: var(--wp--preset--color--text-disabled, #A2ADA5);
}

/* 0.15rem is 2.4px — three ranks touching. They are separate facts about one
   person, not one wrapped line. */
.jmns-officer__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	/* Takes the height the portrait leaves, so the control below can be pushed
	   to the foot of it rather than trailing whatever the caption ran to. */
	flex: 1 1 auto;
	min-inline-size: 0;
}

/* 18px against the post's 14 and the unit's 13. The name is what a reader is
   scanning for, so it is the one thing on the card that should be unmissable. */
.jmns-officer__name {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.jmns-officer__position {
	margin: 0;
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
}

.jmns-officer__unit {
	margin: 0;
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: 0.8125rem;
	line-height: 1.4;
}

/*
 * Kept, and kept quiet.
 *
 * The approved direction prefers these behind a detail drawer and permits them
 * below the caption if they stay secondary. They stay: this is a working
 * directory before it is a gallery, and the whole point of it is finding
 * somebody's extension without a second click.
 */
.jmns-officer__contact {
	margin-block: 0.35rem 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
}

.jmns-officer__contact a {
	display: inline-flex;
	align-items: center;
	min-block-size: 24px;
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	overflow-wrap: anywhere;
}

.jmns-officer__contact a:hover,
.jmns-officer__contact a:focus-visible {
	color: var(--wp--preset--color--interactive, #245746);
}

/*
 * One line each on a phone.
 *
 * Two columns leave a caption about 163px wide, and an address broke as
 * "shukry@muftiselangor.go / v.my" — a wrap through the domain, which reads as
 * a typo rather than as a line break. Clipped instead: the link still opens the
 * whole address, and a visible ellipsis is honest about there being more.
 */
@media (max-width: 30rem) {
	.jmns-officer__contact a {
		display: block;
		max-inline-size: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

/* ---------------------------------------------------------------- lead -- */

/*
 * Pengurusan Tertinggi.
 *
 * Two or three across against the departments' four, and a portrait that stops
 * at 340px tall — the height the brief names. Uncapped it followed the track
 * and reached 480px on a wide screen, which is a poster rather than a lead.
 */
/*
 * One, two, three — stated, not derived.
 *
 * `auto-fill` gave the leadership two columns where the departments had four,
 * so a lead card came out 111% wider than a staff card at 1024 and 105% wider
 * on a phone. The ratio has to be predictable to be a hierarchy rather than an
 * accident of arithmetic, and these counts are the ones the review names.
 */
.jmns-directory__list--lead {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60, 2rem) var(--wp--preset--spacing--50, 1.5rem);
}

@media (min-width: 48rem) {
	.jmns-directory__list--lead {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.jmns-directory__list--lead {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * The leadership portrait has to be the larger one.
 *
 * Capped at 17rem it was 272px wide while a department tile — four to a row
 * rather than three — came out at 288. The hierarchy was inverted: the Mufti's
 * photograph was smaller than a Pembantu Tadbir's.
 *
 * The cap is gone now that the track is right: the portrait fills its card, so
 * the three columns of six carry a visibly larger picture than the four columns
 * of fifty-one, which is the whole point of the section.
 */
.jmns-officer--lead {
	/* More breathing room than a department tile, as well as more width. */
	padding: var(--wp--preset--spacing--40, 1rem);
}

.jmns-officer--lead .jmns-officer__name {
	font-size: 1.25rem;
	line-height: 1.25;
}

.jmns-officer--lead .jmns-officer__position {
	font-size: 0.9375rem;
}


.jmns-directory__empty {
	padding-block: var(--wp--preset--spacing--50, 2rem);
	color: var(--wp--preset--color--text-secondary, #5E6D63);
}

.jmns-directory__empty[hidden] {
	display: none;
}

/* -------------------------------------------------------------- drawer -- */

/*
 * "Lihat maklumat", one per card.
 *
 * Quiet: it is the third thing in a caption, under a name and a post, and the
 * portrait above it is what the eye is meant to reach first. The rule under it
 * says "link" without spending the department's green on fifty-seven of them.
 */
.jmns-officer__details {
	align-self: start;
	min-block-size: 44px;
	/*
	 * Pinned to the foot of the card.
	 *
	 * Following the caption put it at a different height in every card of a row
	 * — a two-line name or a missing unit moved it — so four controls that do
	 * the same thing sat on four different lines. `auto` takes the slack the
	 * grid already equalises, and the padding keeps it off the last line of
	 * text: it is an action, not a fourth line of description.
	 */
	margin-block-start: auto;
	padding-block-start: 0.5rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--interactive, #245746);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	text-align: start;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	cursor: pointer;
}

.jmns-officer__details:hover {
	text-decoration-thickness: 2px;
}

/*
 * The panel.
 *
 * A `<dialog>` opened with `showModal()`: the focus trap, the inert page,
 * Escape and focus returning to the button that opened it all come from the
 * platform. The element's own box is the whole viewport and the panel inside
 * centres, which is what lets the backdrop be clickable.
 */
.jmns-officer-drawer {
	inline-size: 100%;
	max-inline-size: 100%;
	block-size: 100%;
	max-block-size: 100%;
	padding: var(--wp--preset--spacing--40, 1rem);
	border: 0;
	background: transparent;
	overflow: auto;
	overscroll-behavior: contain;
}

.jmns-officer-drawer::backdrop {
	background-color: rgb(var(--jmns-scrim-rgb, 15 22 19) / 0.55);
}

.jmns-officer-drawer__panel {
	position: relative;
	inline-size: min(100%, 30rem);
	margin: auto;
	padding: var(--wp--preset--spacing--60, 2rem);
	border-radius: 16px;
	background-color: var(--wp--preset--color--surface, #fff);
}

.jmns-officer-drawer__close {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--30, 0.75rem);
	inset-inline-end: var(--wp--preset--spacing--30, 0.75rem);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.jmns-officer-drawer__close:hover {
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
	color: var(--wp--preset--color--text-primary, #1F2925);
}

.jmns-officer-drawer__head {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40, 1rem);
	/* Clear of the close control, which sits in the corner above it. */
	padding-inline-end: 2.5rem;
}

/* The same 4:5 frame the card uses, at the size a panel can afford. */
.jmns-officer-drawer__frame {
	flex: 0 0 auto;
	inline-size: 6rem;
	block-size: 7.5rem;
	overflow: hidden;
	border-radius: 14px;
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
}

.jmns-officer-drawer__frame img,
.jmns-officer-drawer__frame span {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center top;
	border-radius: 0;
}

.jmns-officer-drawer__name {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.jmns-officer-drawer__position {
	margin-block: 0.25rem 0;
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: 0.9375rem;
	line-height: 1.4;
}

/*
 * Term and value, two columns. A definition list because that is what this is —
 * "Telefon" is not a heading over the number, it is its name.
 */
.jmns-officer-drawer__facts {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	gap: 0.6rem var(--wp--preset--spacing--40, 1rem);
	margin-block: var(--wp--preset--spacing--50, 1.5rem) 0;
	padding-block-start: var(--wp--preset--spacing--50, 1.5rem);
	border-block-start: 1px solid rgb(var(--jmns-primary-rgb, 36 87 70) / 0.1);
	font-size: 0.9375rem;
}

.jmns-officer-drawer__facts dt {
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.jmns-officer-drawer__facts dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.jmns-officer-drawer__facts a {
	display: inline-flex;
	align-items: center;
	min-block-size: 24px;
}

@media (max-width: 30rem) {
	.jmns-officer-drawer__panel {
		padding: var(--wp--preset--spacing--50, 1.5rem);
	}

	.jmns-officer-drawer__facts {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.15rem;
	}

	.jmns-officer-drawer__facts dd:not(:last-child) {
		margin-block-end: 0.6rem;
	}
}

/* -------------------------------------------------------------- rhythm -- */

/*
 * The page head, stated rather than inherited.
 *
 * Both gaps at the top of this page — breadcrumb to heading, heading to the
 * opening sentence — were the user-agent's `margin-block: 0.67em` on an h1, and
 * nothing in this build had ever set them. Against a clamped title that means
 * they measure 27px on a desktop and 21px on a phone: the page head breathes
 * differently at every width, for no reason anyone chose, and the revision asks
 * for one vertical rhythm across both.
 *
 * So they are declared. 32px above the heading and 20px below it, the same at
 * every width. The 32 collapses with the breadcrumb's own 12px and wins; the 20
 * collapses through the header and the content wrapper against the directory's
 * 16px and wins. Neither gap can be moved from the other end, which is why
 * changing `.jmns-directory` alone did nothing when it was tried.
 *
 * Outside the width query below on purpose: this is the rhythm of the page head
 * and applies on a phone too.
 */
.jmns-has-directory .entry-title {
	margin-block: var(--wp--preset--spacing--60, 2rem) 1.25rem;
}

/* --------------------------------------------------------------- width -- */

/*
 * This page sits on the portal's 1200px, like every other page.
 *
 * It used to widen to 1296 so that four portraits inside padded cards could get
 * back to the 288px they measured before the cards had any padding. The cost
 * was that the article then reached past the masthead, the navigation, the
 * prayer bar and the three footer containers, all of which sit at 1200: above
 * 1248px the breadcrumb and the heading began 48px to the left of the menu
 * directly above them, and the page had two left edges. That was written down
 * here as a deliberate trade. The department looked at the page and disagreed,
 * which settles it — the chrome is the site's edge, and no single page gets to
 * be wider than the site it belongs to.
 *
 * The staff portraits pay 24px each for this and the leadership portraits 32px.
 * Do not reinstate the widening to win them back. The 1200 is written into
 * seven separate rules in the theme, so the only honest way to make this page
 * wider is to move `wideSize` in theme.json, which moves every page at once.
 */