/*
Theme Name:  DevJobsNepal
Theme URI:   https://devjobsnepal.com/
Author:      DevJobsNepal
Description: An ultra light theme for a curated development sector job board. No webfonts, no jQuery, no framework, no build step. Filtering is plain GET parameters handled server side, so every result page is bookmarkable, cacheable, crawlable and works with JavaScript switched off.
Version:     0.11.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.1
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: djn
*/

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

   One palette, defined once on :root for light and redefined under
   prefers-color-scheme for dark. Every colour below is a token, so the whole
   theme recolours from this block.

   The brand violet and the blue-teal hero come off the existing site. The
   hero base is darker than the current one, because white text on the old
   pale gradient did not pass contrast.
   -------------------------------------------------------------------------- */

:root {
	--ink: #16181d;
	--ink-2: #2c3038;
	--ink-3: #474d59;
	--muted: #5f6673;
	--line: #e3e6eb;
	--line-2: #eef0f3;
	--bg: #ffffff;
	--tint: #f7f8fa;

	--brand: #7a2ce8;
	--brand-ink: #5c1cb8;
	--brand-tint: #f2eafd;

	--ok-ink: #0d6b41;
	--ok-tint: #eaf7f0;
	--warn-ink: #92500b;
	--warn-tint: #fdf0e3;
	--closed-ink: #5f6673;
	--closed-tint: #f2f4f6;

	/* Separate from warn on purpose. Warn is "this closes on Thursday", which
	   is a nudge. Alert is "nobody legitimate will ever ask you for money",
	   which is a different kind of statement and should not look like a
	   deadline. */
	--alert-ink: #a32020;
	--alert-tint: #fdecec;

	--radius: 6px;
	--radius-lg: 10px;
	--gutter: clamp(1rem, 4vw, 5rem);
	--measure: 68ch;

	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--ink: #e8eaee;
		--ink-2: #ccd1d9;
		--ink-3: #a8afba;
		--muted: #8b93a1;
		--line: #2a2e36;
		--line-2: #22262c;
		--bg: #14161b;
		--tint: #1a1d23;

		--brand: #ab7cf5;
		--brand-ink: #c4a3f8;
		--brand-tint: #241a38;

		--ok-ink: #6ddba4;
		--ok-tint: #16291f;
		--warn-ink: #e8b070;
		--warn-tint: #2e2113;
		--closed-ink: #8b93a1;
		--closed-tint: #222429;

		--alert-ink: #f19a9a;
		--alert-tint: #2e1618;
	}
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover, a:focus-visible { color: var(--brand-ink); text-decoration: underline; }

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

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.22; letter-spacing: -0.015em; text-wrap: pretty; }
h1 { font-size: clamp(1.6rem, 4vw, 2.05rem); }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.08rem; }

p, ul, ol { margin: 0 0 1rem; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }

.djn-skip {
	position: absolute;
	left: -9999px;
}
.djn-skip:focus {
	left: var(--gutter);
	top: .5rem;
	z-index: 100;
	padding: .6rem 1rem;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.djn-wrap { max-width: 1120px; margin: 0 auto; padding-inline: var(--gutter); }

/* A page of prose gets a narrower wrap rather than the full one.
   .djn-prose caps itself at a readable measure, so inside the 1120px wrap
   every static page had a column of nothing down its right hand side,
   which reads as a sidebar that failed to load rather than as a choice.
   Here the heading, the breadcrumbs and the text share the same bounds and
   the page has a right edge again. */
.djn-wrap--narrow { max-width: 48rem; }
.djn-wrap--narrow .djn-prose { max-width: none; }

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Buttons and controls
   -------------------------------------------------------------------------- */

.djn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 44px;
	padding: .55rem 1.1rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: var(--brand);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}
.djn-btn:hover, .djn-btn:focus-visible { background: var(--brand-ink); color: #fff; text-decoration: none; }
.djn-btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.djn-btn--ghost:hover, .djn-btn--ghost:focus-visible { background: var(--tint); border-color: var(--muted); color: var(--ink); }
.djn-btn--block { width: 100%; }
.djn-btn--lg { min-height: 50px; font-size: 1.05rem; }

/* Sign in with a provider. Each keeps its own brand stripe rather than its
   full brand colour, so two of them side by side read as one set of choices
   instead of competing for the eye. */
.djn-signin { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.djn-btn--google, .djn-btn--linkedin {
	background: var(--bg);
	border-color: var(--line);
	color: var(--ink);
	border-left-width: 4px;
}
.djn-btn--google { border-left-color: #4285f4; }
.djn-btn--linkedin { border-left-color: #0a66c2; }
.djn-btn--google:hover, .djn-btn--google:focus-visible,
.djn-btn--linkedin:hover, .djn-btn--linkedin:focus-visible {
	background: var(--tint);
	border-color: var(--muted);
	color: var(--ink);
}
.djn-btn--google:hover, .djn-btn--google:focus-visible { border-left-color: #4285f4; }
.djn-btn--linkedin:hover, .djn-btn--linkedin:focus-visible { border-left-color: #0a66c2; }

input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="date"], select, textarea {
	width: 100%;
	min-height: 44px;
	padding: .5rem .75rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--ink);
	font: inherit;
}
textarea { min-height: 10rem; }

/* --------------------------------------------------------------------------
   Header and footer
   -------------------------------------------------------------------------- */

/* Sticky, because the search and the nav are what somebody reaches for after
   scrolling a list of forty vacancies.

   Two background declarations, not a mistake: the first is the fallback any
   browser understands and the second only applies where color-mix does. A
   single unsupported value would compute to nothing and leave the bar
   transparent over the content scrolling under it. */
.djn-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--bg);
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) {
	.djn-header { background: var(--bg); }
}
.djn-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(.75rem, 2vw, 1.75rem);
	min-height: 68px;
}
.djn-brand { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); flex: 0 0 auto; }
.djn-brand:hover { text-decoration: none; }
.djn-brand img { max-height: 34px; width: auto; display: block; }

/* The nav scrolls sideways rather than wrapping onto a second row or hiding
   behind a hamburger, which would need JavaScript. Thumb friendly, and every
   item stays reachable at any width. */
.djn-nav { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.djn-nav::-webkit-scrollbar { display: none; }
.djn-nav ul { display: flex; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.djn-nav li { flex: 0 0 auto; }
.djn-nav a {
	display: block;
	padding: .45rem .7rem;
	border-radius: 999px;
	color: var(--ink-3);
	font-size: .93rem;
	font-weight: 500;
	white-space: nowrap;
	transition: background .12s ease, color .12s ease;
}
.djn-nav a:hover, .djn-nav a:focus-visible { background: var(--tint); color: var(--ink); text-decoration: none; }
.djn-nav .current-menu-item > a,
.djn-nav .current_page_item > a,
.djn-nav .current-menu-parent > a {
	background: var(--brand-tint);
	color: var(--brand-ink);
	font-weight: 600;
}

.djn-header__end { margin-left: auto; display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.djn-btn--sm { min-height: 38px; padding: .35rem .9rem; font-size: .88rem; }

.djn-header__me { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink-2); font-size: .92rem; font-weight: 500; }
.djn-header__me:hover { text-decoration: none; color: var(--ink); }
.djn-avatar {
	display: grid;
	place-items: center;
	width: 32px; height: 32px;
	border-radius: 999px;
	background: var(--brand-tint);
	color: var(--brand-ink);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .01em;
}
@media (max-width: 600px) {
	.djn-header__name { display: none; }
}

.djn-footer { margin-top: 3.5rem; padding-block: 2.75rem 1.75rem; background: #14161b; color: #fff; }
.djn-footer a { color: rgba(255,255,255,.68); }
.djn-footer a:hover { color: #fff; }
.djn-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; }
.djn-footer h2 { font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.djn-footer ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; font-size: .88rem; }
.djn-footer__about { color: rgba(255,255,255,.62); font-size: .88rem; max-width: 30ch; }
.djn-footer__legal { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .8rem; color: rgba(255,255,255,.56); }

/* --------------------------------------------------------------------------
   Hero

   A layered CSS gradient rather than a photograph. The old hero image was
   the heaviest asset on the homepage; this weighs nothing and keeps the
   blue-teal look. The base is dark enough for white text to pass AA.
   -------------------------------------------------------------------------- */

.djn-hero {
	padding-block: clamp(2.5rem, 7vw, 4rem);
	color: #fff;
	background:
		radial-gradient(820px 420px at 14% -20%, rgba(94,205,205,.55) 0%, rgba(94,205,205,0) 62%),
		radial-gradient(760px 440px at 84% 0%, rgba(120,170,235,.45) 0%, rgba(120,170,235,0) 64%),
		radial-gradient(680px 460px at 62% 128%, rgba(140,90,235,.40) 0%, rgba(140,90,235,0) 58%),
		linear-gradient(158deg, #17557f 0%, #146b73 100%);
}
.djn-hero h1 { color: #fff; max-width: 18ch; margin-bottom: .35em; }
.djn-hero p { color: rgba(255,255,255,.9); max-width: 52ch; font-size: 1.05rem; }
.djn-hero__links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1.1rem; font-size: .88rem; color: rgba(255,255,255,.85); }
.djn-hero__links a { color: rgba(255,255,255,.92); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   The hero through the year

   Four palettes, one per quarter of the Nepali year, chosen by djn-core's
   Season class and applied through a class on the body. The site should not
   look the same in Dashain as it does in January.

   Every one of these keeps a dark base under white text. The gradient is
   decoration; the contrast is not negotiable, so the base layer of each is
   dark enough for white to pass AA on its own and the coloured layers sit on
   top at low opacity. A festive palette that makes the heading unreadable is
   not festive, it is broken.
   -------------------------------------------------------------------------- */

/* Spring: Holi, Nawa Barsha, Buddha Jayanti. Warmer and more saturated. */
.djn-season--spring .djn-hero {
	background:
		radial-gradient(820px 420px at 12% -20%, rgba(255,140,170,.42) 0%, rgba(255,140,170,0) 62%),
		radial-gradient(760px 440px at 86% 0%, rgba(255,196,90,.38) 0%, rgba(255,196,90,0) 64%),
		radial-gradient(680px 460px at 58% 130%, rgba(150,95,220,.42) 0%, rgba(150,95,220,0) 58%),
		linear-gradient(158deg, #6d2a63 0%, #8a3a52 100%);
}

/* Monsoon: the rains. Cooler, heavier, less light in it. */
.djn-season--monsoon .djn-hero {
	background:
		radial-gradient(820px 420px at 16% -20%, rgba(120,205,205,.38) 0%, rgba(120,205,205,0) 62%),
		radial-gradient(760px 440px at 84% 0%, rgba(90,140,200,.42) 0%, rgba(90,140,200,0) 64%),
		radial-gradient(680px 460px at 62% 128%, rgba(60,100,160,.45) 0%, rgba(60,100,160,0) 58%),
		linear-gradient(158deg, #14384f 0%, #1b4a55 100%);
}

/* Dashain and Tihar. Marigold and deep red, the two colours of the season,
   over a base dark enough to carry them. */
.djn-season--festival .djn-hero {
	background:
		radial-gradient(820px 420px at 14% -20%, rgba(255,176,50,.45) 0%, rgba(255,176,50,0) 62%),
		radial-gradient(760px 440px at 86% 4%, rgba(226,88,60,.42) 0%, rgba(226,88,60,0) 64%),
		radial-gradient(680px 460px at 60% 130%, rgba(150,40,90,.40) 0%, rgba(150,40,90,0) 58%),
		linear-gradient(158deg, #6b2410 0%, #8a3512 100%);
}

/* Winter: Maghe Sankranti, Losar. Clear and cold, the original palette. */
.djn-season--winter .djn-hero {
	background:
		radial-gradient(820px 420px at 14% -20%, rgba(94,205,205,.55) 0%, rgba(94,205,205,0) 62%),
		radial-gradient(760px 440px at 84% 0%, rgba(120,170,235,.45) 0%, rgba(120,170,235,0) 64%),
		radial-gradient(680px 460px at 62% 128%, rgba(140,90,235,.40) 0%, rgba(140,90,235,0) 58%),
		linear-gradient(158deg, #17557f 0%, #146b73 100%);
}

/* --------------------------------------------------------------------------
   Location chips under the hero search

   Ordered by how much work is in each place, with the count shown. Three
   bare district names read as a list somebody forgot to finish; the busiest
   places with their numbers read as a summary of the board.
   -------------------------------------------------------------------------- */

/* Named for the hero, not shared with the filter chips further down. These
   sit on a dark gradient and those sit on white, so one class cannot serve
   both: when it did, whichever rule came second won and the hero chips came
   out in pale lilac. */
.djn-hero__places { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; margin-top: 1.15rem; }
.djn-hero__count { color: rgba(255,255,255,.92); font-size: .92rem; font-weight: 600; }
.djn-hero__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.djn-hero__chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .3rem .7rem;
	border: 1px solid rgba(255,255,255,.28);
	border-radius: 999px;
	background: rgba(255,255,255,.10);
	color: #fff;
	font-size: .85rem;
	font-weight: 500;
	text-decoration: none;
	transition: background .12s ease, border-color .12s ease;
}
.djn-hero__chip:hover, .djn-hero__chip:focus-visible {
	background: rgba(255,255,255,.2);
	border-color: rgba(255,255,255,.5);
	color: #fff;
	text-decoration: none;
}
.djn-hero__chip em { font-style: normal; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.72); font-size: .8rem; }

/* --------------------------------------------------------------------------
   Search form
   -------------------------------------------------------------------------- */

.djn-search {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 1.5rem;
	padding: .5rem;
	background: var(--bg);
	border-radius: 8px;
	box-shadow: 0 8px 28px rgba(10,40,60,.22);
	max-width: 940px;
}
.djn-search__field { flex: 1 1 16rem; }
.djn-search__field input, .djn-search__field select { border-color: transparent; }
.djn-search .djn-btn { flex: 0 0 auto; min-width: 7rem; }

/* The location control never grows past what it needs, so the keyword field
   keeps the room. It has a left rule rather than a full border, which reads
   as one search bar in two parts instead of two separate inputs. */
.djn-search__field--place { flex: 0 1 15rem; min-width: 0; }
.djn-search__field--place select {
	border-left: 1px solid var(--line);
	border-radius: 0;
	text-overflow: ellipsis;
}
@media (max-width: 720px) {
	.djn-search__field--place { flex: 1 1 100%; }
	.djn-search__field--place select { border-left-color: transparent; border-radius: var(--radius); }
	.djn-search .djn-btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   Vacancy list

   A dense list, not a card grid. Five vacancies fit where the old design
   showed four, and a list is what somebody scanning for work actually reads.
   -------------------------------------------------------------------------- */

.djn-list { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.djn-list > * + * { border-top: 1px solid var(--line-2); }

/* A row has to look like a row you can act on. Three things do that: it
   responds to the pointer anywhere on it rather than only on the title, the
   left edge marks the one you are on, and the keyboard gets the same
   treatment as the mouse, which is what :focus-within is for. */
.djn-job {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.1rem;
	background: var(--bg);
	transition: background .12s ease;
}
.djn-job::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 3px;
	background: transparent;
	transition: background .12s ease;
}
/* The WHOLE row is the target, not just the title. The link stretches a
   transparent pseudo element over the row, so there is still exactly one
   real link in the markup: no duplicated anchors for a screen reader to
   read twice, no nested link, and no JavaScript.

   inset box-shadow rather than a border for the hover ring, because a
   border appearing on hover would change the row's size and shove
   everything under it down by two pixels. */
.djn-job__title::after {
	content: "";
	position: absolute;
	inset: 0;
}
.djn-job:hover, .djn-job:focus-within {
	z-index: 1;
	background: var(--tint);
	box-shadow: inset 0 0 0 2px var(--brand);
	border-radius: var(--radius);
}
.djn-job:focus-within { outline: none; }
.djn-job:hover .djn-job__title { color: var(--brand-ink); }

/* The left stripe belongs to the row you are ON. Once hover rings the
   whole row, a stripe as well would be two signals for one state. */
.djn-job:hover::before, .djn-job:focus-within::before { background: transparent; }

/* Anything else in the row that is itself clickable has to sit above the
   stretched link, or the row would swallow it. */
.djn-job__end > a, .djn-job__meta a { position: relative; z-index: 2; }

/* The row somebody is already looking at, on the single vacancy page's
   related list and anywhere else a current item appears. */
.djn-job--current { background: var(--brand-tint); }
.djn-job--current::before { background: var(--brand); }

@media (prefers-reduced-motion: reduce) {
	.djn-job, .djn-job::before { transition: none; }
}

/* The pointer says the whole row is a link, because it is. */
.djn-job:hover { cursor: pointer; }
.djn-job__logo {
	flex: 0 0 auto;
	width: 44px; height: 44px;
	border-radius: var(--radius);
	object-fit: contain;
	background: var(--tint);
	display: grid; place-items: center;
	font-size: .72rem; font-weight: 700; color: var(--muted);
	text-transform: uppercase;
}
.djn-job__body { flex: 1 1 auto; min-width: 0; }
.djn-job__title { display: block; font-size: .98rem; font-weight: 600; color: var(--ink); }
.djn-job__title:hover { color: var(--brand); text-decoration: none; }
.djn-job__meta { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin-top: .3rem; font-size: .82rem; color: var(--muted); }
.djn-job__end { flex: 0 0 auto; display: flex; align-items: center; gap: .75rem; }

.djn-pill {
	padding: .22rem .6rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: .77rem;
	font-weight: 600;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.djn-pill--open { background: var(--ok-tint); color: var(--ok-ink); border-color: color-mix(in srgb, var(--ok-ink) 22%, transparent); }
.djn-pill--soon { background: var(--warn-tint); color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn-ink) 30%, transparent); }
.djn-pill--closed { background: var(--closed-tint); color: var(--closed-ink); border-color: color-mix(in srgb, var(--closed-ink) 22%, transparent); }

/* Closing within a couple of days is the one piece of urgency on the page,
   so it gets weight rather than just a different tint. Colour is not doing
   the work alone: the pill still says how many days. */
.djn-pill--urgent {
	background: var(--warn-ink);
	color: #fff;
	border-color: var(--warn-ink);
}

.djn-job--closed { opacity: .72; }
.djn-job--closed:hover { opacity: 1; }

@media (max-width: 640px) {
	.djn-job { flex-wrap: wrap; }
	.djn-job__end { width: 100%; padding-left: calc(44px + 1rem); }
}

/* --------------------------------------------------------------------------
   Two column shell, used by the archive and the single vacancy
   -------------------------------------------------------------------------- */

.djn-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-block: 2rem; align-items: start; }
@media (min-width: 60rem) {
	.djn-cols--filters { grid-template-columns: 16rem minmax(0, 1fr); }

	/* The rail is second in the source so that a phone gets the vacancies
	   first. Order puts it back on the left where there is room for it. */
	.djn-cols--filters > aside { order: -1; }

	.djn-cols--vacancy { grid-template-columns: minmax(0, 1fr) 21rem; }
	.djn-cols__aside--sticky { position: sticky; top: 1.5rem; }
}

/* The vacancy rail is two cards now, the organisation and the apply box,
   so it needs a gap of its own rather than relying on card margins. */
.djn-cols--vacancy > aside { display: flex; flex-direction: column; gap: 1.1rem; }

.djn-results__tools { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0; }

/* A way down to the rail, which on a narrow screen is below the results.
   Pointless at desktop width, where the rail is already beside them. */
.djn-results__jump {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .2rem .6rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: .85rem;
	color: var(--ink-3);
}
.djn-results__jump:hover { border-color: var(--brand); color: var(--brand-ink); text-decoration: none; }
@media (min-width: 60rem) {
	.djn-results__jump { display: none; }
}

/* A rule above the rail on a narrow screen, where it sits under the results
   as a section of the page rather than as a column beside one. */
@media (max-width: 59.99rem) {
	.djn-cols--filters > aside {
		border-top: 1px solid var(--line);
		padding-top: 1.5rem;
	}
}

/* --------------------------------------------------------------------------
   Filters
   -------------------------------------------------------------------------- */

.djn-filters { display: flex; flex-direction: column; gap: 1.4rem; }
.djn-filters__group { display: flex; flex-direction: column; gap: .55rem; border-top: 1px solid var(--line-2); padding-top: 1.1rem; }
.djn-filters__group:first-of-type { border-top: 0; padding-top: 0; }
.djn-filters h2 { font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0; }
.djn-filters label { display: flex; align-items: center; gap: .55rem; font-size: .9rem; color: var(--ink-3); cursor: pointer; }
.djn-filters label input { width: auto; min-height: 0; margin: 0; accent-color: var(--brand); }
.djn-filters label span { flex: 1 1 auto; }
.djn-filters label em { font-style: normal; font-size: .82rem; color: var(--muted); }
.djn-filters__note { font-size: .8rem; line-height: 1.5; color: var(--muted); }

.djn-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.djn-chip {
	display: inline-flex; align-items: center; gap: .45rem;
	padding: .3rem .6rem;
	border-radius: 5px;
	background: var(--brand-tint);
	color: var(--brand-ink);
	font-size: .82rem; font-weight: 600;
}
.djn-chip:hover { text-decoration: none; background: var(--brand); color: #fff; }

.djn-results__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }

/* --------------------------------------------------------------------------
   Single vacancy
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   The page header band

   Every page that is not the homepage opens with this. The single vacancy
   had a proper header while pages, archives, search and 404 each had a bare
   heading floating on white, which read as several different websites
   stitched together.
   -------------------------------------------------------------------------- */

.djn-pagehead {
	padding-block: 1.5rem 1.7rem;
	background: var(--tint);
	border-bottom: 1px solid var(--line);
}
.djn-pagehead__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.djn-pagehead__main { flex: 1 1 22rem; min-width: 0; }
.djn-pagehead h1 { margin: 0; }
.djn-pagehead__sub { margin: .45rem 0 0; color: var(--muted); font-size: .94rem; }
.djn-pagehead__actions { flex: 0 0 auto; }
.djn-pagehead__lede { margin-top: 1rem; max-width: var(--measure); color: var(--ink-3); font-size: .96rem; }
.djn-pagehead__lede > :last-child { margin-bottom: 0; }

/* An article's title is the thing on the page, so it gets the room. */
.djn-pagehead--article { padding-block: 2rem 2.2rem; }
.djn-pagehead--article h1 { max-width: 24ch; font-size: clamp(1.7rem, 4.5vw, 2.3rem); }

.djn-vacancy__head { padding-block: 1.4rem 1.6rem; background: var(--tint); border-bottom: 1px solid var(--line); }

.djn-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .8rem; color: var(--muted); margin-bottom: .7rem; }
.djn-breadcrumb a { color: var(--muted); }
.djn-breadcrumb a:hover { color: var(--brand-ink); }
.djn-breadcrumb span[aria-hidden] { color: var(--line); }
.djn-breadcrumb [aria-current] { color: var(--ink-3); font-weight: 500; }

/* The body of an inner page, so no template needs an inline padding. */
.djn-page { padding-block: 2rem 2.5rem; }
.djn-page__cta { margin-top: 1.5rem; }
.djn-searchpage { max-width: 34rem; margin-top: 1.5rem; }

/* Facts under a vacancy title, separated by a dot rather than by guesswork
   about how much space reads as a gap. */
/* The title is the largest thing on the page and was competing with a
   breadcrumb and three lines of small grey text for the same attention.
   Now: trail, title, then one line that says who and where, with the
   organisation carrying its logo. */
.djn-vacancy__title { margin: .5rem 0 0; font-size: clamp(1.55rem, 3.4vw, 2.15rem); }

.djn-vacancy__by {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.1rem;
	margin-top: .9rem;
}

/* The organisation reads as a thing you can go to, which it now is. */
.djn-vacancy__org {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .3rem .7rem .3rem .35rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--bg);
	font-size: .95rem;
	font-weight: 600;
	color: var(--ink);
}
.djn-vacancy__org:hover, .djn-vacancy__org:focus-visible {
	border-color: var(--brand);
	background: var(--brand-tint);
	color: var(--brand-ink);
	text-decoration: none;
}
.djn-vacancy__orglogo {
	flex: 0 0 auto;
	width: 30px; height: 30px;
	border-radius: 999px;
	object-fit: contain;
	background: var(--tint);
	display: grid; place-items: center;
	font-size: .6rem; font-weight: 700; color: var(--muted);
	text-transform: uppercase;
}

.djn-vacancy__facts { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; margin: 0; font-size: .92rem; color: var(--ink-3); }
.djn-vacancy__facts > * + *::before { content: "·"; margin-right: .75rem; color: var(--line); }
.djn-vacancy__facts .djn-pill::before { content: none; margin: 0; }

/* Whose vacancy this is, at the top of the rail.
   It used to sit under the facts, which put the one thing that decides
   whether somebody reads any further below a table. The logo is large
   enough to be recognised: at 44px, which is right in a list of forty
   rows, an organisation's mark is a smudge. */
.djn-employer {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--bg);
	overflow: hidden;
}
.djn-employer__id { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.2rem; }
.djn-employer__logo {
	flex: 0 0 auto;
	width: 88px; height: 80px;
	border-radius: var(--radius);
	object-fit: contain;
	background: var(--tint);
	display: grid; place-items: center;
	font-size: 1.15rem; font-weight: 700; color: var(--muted);
	text-transform: uppercase;
}
.djn-employer__who { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.djn-employer__who strong { font-size: 1rem; line-height: 1.3; }
.djn-employer__who a { font-size: .85rem; }

/* No rule above the facts when they are the only thing in the card, which
   happens on a vacancy that arrived with no organisation name. */
.djn-employer > .djn-facts:first-child { border-top: 0; }

/* The apply card carries the one action the page exists for, so it is
   allowed to sit slightly above the page rather than being another outlined
   box among several. */
.djn-apply {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--bg);
	box-shadow: 0 1px 2px rgba(16,20,28,.04), 0 8px 24px rgba(16,20,28,.06);
	overflow: hidden;
}
.djn-apply__top { padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .75rem; }
.djn-apply__top .djn-pill { align-self: center; }
.djn-apply__note { font-size: .8rem; color: var(--muted); text-align: center; margin: 0; }
.djn-apply__actions { display: flex; gap: .55rem; }
.djn-apply__actions .djn-btn { flex: 1 1 0; min-height: 42px; padding-inline: .5rem; font-size: .9rem; }

/* The scam warning. Set at the size of something meant to be read, in the
   apply card where the decision is made, rather than as grey small print at
   the bottom of the page where the sentence it replaces went unread. */
.djn-warning {
	margin: 0;
	padding: .7rem .85rem;
	/* Two declarations again: the second only applies where color-mix does,
	   and an unsupported value on its own would compute to nothing and leave
	   the block with no border at all. */
	border: 1px solid var(--alert-ink);
	border-color: color-mix(in srgb, var(--alert-ink) 32%, transparent);
	border-radius: var(--radius);
	background: var(--alert-tint);
	color: var(--alert-ink);
	font-size: .84rem;
	line-height: 1.5;
}
.djn-warning strong { display: block; font-size: .9rem; }

.djn-facts { border-top: 1px solid var(--line-2); padding: 1rem 1.2rem; margin: 0; }
.djn-facts div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .35rem; font-size: .9rem; }
.djn-facts dt { color: var(--muted); }
.djn-facts dd { margin: 0; font-weight: 600; text-align: right; }

/* The Bikram Sambat date, on its own line under the Gregorian one and
   lighter than it. Beside the published date, never instead of it: the
   organisation wrote the Gregorian one and that is the one on the form. */
.djn-bs { display: block; font-weight: 400; color: var(--muted); font-size: .84rem; }

/* --------------------------------------------------------------------------
   Organisations

   The one part of this site whose content is entirely its own. A vacancy
   body is reproduced from the source, so as a document it is a near
   duplicate of one Google already has; what an organisation is, and what
   it has hired for over time, exists nowhere else.
   -------------------------------------------------------------------------- */

.djn-org__about { margin-bottom: 2rem; }

.djn-note { margin-top: .9rem; font-size: .85rem; color: var(--muted); }

/* The identity block under the page title. Who they are is the heading on a
   page about them, so the logo belongs here rather than squeezed into the
   rail beside a facts table. */
.djn-orghead { display: flex; align-items: center; gap: 1rem; margin-top: .35rem; }
.djn-orghead__body { min-width: 0; }
.djn-orghead__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .1rem .55rem;
	margin: 0;
	font-size: .92rem;
	color: var(--ink-3);
}
.djn-orghead__dot { color: var(--line); }
.djn-orghead__site { font-weight: 600; }
.djn-orghead__pay { color: var(--ok-ink); font-weight: 600; }

/* The A to Z index. A bulleted list with the count welded onto the end of
   the name read as "ADB 1", which is exactly as useful as it sounds. */
.djn-orgs__lede { font-size: 1.05rem; color: var(--ink-2); }

.djn-orgs__jump {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	margin: 1.25rem 0 2rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--line);
}
.djn-orgs__jump a {
	display: grid;
	place-items: center;
	min-width: 2rem;
	min-height: 2rem;
	padding-inline: .35rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: .88rem;
	font-weight: 600;
	color: var(--ink-3);
}
.djn-orgs__jump a:hover, .djn-orgs__jump a:focus-visible {
	border-color: var(--brand);
	background: var(--brand-tint);
	color: var(--brand-ink);
	text-decoration: none;
}

.djn-orgs__group { margin-bottom: 2.25rem; }

/* scroll-margin, so a jump link does not land the heading underneath the
   sticky header. */
.djn-orgs__letter {
	margin: 0 0 .6rem;
	padding-bottom: .3rem;
	border-bottom: 2px solid var(--brand);
	font-size: .95rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--brand-ink);
	scroll-margin-top: 5rem;
}

.djn-orgs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: .4rem;
}
.djn-orgs__list a {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .6rem .7rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
}
.djn-orgs__list a:hover, .djn-orgs__list a:focus-visible {
	border-color: var(--brand);
	background: var(--brand-tint);
	text-decoration: none;
}
.djn-orgs__logo {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	border-radius: var(--radius);
	background: var(--tint);
	font-size: .68rem;
	font-weight: 700;
	color: var(--muted);
	text-transform: uppercase;
}
.djn-orgs__body { min-width: 0; display: flex; flex-direction: column; }
.djn-orgs__name { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.djn-orgs__meta { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Prose

   Most of what this styles was not written here. A vacancy body is
   reproduced from ReliefWeb, Workday or whoever published it, which means
   arbitrary HTML: inline colours, nested tables, hard coded widths, empty
   paragraphs, headings that start at h4. So this is defensive as much as it
   is decorative, and anything that could overflow is made to behave.
   -------------------------------------------------------------------------- */

.djn-prose { max-width: var(--measure); font-size: 1.02rem; line-height: 1.7; color: var(--ink-2); }
.djn-prose > * + * { margin-top: 1rem; }
.djn-prose > :first-child { margin-top: 0; }
.djn-prose > :last-child { margin-bottom: 0; }

.djn-prose h2, .djn-prose h3, .djn-prose h4 { color: var(--ink); }
.djn-prose h2 { font-size: 1.28rem; margin-top: 2rem; }
.djn-prose h3 { font-size: 1.1rem; margin-top: 1.6rem; }
.djn-prose h4 { font-size: 1rem; margin-top: 1.4rem; }

.djn-prose a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

.djn-prose ul, .djn-prose ol { padding-left: 1.4rem; }
.djn-prose li + li { margin-top: .35rem; }
.djn-prose li > ul, .djn-prose li > ol { margin-top: .35rem; }

.djn-prose blockquote {
	margin: 1.4rem 0;
	padding: .3rem 0 .3rem 1.1rem;
	border-left: 3px solid var(--brand);
	color: var(--ink-3);
}
.djn-prose blockquote > :last-child { margin-bottom: 0; }

.djn-prose code, .djn-prose kbd, .djn-prose samp {
	padding: .12em .35em;
	border-radius: 4px;
	background: var(--tint);
	font-size: .9em;
}
.djn-prose pre {
	padding: 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--tint);
	overflow-x: auto;
	font-size: .88rem;
	line-height: 1.55;
}
.djn-prose pre code { padding: 0; background: none; }

.djn-prose figure { margin: 1.5rem 0; }
.djn-prose figcaption { margin-top: .5rem; font-size: .85rem; color: var(--muted); }
.djn-prose img { border-radius: var(--radius); height: auto; }

.djn-prose hr { margin: 2rem 0; }

.djn-prose dl > dt { font-weight: 600; }
.djn-prose dl > dd { margin: .2rem 0 .8rem; color: var(--ink-3); }

/* A wide table from a source document must not widen the page and put a
   horizontal scrollbar on the whole site.

   Fixed layout rather than the usual display:block with overflow, because
   display:block takes a table's semantics away from screen readers in some
   browsers. Columns get cramped instead, which for the boilerplate tables
   these documents contain is the better trade. */
.djn-prose table { width: 100%; max-width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .92rem; }
.djn-prose td, .djn-prose th { border: 1px solid var(--line); padding: .5rem .7rem; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.djn-prose th { background: var(--tint); font-weight: 600; }

/* A long unbroken string, usually a pasted URL, is the other thing that
   widens the page. */
.djn-prose { overflow-wrap: break-word; }

/* An empty paragraph from a word processor adds a gap nobody asked for. */
.djn-prose p:empty { display: none; }

/* A hard coded width from a source document overflows a narrow screen. */
.djn-prose [style*="width"] { max-width: 100% !important; }

.djn-article__hero { margin: 0 0 1.75rem; }
.djn-article__hero img { width: 100%; border-radius: var(--radius-lg); }

.djn-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 2rem; }
.djn-tags a {
	padding: .25rem .6rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--ink-3);
	font-size: .82rem;
}
.djn-tags a:hover { border-color: var(--brand); color: var(--brand-ink); text-decoration: none; }

.djn-linkpages { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 2rem; font-size: .9rem; }

/* Colours baked into source HTML are only a problem in dark mode, where a
   hard coded black on an assumed white page becomes black on near black and
   the text disappears. In light mode they are usually harmless and
   sometimes deliberate, so they are left alone there rather than flattened
   everywhere on the chance that one of them is wrong. */
@media (prefers-color-scheme: dark) {
	.djn-prose font,
	.djn-prose [style*="color"] { color: inherit !important; }
	.djn-prose [style*="background"] { background-color: transparent !important; }
}

/* --------------------------------------------------------------------------
   Comments on an article

   single.php was calling comments_template() while the theme had no
   comments.php, so WordPress fell through to its compatibility copy in
   wp-includes: unstyled markup and a deprecation notice.
   -------------------------------------------------------------------------- */

.djn-comments { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); max-width: var(--measure); }
.djn-comments__title { font-size: 1.15rem; margin-bottom: 1.25rem; }
.djn-comments__list { margin: 0 0 2rem; padding: 0; list-style: none; }
.djn-comments__list ol { list-style: none; padding-left: 1.25rem; margin-top: 1rem; }
.djn-comments__closed { font-size: .9rem; color: var(--muted); }

.djn-comments .comment-body { padding: 1rem 0; border-top: 1px solid var(--line-2); }
.djn-comments .comment-author { display: flex; align-items: center; gap: .6rem; font-size: .92rem; font-weight: 600; }
.djn-comments .comment-author img { border-radius: 999px; }
.djn-comments .comment-author .says { display: none; }
.djn-comments .comment-meta { margin: .2rem 0 .6rem; font-size: .8rem; color: var(--muted); }
.djn-comments .comment-meta a { color: var(--muted); }
.djn-comments .reply { margin-top: .5rem; font-size: .85rem; }
.djn-comments .comment-awaiting-moderation { font-size: .85rem; color: var(--warn-ink); }

/* --------------------------------------------------------------------------
   Discussion under a vacancy

   The same comment machinery as the blog, read differently. Somebody here
   is deciding whether to apply, so the thread sits closer to the vacancy
   than an article's comments do to the article.
   -------------------------------------------------------------------------- */

.djn-discussion { border-top: 1px solid var(--line); padding-top: 1.75rem; }
.djn-discussion__shut {
	padding: .7rem 1rem;
	border-left: 3px solid var(--line);
	background: var(--tint);
	font-size: .88rem;
	color: var(--muted);
}
.djn-discussion__list { max-width: var(--measure); }
.djn-discussion__title { font-size: 1.02rem; margin-bottom: .5rem; }
.djn-discussion__form { max-width: var(--measure); }
.djn-discussion__signin { max-width: var(--measure); text-align: left; }
.djn-discussion__signin p:first-child { margin-bottom: 1rem; }

/* A tagged organisation links to its other vacancies. A tagged person does
   not link anywhere, because a pseudonym exists so that somebody is not
   findable, so the two look related but only one is clickable. */
.djn-mention {
	padding: .05em .3em;
	border-radius: 4px;
	background: var(--brand-tint);
	color: var(--brand-ink);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
a.djn-mention:hover, a.djn-mention:focus-visible {
	background: var(--brand);
	color: #fff;
	text-decoration: none;
}
span.djn-mention { background: var(--line-2); color: var(--ink-3); }

.djn-comments__form { margin-top: 1rem; }
.djn-comments__form .comment-form-cookies-consent { display: flex; align-items: center; gap: .5rem; }
.djn-comments__form .comment-form-cookies-consent input { width: auto; min-height: 0; accent-color: var(--brand); }
.djn-comments__form label { display: block; margin-bottom: .3rem; font-size: .9rem; font-weight: 600; }
.djn-comments__form p { margin-bottom: 1rem; }

/* Written into post_content by djn-ingest. Styled, not reinvented. */
.djn-related { padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 8px; }
.djn-related h3 { margin: 0 0 .6rem; font-size: .98rem; }
.djn-related ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .4rem; font-size: .9rem; color: var(--ink-3); }

/* Printed by djn-core on a vacancy whose closing date has passed. */
.djn-closed {
	margin: 0 0 1.25rem;
	padding: .85rem 1rem;
	border-left: 4px solid var(--warn-ink);
	background: var(--warn-tint);
	color: var(--warn-ink);
	font-size: .95rem;
	line-height: 1.5;
}
.djn-closed strong { display: block; }

.djn-source {
	display: flex; gap: .6rem;
	padding: .8rem 1rem;
	border-left: 3px solid var(--line);
	background: var(--tint);
	font-size: .86rem; color: var(--muted);
}

/* The share row, now under the title rather than under the description.
   Sitting in the header band it is closer to the h1 than anything else on
   the page, so it is deliberately quiet: muted, small, and no buttons
   competing with Apply. */
.djn-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem 1rem;
	margin: .9rem 0 0;
	font-size: .86rem;
	color: var(--muted);
}
.djn-share__label { font-weight: 600; color: var(--ink-3); }

/* A link, not a button, because it does what the links beside it do. The
   only reason it is a button element is that it runs a script rather than
   going anywhere, and that is exactly when a button is correct. */
.djn-share__copy {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--brand);
	cursor: pointer;
	text-decoration: none;
}
.djn-share__copy:hover, .djn-share__copy:focus-visible { color: var(--brand-ink); text-decoration: underline; }

.djn-share__said:not(:empty) { color: var(--ok-ink); font-weight: 600; }

/* A sticky apply bar on phones. Most traffic reads a vacancy on a phone,
   so the apply action should be reachable at any scroll position. */
.djn-applybar { display: none; }
@media (max-width: 60rem) {
	.djn-applybar {
		position: sticky; bottom: 0; z-index: 20;
		display: flex; align-items: center; gap: .75rem;
		padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
		margin-top: 2rem;
		background: var(--bg);
		border-top: 1px solid var(--line);
		box-shadow: 0 -4px 16px rgba(16,20,28,.08);
	}
	.djn-applybar__when { flex: 1 1 auto; font-size: .82rem; color: var(--muted); }
	.djn-applybar .djn-btn { flex: 0 0 auto; }
}

/* --------------------------------------------------------------------------
   Discussion

   The thread is the only content on a vacancy page that exists nowhere
   else, and it was rendering as a bare heading over an empty textarea.
   Three things fixed: the box is asked a question, the other questions
   worth asking are listed under it, and every comment has an anchor so a
   thread can be pointed at.
   -------------------------------------------------------------------------- */

#discussion { scroll-margin-top: 5rem; }

.djn-prompts { margin-top: .9rem; padding: .8rem 1rem; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--tint); }
.djn-prompts__lede { margin: 0 0 .4rem; font-size: .82rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.djn-prompts__list { margin: 0; padding-left: 1.1rem; font-size: .9rem; color: var(--ink-3); }
.djn-prompts__list li + li { margin-top: .25rem; }

.djn-discussion__one {
	margin: 1rem 0 0;
	padding: .8rem 1rem;
	border-left: 3px solid var(--brand);
	background: var(--brand-tint);
	font-size: .92rem;
	color: var(--ink-2);
}

/* One thread each means a top level comment is a heading, and a reply is a
   contribution under it. The indent and the weight say which is which. */
.djn-comment { list-style: none; }
.djn-comment--top {
	padding: 1rem 0;
	border-top: 1px solid var(--line-2);
}
.djn-comment--top:first-child { border-top: 0; }
.djn-comment--reply {
	margin-top: .8rem;
	padding: .8rem 0 .2rem 1.1rem;
	border-left: 2px solid var(--line);
}
.djn-comment .children { list-style: none; margin: 0; padding: 0; }

.djn-comment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; }
.djn-comment__who { font-weight: 600; }
.djn-comment__when { font-size: .82rem; color: var(--muted); }
.djn-comment__when:hover { color: var(--brand); }
.djn-comment__text { margin-top: .3rem; color: var(--ink-2); }
.djn-comment__text > :last-child { margin-bottom: 0; }
.djn-comment__held { margin: .4rem 0 0; font-size: .82rem; color: var(--warn-ink); }
.djn-comment__tools { margin-top: .4rem; font-size: .85rem; }
.djn-comment:target { background: var(--brand-tint); border-radius: var(--radius); }

/* The card in the rail. The thread sits under two thousand words of person
   specification, so somebody who would happily answer a question never
   learns there is one. */
.djn-invite {
	padding: 1rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--tint);
}
.djn-invite__head { margin: 0; font-weight: 700; line-height: 1.3; }
.djn-invite__count { margin: .3rem 0 .8rem; font-size: .86rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   Cards, pagination, notices, ads
   -------------------------------------------------------------------------- */

.djn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem; }

.djn-card { display: flex; flex-direction: column; gap: .5rem; }
.djn-card__thumb { aspect-ratio: 16 / 9; width: 100%; max-width: 100%; border-radius: 8px; object-fit: cover; background: var(--tint); }
.djn-card__kicker { font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brand); }
.djn-card h3 { margin: 0; font-size: 1.02rem; line-height: 1.35; }
.djn-card h3 a { color: var(--ink); }
.djn-card h3 a:hover { color: var(--brand); text-decoration: none; }
.djn-card p { margin: 0; font-size: .88rem; color: var(--muted); }

/* Pushed to the bottom so cards in a row line their footers up even when
   the titles run to different numbers of lines. */
.djn-card__meta { margin-top: auto !important; padding-top: .35rem; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: .8rem; color: var(--muted); }
.djn-card__meta > * + *::before { content: "·"; margin-right: .6rem; color: var(--line); }
.djn-card:hover .djn-card__thumb { opacity: .92; }

.djn-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .5rem; }
.djn-tile {
	display: flex; align-items: center; justify-content: space-between; gap: .75rem;
	padding: .7rem .9rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: .92rem;
	color: var(--ink);
}
.djn-tile:hover { border-color: var(--brand); text-decoration: none; }
.djn-tile em { font-style: normal; font-size: .82rem; color: var(--muted); }

.djn-pager { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.5rem; }
.djn-pager .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px; padding: 0 .6rem;
	border: 1px solid var(--line); border-radius: var(--radius);
	color: var(--ink); font-size: .92rem;
}
.djn-pager .page-numbers:hover { border-color: var(--brand); text-decoration: none; }
.djn-pager .page-numbers.current { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }

.djn-alertband {
	margin-top: 3rem;
	padding: 1.8rem clamp(1.2rem, 4vw, 2.5rem);
	border-radius: var(--radius-lg);
	background: #1c1130;
	color: #fff;
	display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem;
}
.djn-alertband > div:first-child { flex: 1 1 20rem; }
.djn-alertband h2 { color: #fff; margin: 0 0 .3rem; }
.djn-alertband p { margin: 0; color: rgba(255,255,255,.74); font-size: .94rem; }
.djn-alertband form { display: flex; flex-wrap: wrap; gap: .5rem; flex: 1 1 20rem; }
.djn-alertband input { flex: 1 1 12rem; }

.djn-ad { margin-block: 1.75rem; text-align: center; }
.djn-ad:empty { display: none; }

.djn-empty { padding: 2.5rem 1.5rem; border: 1px dashed var(--line); border-radius: 8px; text-align: center; color: var(--muted); }

.djn-section { margin-top: 3rem; }
/* A section heading somebody notices. It was the same weight as body copy
   with a plain violet "See all" floating opposite, and neither read as
   anything. Now the heading carries a brand rule under it and the link is
   a real affordance with an arrow that moves on hover. */
.djn-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: 1.1rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid var(--line);
}
.djn-section__head h2 {
	position: relative;
	margin: 0;
	padding-bottom: .6rem;
	font-size: 1.18rem;
	letter-spacing: -0.01em;
}
.djn-section__head h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -.62rem;
	width: 100%;
	height: 2px;
	background: var(--brand);
}
.djn-section__head > a {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .7rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 600;
	white-space: nowrap;
}
.djn-section__head > a::after { content: "\2192"; transition: transform .12s ease; }
.djn-section__head > a:hover, .djn-section__head > a:focus-visible {
	border-color: var(--brand);
	background: var(--brand-tint);
	color: var(--brand-ink);
	text-decoration: none;
}
.djn-section__head > a:hover::after { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
	.djn-section__head > a::after { transition: none; }
}

@media print {
	.djn-header, .djn-footer, .djn-applybar, .djn-ad, .djn-share { display: none; }
}

/* --------------------------------------------------------------------------
   Signed in screens

   The dashboards, the submission form, and the two buttons on a vacancy.
   Everything here is a plain form post: no state lives in the browser, so
   nothing below depends on a script having run.
   -------------------------------------------------------------------------- */

.djn-dash { padding-block: 1rem 2rem; }
.djn-dash__head { margin-bottom: 1.25rem; }
.djn-dash__head h1 { margin-bottom: .25rem; }
.djn-dash__head p { margin: 0; color: var(--muted); }

.djn-dash__jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.djn-dash__jump a {
	padding: .45rem .8rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: .9rem;
	color: var(--ink);
}
.djn-dash__jump a:hover { border-color: var(--brand); text-decoration: none; }

.djn-notice {
	margin: 0 0 1.25rem;
	padding: .8rem 1rem;
	border-left: 4px solid var(--ok-ink);
	border-radius: 0 var(--radius) var(--radius) 0;
	background: var(--ok-tint);
	color: var(--ok-ink);
	font-size: .94rem;
}
.djn-notice--warn { border-left-color: var(--warn-ink); background: var(--warn-tint); color: var(--warn-ink); }

.djn-callout {
	margin-block: 1.25rem;
	padding: .9rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--tint);
	font-size: .9rem;
	line-height: 1.55;
	color: var(--ink-2);
}
.djn-callout strong { display: block; }

.djn-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	margin: 0 0 1.75rem;
	padding: 1.1rem 1.2rem 1.1rem 2.4rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--tint);
	font-size: .9rem;
	line-height: 1.5;
	color: var(--ink-2);
}
.djn-steps li { margin: 0; }

/* Forms sit inside list rows, so they must not introduce their own box. */
.djn-inline { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.djn-inline--grow { flex: 1 1 0; }

.djn-btn--sm { min-height: 36px; padding: .3rem .7rem; font-size: .85rem; }
.djn-btn.is-on { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-ink); }

.djn-iconbtn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px;
	border: 0; border-radius: var(--radius);
	background: transparent;
	color: var(--muted);
	font-size: 1.1rem; line-height: 1;
	cursor: pointer;
}
.djn-iconbtn:hover { background: var(--tint); color: var(--ink); }

.djn-statusform select { min-width: 9rem; }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

/* The one element allowed to scroll sideways, rather than making the page do it. */
.djn-table-scroll { overflow-x: auto; }

.djn-table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.djn-table th {
	padding: .6rem .9rem;
	border-bottom: 1px solid var(--line);
	background: var(--tint);
	text-align: left;
	font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
}
.djn-table td { padding: .8rem .9rem; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.djn-table tr:last-child td { border-bottom: 0; }
.djn-table__sub { display: block; margin-top: .2rem; font-size: .82rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   Form fields
   -------------------------------------------------------------------------- */

.djn-form { display: flex; flex-direction: column; gap: 1.25rem; max-width: 46rem; }

.djn-field { display: flex; flex-direction: column; gap: .4rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.djn-field > label, .djn-field > legend { font-size: .9rem; font-weight: 600; padding: 0; }
.djn-field__hint { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--muted); }
.djn-field__static { margin: 0; display: flex; align-items: center; gap: .75rem; font-size: .95rem; }

.djn-field__error { margin: 0; font-size: .85rem; font-weight: 600; color: #b3202b; }
@media (prefers-color-scheme: dark) { .djn-field__error { color: #f08a8a; } }

.djn-field--bad input, .djn-field--bad select, .djn-field--bad textarea { border-color: #b3202b; }

.djn-req, .djn-opt {
	display: inline-block;
	padding: .05rem .4rem;
	border-radius: 3px;
	font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	vertical-align: middle;
}
.djn-req { background: var(--warn-tint); color: var(--warn-ink); }
.djn-opt { background: var(--line-2); color: var(--muted); }

/* "shown publicly" has to be impossible to miss, because the field it
   labels is the one thing on the profile form that other people will see,
   and the whole point of a pseudonym is that somebody chose it knowing
   that. It gets the brand tint rather than the grey the optional fields
   get, so the two never read as the same kind of note. */
.djn-pub {
	display: inline-block;
	margin-left: .4rem;
	padding: .08rem .45rem;
	border-radius: 999px;
	background: var(--brand-tint);
	color: var(--brand-ink);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	vertical-align: middle;
}

.djn-profile { max-width: 40rem; }

/* --------------------------------------------------------------------------
   Feedback form
   -------------------------------------------------------------------------- */

.djn-feedback { max-width: 40rem; }
.djn-feedback__lede { color: var(--ink-2); }
.djn-feedback__lede + .djn-feedback__lede { color: var(--muted); font-size: .94rem; }
.djn-turnstile { margin-bottom: 1rem; }

/* The honeypot. Taken out of the layout rather than display:none, because
   some bots skip anything with display:none and fill the rest. Nothing
   reachable: off screen, no tab stop, and aria-hidden in the markup. */
.djn-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.djn-notice--warn ul { margin: .4rem 0 0; padding-left: 1.2rem; }

.djn-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem; }
.djn-row--tight { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .5rem; }

.djn-radios { display: flex; flex-wrap: wrap; gap: .5rem; }
.djn-radios label {
	display: inline-flex; align-items: center; gap: .5rem;
	min-height: 44px; padding: .4rem .9rem;
	border: 1px solid var(--line); border-radius: var(--radius);
	font-size: .92rem; font-weight: 500; cursor: pointer;
}
.djn-radios input { width: auto; min-height: 0; margin: 0; accent-color: var(--brand); }
.djn-radios label:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-ink); font-weight: 600; }

.djn-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* The classic editor arrives with its own chrome. This keeps it inside the
   form's box rather than looking bolted to it. */
.djn-field .wp-editor-container { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.djn-field .wp-editor-container textarea { border: 0; }

/* --------------------------------------------------------------------------
   How it works

   A page of plain answers, so it is set as plain prose with one opening
   sentence given weight and the headings spaced enough to be scanned by
   somebody looking for the one that answers their question.
   -------------------------------------------------------------------------- */

.djn-howto__lede { font-size: 1.15rem; line-height: 1.6; color: var(--ink); font-weight: 500; }
.djn-howto h2 { margin-top: 2.25rem; font-size: 1.15rem; }
.djn-howto > h2:first-of-type { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */

.djn-alertband--inline {
	margin-top: 1.5rem;
	padding: 1.25rem 1.4rem;
	background: var(--brand-tint);
	color: var(--ink);
	border: 1px solid var(--line);
}
.djn-alertband--inline h2 { color: var(--ink); font-size: 1.08rem; margin: 0 0 .2rem; }
.djn-alertband--inline p { color: var(--muted); font-size: .88rem; }
.djn-alertband--inline form { flex: 0 0 auto; display: flex; margin: 0; }

.djn-details {
	margin-top: 1.25rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.djn-details > summary {
	padding: .85rem 1.1rem;
	font-size: .95rem;
	font-weight: 600;
	cursor: pointer;
	list-style-position: inside;
}
.djn-details > summary:hover { background: var(--tint); }
.djn-details[open] > summary { border-bottom: 1px solid var(--line); }
.djn-details .djn-form { padding: 1.25rem 1.1rem; max-width: none; }

/* A long list of terms that stays one scannable column set rather than
   becoming a wall. Two or three columns depending on the space. */
.djn-checks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: .35rem 1.25rem;
}
.djn-checks label {
	display: flex;
	align-items: center;
	gap: .55rem;
	min-height: 36px;
	font-size: .9rem;
	font-weight: 400;
	color: var(--ink-3);
	cursor: pointer;
}
.djn-checks input { width: auto; min-height: 0; margin: 0; accent-color: var(--brand); }
.djn-checks label:has(input:checked) { color: var(--ink); font-weight: 600; }