/*
Theme Name: GP Nursing Magazine
Theme URI: https://rnnews.radiologyjobs.us/
Author: RN News Desk
Author URI: https://rnnews.radiologyjobs.us/
Description: Editorial newsroom child theme for GeneratePress, built for RN News Desk. Magazine front page, article and category templates, a Jobs post type with hierarchical locations, on-site applications and free employer submissions, seventeen Gutenberg blocks with page patterns, and structured data throughout.
Version: 3.5.0
Template: generatepress
Text Domain: gp-nursing
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   1. TOKENS
   Built from the two brand colours. #F74D44 measures 3.44:1 on white, which
   is below the 4.5:1 AA threshold for body text and small labels, so it is
   kept for identity and decoration and --brand-ink (5.07:1) carries anything
   that has to be read. The neutral ramp is derived from the navy rather than
   a generic grey so the greys sit in the same family as the brand.
   ========================================================================== */

:root {
	--brand: #f74d44;
	--brand-ink: #c63e36;
	--brand-deep: #a3332d;
	--brand-tint: #fee9e7;
	--brand-wash: #fff5f4;
	--brand-on-dark: #ff8a83;

	--navy: #062044;
	--navy-800: #0d2c55;
	--navy-700: #17304f;

	--ink: #062044;
	--ink-2: #2b4160;
	--ink-3: #51637c;
	--line: #e3e7ed;
	--line-2: #c8d0dc;
	--surface: #ffffff;
	--surface-alt: #f4f6f9;
	--surface-sunk: #eef1f6;

	--on-dark: #ffffff;
	--on-dark-2: rgba(255, 255, 255, 0.80);
	--on-dark-3: rgba(255, 255, 255, 0.64);

	--ok: #1a6b48;
	--ok-tint: #e3f3ec;
	--warn: #96520a;
	--warn-tint: #fbeddb;

	--display: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--body: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 2.5rem;
	--sp-8: 3.5rem;

	--gap: clamp(1.25rem, 3vw, 2rem);
	--gap-lg: clamp(2rem, 5vw, 3.25rem);
	--section-gap: clamp(2.5rem, 6vw, 4rem);

	--radius-sm: 4px;
	--radius: 8px;
	--radius-lg: 14px;
	--radius-pill: 999px;

	--shadow-sm: 0 1px 2px rgba(6, 32, 68, 0.06), 0 1px 3px rgba(6, 32, 68, 0.05);
	--shadow: 0 4px 14px rgba(6, 32, 68, 0.08), 0 1px 3px rgba(6, 32, 68, 0.05);
	--shadow-lg: 0 20px 44px rgba(6, 32, 68, 0.14);

	--container: 1240px;
	--container-wide: 1600px;
	--gutter: clamp(1rem, 4vw, 2.5rem);
	--sidebar: 320px;
	--focus-ring: 0 0 0 3px rgba(198, 62, 54, 0.32);

	--ease: cubic-bezier(0.2, 0, 0.2, 1);
	--speed: 0.2s;

	/* v1/v2 aliases so custom CSS written against earlier releases resolves. */
	--gp-nursing-primary: var(--brand);
	--gp-nursing-primary-dark: var(--brand-ink);
	--gp-nursing-secondary: var(--navy);
	--gp-nursing-accent: var(--brand);
	--gp-nursing-text: var(--ink);
	--gp-nursing-text-light: var(--ink-3);
	--gp-nursing-bg: var(--surface);
	--gp-nursing-bg-alt: var(--surface-alt);
	--gp-nursing-border: var(--line);
	--gp-brand: var(--brand);
	--gp-brand-ink: var(--brand-ink);
	--gp-navy: var(--navy);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

body.gp-nursing {
	font-family: var(--body);
	color: var(--ink-2);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:where(.gp-nursing) :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--display);
	color: var(--ink);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

:where(.gp-main) a {
	color: var(--brand-ink);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--speed) var(--ease);
}

:where(.gp-main) a:hover {
	color: var(--brand-deep);
}

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

/* The usual responsive-image reset. `:where()` keeps it at zero specificity so
   a component that needs a full-bleed image — the lead card, the job logo —
   can simply say `height: 100%` without having to out-specify this rule. */
:where(.gp-nursing) img {
	max-width: 100%;
	height: auto;
}

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

.screen-reader-text:focus,
.gp-skip-link:focus {
	background: var(--surface);
	clip-path: none;
	color: var(--brand-ink);
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 8px;
	line-height: normal;
	padding: 0.75rem 1.25rem;
	text-decoration: none;
	top: 8px;
	width: auto;
	z-index: 100000;
	box-shadow: var(--shadow);
	border-radius: var(--radius-sm);
}

/* ==========================================================================
   3. LAYOUT
   Self-contained CSS Grid — nothing here depends on GeneratePress' float
   grid, which a 3.x install does not enqueue.
   ========================================================================== */

.gp-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
}

/* Per-entry width, set in the Page layout box on the edit screen.
   ------------------------------------------------------------------------- */

/* Wide: more room than the reading measure, still with margins, so a long
   paragraph does not run the whole width of a 27-inch monitor. */
.gp-container--wide {
	max-width: var(--container-wide);
}

/* Full width: no container at all. The blocks inside decide their own width,
   which is what the Wide and Full alignment buttons are for. */
.gp-container--full {
	max-width: none;
	padding-inline: 0;
}

/* The trail and the heading still need a measure of their own on a full-width
   page — left to the container they would start hard against the browser edge
   while the blocks below placed themselves properly. */
.gp-entry__lede {
	padding-inline: var(--gutter, 0);
}

/* Block alignment ---------------------------------------------------------- */

/* Inside a normal container an aligned block fills the content column. It does
   not break out to the viewport: with a sidebar the column is narrower than the
   screen, and a 50vw breakout would overshoot to the left. True full-bleed is
   what the Full width setting below is for, and it is predictable there. */
.gp-entry-content > .alignwide,
.gp-entry-content > .alignfull {
	max-width: none;
	margin-inline: 0;
}

/* On a full-width entry the content box already is the viewport, so alignment
   means what it says. Anything unaligned still gets a readable measure rather
   than running the whole width of the screen. */
.gp-container--full .gp-entry-content {
	max-width: none;
}

.gp-container--full .gp-entry-content > .alignfull {
	max-width: none;
	margin-inline: 0;
}

.gp-container--full .gp-entry-content > .alignwide {
	max-width: var(--container-wide);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.gp-container--full .gp-entry-content > :not(.alignfull):not(.alignwide) {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* A full-bleed band's own contents still need a measure. The band goes edge to
   edge — that is the point of it — but the heading inside it starting hard
   against the browser frame is not a design, it is a missing container. Both
   selectors are needed: the block editor emits a group's children directly in
   newer WordPress and inside __inner-container in older markup. */
.gp-container--full .gp-entry-content > .alignfull > :not(.alignfull):not(.alignwide),
.gp-container--full .gp-entry-content > .alignfull > .wp-block-group__inner-container > :not(.alignfull):not(.alignwide) {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* The gutter is on the contents, never on the band itself: a band with side
   padding would stop its own background short of the edge. Both the band's
   inner text and an unaligned paragraph outside it therefore start at exactly
   the same place, which is the whole reason to have one measure. */
.gp-container--full .gp-entry-content > .alignfull {
	padding-inline: 0;
}

/* Wide entries keep a container, so they only need the article measure lifted;
   the container is doing the width limiting. */
.gp-container--wide .gp-entry-content {
	max-width: none;
}

.alignfull img,
.alignwide img {
	width: 100%;
}

.site-content > .gp-main,
.gp-main {
	min-width: 0;
}

.site-content > .gp-main {
	flex: 1 1 100%;
	width: 100%;
}

/* Safety net: GeneratePress fires generate_before_footer after it closes the
   content wrapper. Should any build fire it inside that flex row, keep the
   footer on its own full-width line rather than squeezing <main>. */
.site-content:has( > .gp-footer ) {
	flex-wrap: wrap;
}

.site-content > .gp-footer {
	flex: 1 1 100%;
	width: 100%;
}

.gp-main {
	padding-block: clamp(1.5rem, 3vw, 2.25rem) var(--section-gap);
	padding-inline: var(--gutter);
}

.grid-container .gp-main {
	padding-inline: 0;
}

/* Full-width entries: the side padding has to come off here, and off
   GeneratePress' own container too. Its .grid-container carries both a
   max-width and the Content Padding set in the Customizer, so a page can only
   truly reach the viewport edges once both are cancelled. This is why choosing
   "Full width" in GeneratePress' own Content Container box did nothing on its
   own: that setting targets markup this child theme replaced. */
body.gp-width-full .gp-main {
	padding-inline: 0;
}

body.gp-width-full .site.grid-container,
body.gp-width-full .site-content > .grid-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.gp-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap-lg);
	align-items: start;
}

@media (min-width: 1025px) {
	.gp-layout:not(.gp-layout--full) {
		grid-template-columns: minmax(0, 1fr) var(--sidebar);
	}
}

.gp-layout__content,
.gp-layout__sidebar {
	min-width: 0;
}

@media (min-width: 1025px) {
	.gp-layout__sidebar {
		position: sticky;
		top: var(--sp-5);
	}
}

.gp-layout__content > * + * {
	margin-top: var(--section-gap);
}

.gp-layout__content > .gp-section-header + * {
	margin-top: var(--sp-5);
}

/* ==========================================================================
   4. MASTHEAD
   ========================================================================== */

/* When the child masthead renders, hide the parent's header block. The
   remove_action() in inc/masthead.php normally means there is nothing to
   hide; this is the fallback if the parent's callback name ever differs. */
.gp-has-masthead .site-header {
	display: none;
}

.gp-masthead {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	font-family: var(--display);
}

.gp-masthead .gp-container {
	padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* --- Header layout options (Customize → Masthead) ------------------------- */

.gp-masthead--borderless {
	border-bottom: 0;
}

.gp-masthead--sticky {
	position: sticky;
	top: 0;
	z-index: 40;
}

/* GeneratePress' admin bar offset, so a sticky header does not hide under it. */
.admin-bar .gp-masthead--sticky {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .gp-masthead--sticky {
		top: 46px;
	}
}

/* Inline: the navigation moves into the brand row. The markup puts it there,
   so on narrow screens it has to be sent back to its own full-width line —
   otherwise the open disclosure would sit inside the logo row. */
.gp-masthead--inline .gp-masthead__brandbar-inner {
	flex-wrap: wrap;
}

.gp-masthead--inline .gp-masthead__brand {
	order: 1;
}

.gp-masthead--inline .gp-masthead__nav {
	order: 9;
	flex: 1 1 100%;
	margin-inline: 0;
}

.gp-masthead--inline .gp-masthead__actions {
	order: 2;
}

.gp-masthead--inline .gp-masthead__nav .gp-container {
	padding-inline: 0;
}

@media (min-width: 900px) {
	.gp-masthead--inline .gp-masthead__nav {
		order: 2;
		/* Take only the width the links need. The row is already
		   space-between, so no auto margin is needed — and an auto margin here
		   would eat the free space and push the actions onto a second line. */
		flex: 0 1 auto;
		min-width: 0;
		border-top: 0;
		margin-inline: 0;
	}

	.gp-masthead--inline .gp-masthead__menu {
		flex-wrap: nowrap;
		gap: clamp(0.6rem, 1.4vw, 1.25rem);
	}

	/* The inline row is tight by definition: the search field gives up width
	   first, and the nav wraps to its own line only if that is still not
	   enough. */
	.gp-masthead--inline .gp-masthead__search input[type="search"] {
		width: clamp(6rem, 11vw, 11rem);
	}

	.gp-masthead--inline .gp-masthead__actions {
		order: 3;
		margin-left: 0;
	}
}

/* Centred: brand in the middle, actions split either side. */
@media (min-width: 900px) {
	.gp-masthead--centered .gp-masthead__brandbar-inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}

	.gp-masthead--centered .gp-masthead__brand {
		grid-column: 2;
		text-align: center;
	}

	.gp-masthead--centered .gp-masthead__logo img {
		margin-inline: auto;
	}

	.gp-masthead--centered .gp-masthead__actions {
		grid-column: 3;
		justify-content: flex-end;
	}

	.gp-masthead--centered .gp-masthead__menu {
		justify-content: center;
	}
}

/* --- Header and footer widget strips -------------------------------------- */

.gp-masthead__widgets {
	border-top: 1px solid var(--line);
	background: var(--surface-alt);
}

.gp-masthead__widgets .gp-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-4);
	padding-block: var(--sp-3);
}

.gp-header-widget {
	min-width: 0;
	font-family: var(--body);
	font-size: 0.9rem;
}

.gp-header-widget .widget-title {
	margin: 0 0 var(--sp-1);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.gp-footer__strip {
	padding-block: var(--sp-6);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.gp-footer__strip .widget-title {
	color: var(--on-dark);
}

.gp-footer__strip,
.gp-footer__strip p,
.gp-footer__strip li {
	color: var(--on-dark-2);
}

.gp-footer__strip a {
	color: var(--on-dark);
}

.gp-masthead__utility {
	background: var(--navy);
	color: var(--on-dark-2);
	font-size: 0.75rem;
}

.gp-masthead__utility-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding-block: var(--sp-2);
}

.gp-masthead__edition {
	margin: 0;
	letter-spacing: 0.02em;
}

.gp-masthead__utility-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gp-masthead__utility-menu a {
	color: var(--on-dark-2);
	text-decoration: none;
	font-weight: 500;
}

.gp-masthead__utility-menu a:hover,
.gp-masthead__utility-menu a:focus-visible {
	color: var(--on-dark);
	text-decoration: underline;
}

.gp-masthead__brandbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5);
	padding-block: clamp(0.9rem, 2vw, 1.4rem);
}

.gp-masthead__brand {
	min-width: 0;
}

.gp-masthead__title {
	margin: 0;
	font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
}

.gp-masthead__title a {
	color: var(--navy);
	text-decoration: none;
}

.gp-masthead__title a:hover {
	color: var(--brand-ink);
}

/* An explicit height fully determines the box before the file arrives, so the
   masthead cannot grow when the logo loads. `max-height` alone left the
   element "unsized" as far as Lighthouse was concerned. */
.gp-masthead__logo img {
	display: block;
	height: clamp(34px, 9vw, 52px);
	width: auto;
	max-width: min(100%, 280px);
	object-fit: contain;
}

.gp-masthead__tagline {
	margin: 0.2rem 0 0;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-ink);
}

.gp-masthead__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.gp-masthead__search {
	display: none;
	align-items: center;
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	padding-left: var(--sp-4);
}

@media (min-width: 900px) {
	.gp-masthead__search {
		display: flex;
	}
}

.gp-masthead__search input {
	border: 0;
	background: none;
	padding: 0.5rem 0;
	font: inherit;
	font-size: 0.875rem;
	color: var(--ink);
	width: 10rem;
}

.gp-masthead__search input:focus {
	outline: none;
}

.gp-masthead__search:focus-within {
	border-color: var(--brand-ink);
	box-shadow: var(--focus-ring);
}

.gp-masthead__search button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 0;
	background: none;
	color: var(--ink-3);
	cursor: pointer;
	border-radius: 50%;
}

.gp-masthead__search button:hover {
	color: var(--brand-ink);
}

.gp-masthead__cta {
	display: none;
}

@media (min-width: 600px) {
	.gp-masthead__cta {
		display: inline-flex;
	}
}

.gp-masthead__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--navy);
	cursor: pointer;
}

@media (min-width: 900px) {
	.gp-masthead__toggle {
		display: none;
	}
}

.gp-masthead__toggle-close,
.gp-masthead__toggle[aria-expanded="true"] .gp-masthead__toggle-open {
	display: none;
}

.gp-masthead__toggle[aria-expanded="true"] .gp-masthead__toggle-close {
	display: inline-flex;
}

.gp-masthead__nav {
	border-top: 1px solid var(--line);
	background: var(--surface);
}

/* Without JavaScript the menu is always visible, so nothing is unreachable.
   With JavaScript it becomes a disclosure below the nav breakpoint only. */
.gp-masthead__nav {
	display: block;
}

@media (max-width: 899px) {
	.gp-js .gp-masthead__nav {
		display: none;
	}

	.gp-js .gp-masthead__nav.is-open {
		display: block;
	}
}

.gp-masthead__menu {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 900px) {
	.gp-masthead__menu {
		flex-direction: row;
		flex-wrap: wrap;
		gap: clamp(0.75rem, 2vw, 1.75rem);
	}
}

.gp-masthead__menu li {
	position: relative;
}

.gp-masthead__menu a {
	display: block;
	padding: 0.7rem 0;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--navy);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

@media (max-width: 899px) {
	.gp-masthead__menu > li + li a {
		border-top: 1px solid var(--line);
	}
}

.gp-masthead__menu a:hover,
.gp-masthead__menu a:focus-visible {
	color: var(--brand-ink);
}

.gp-masthead__menu .current-menu-item > a,
.gp-masthead__menu .current_page_item > a {
	color: var(--brand-ink);
	border-bottom-color: var(--brand);
}

/* Second level */
.gp-masthead__menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 0 var(--sp-4);
}

@media (min-width: 900px) {
	.gp-masthead__menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 30;
		min-width: 12rem;
		padding: var(--sp-2);
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--speed) var(--ease);
	}

	.gp-masthead__menu li:hover > .sub-menu,
	.gp-masthead__menu li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
	}

	.gp-masthead__menu .sub-menu a {
		padding: 0.45rem 0.6rem;
		border: 0;
	}
}

/* ==========================================================================
   5. PRIMITIVES
   ========================================================================== */

.gp-eyebrow {
	margin: 0 0 var(--sp-2);
	font-family: var(--display);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-ink);
}

.gp-eyebrow--invert {
	color: var(--brand-on-dark);
}

.gp-kicker {
	display: inline-block;
	margin-bottom: var(--sp-1);
	font-family: var(--display);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--brand-ink);
	text-decoration: none;
}

a.gp-kicker:hover {
	color: var(--brand-deep);
	text-decoration: underline;
}

.gp-badge {
	display: inline-block;
	background: var(--brand-ink);
	color: #fff;
	font-family: var(--display);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.28rem 0.7rem;
	border-radius: var(--radius-sm);
	line-height: 1.4;
	text-decoration: none;
	transition: background var(--speed) var(--ease);
}

a.gp-badge:hover,
a.gp-badge:focus-visible {
	background: var(--brand-deep);
	color: #fff;
}

.gp-pill {
	display: inline-block;
	padding: 0.18rem 0.6rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--ink-3);
	white-space: nowrap;
}

.gp-tag {
	display: inline-block;
	padding: 0.2rem 0.55rem;
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--ink-3);
	text-decoration: none;
}

.gp-tag:hover {
	background: var(--brand-tint);
	border-color: var(--brand);
	color: var(--brand-deep);
}

.gp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: 0.75rem 1.4rem;
	min-height: 44px;
	background: var(--brand-ink);
	color: #fff;
	font-family: var(--display);
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1.2;
	border: 1px solid transparent;
	border-radius: var(--radius);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--speed) var(--ease), box-shadow var(--speed) var(--ease), color var(--speed) var(--ease);
}

.gp-main .gp-button,
.gp-footer .gp-button,
.gp-masthead .gp-button {
	color: #fff;
}

.gp-button:hover,
.gp-button:focus-visible {
	background: var(--brand-deep);
	color: #fff;
	box-shadow: var(--shadow);
}

.gp-button svg {
	transition: transform var(--speed) var(--ease);
}

.gp-button:hover svg {
	transform: translateX(3px);
}

.gp-button--small {
	min-height: 38px;
	padding: 0.45rem 0.9rem;
	font-size: 0.82rem;
}

.gp-button--block {
	width: 100%;
}

.gp-button--quiet {
	background: var(--surface);
	border-color: var(--line-2);
	color: var(--navy);
}

.gp-main .gp-button--quiet {
	color: var(--navy);
}

.gp-button--quiet:hover,
.gp-button--quiet:focus-visible {
	background: var(--brand-tint);
	border-color: var(--brand);
	color: var(--brand-deep);
}

.gp-button--invert {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.32);
	color: #fff;
}

.gp-button--invert:hover,
.gp-button--invert:focus-visible {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

.gp-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

.gp-avatar {
	border-radius: 50%;
	display: block;
}

.gp-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.16), transparent 58%),
		linear-gradient(140deg, var(--navy) 0%, var(--brand-deep) 100%);
	position: relative;
}

.gp-placeholder::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 2rem;
	height: 2rem;
	background: rgba(255, 255, 255, 0.82);
	-webkit-mask: linear-gradient(#000 0 0) center / 100% 24% no-repeat, linear-gradient(#000 0 0) center / 24% 100% no-repeat;
	mask: linear-gradient(#000 0 0) center / 100% 24% no-repeat, linear-gradient(#000 0 0) center / 24% 100% no-repeat;
}

.gp-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-4);
	color: var(--ink-3);
	font-size: 0.82rem;
	line-height: 1.4;
}

.gp-meta__item {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
}

.gp-meta__item svg {
	opacity: 0.7;
}

.gp-meta__item--author {
	font-weight: 600;
	color: var(--ink-2);
}

.gp-meta__item--author img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
}

.gp-meta a {
	color: inherit;
	text-decoration: none;
}

.gp-meta a:hover {
	color: var(--brand-ink);
	text-decoration: underline;
}

.gp-meta--invert,
.gp-meta--invert .gp-meta__item--author {
	color: var(--on-dark-2);
}

.gp-meta--invert a {
	color: var(--on-dark);
}

.gp-notice {
	margin: 0 0 var(--sp-5);
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--radius);
	border: 1px solid;
	font-size: 0.9rem;
}

.gp-notice--success {
	background: var(--ok-tint);
	border-color: var(--ok);
	color: var(--ok);
}

.gp-notice--error {
	background: var(--brand-tint);
	border-color: var(--brand-ink);
	color: var(--brand-deep);
}

.gp-notice--warning {
	background: var(--warn-tint);
	border-color: var(--warn);
	color: var(--warn);
}

.gp-section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--sp-3);
	padding-bottom: var(--sp-3);
	border-bottom: 2px solid var(--navy);
	margin-bottom: var(--sp-5);
}

.gp-section-header__title {
	margin: 0;
	font-size: clamp(1.1rem, 2.2vw, 1.35rem);
	font-weight: 800;
	letter-spacing: -0.01em;
}

.gp-section-header__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--brand-ink);
	text-decoration: none;
}

.gp-section-header__link:hover {
	text-decoration: underline;
}

.gp-breadcrumbs {
	margin-bottom: var(--sp-4);
	font-size: 0.78rem;
	color: var(--ink-3);
}

.gp-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gp-breadcrumbs li + li::before {
	content: "/";
	margin-right: var(--sp-2);
	color: var(--line-2);
}

.gp-breadcrumbs a {
	color: var(--ink-3);
	text-decoration: none;
}

.gp-breadcrumbs a:hover {
	color: var(--brand-ink);
	text-decoration: underline;
}

/* ==========================================================================
   6. HOMEPAGE
   ========================================================================== */

.gp-home-lead {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap-lg);
	padding-bottom: var(--section-gap);
	border-bottom: 1px solid var(--line);
}

@media (min-width: 1000px) {
	.gp-home-lead {
		grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
	}
}

.gp-home-lead__rail {
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
	min-width: 0;
}

/* Lead story */
.gp-lead {
	display: grid;
	gap: var(--sp-5);
	min-width: 0;
}

.gp-lead__media {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-lg);
	aspect-ratio: 16 / 9;
	background: var(--surface-sunk);
}

.gp-lead__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s var(--ease);
}

@media (hover: hover) {
	.gp-lead__media:hover .gp-lead__image {
		transform: scale(1.03);
	}
}

.gp-lead__content > * + * {
	margin-top: var(--sp-4);
}

.gp-lead__title {
	margin: 0;
	font-size: clamp(1.6rem, 1rem + 2.6vw, 2.75rem);
	line-height: 1.08;
	letter-spacing: -0.03em;
}

.gp-lead__title a {
	color: var(--navy);
	text-decoration: none;
}

.gp-lead__title a:hover {
	color: var(--brand-ink);
}

.gp-lead__deck {
	margin: 0;
	font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
	color: var(--ink-2);
	line-height: 1.6;
	max-width: 58ch;
}

.gp-lead__meta {
	padding-top: var(--sp-4);
	border-top: 1px solid var(--line);
}

/* Rail blocks */
.gp-rail-block {
	min-width: 0;
}

.gp-rail-block__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
	flex-wrap: wrap;
}

.gp-rail-block__title {
	margin: 0 0 var(--sp-4);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--navy);
	padding-bottom: var(--sp-2);
	border-bottom: 2px solid var(--brand);
	display: inline-block;
}

.gp-rail-block__head .gp-rail-block__title {
	margin-bottom: var(--sp-4);
}

.gp-rail-block__text {
	margin: 0 0 var(--sp-4);
	font-size: 0.9rem;
	color: var(--ink-3);
}

.gp-rail-block__more {
	margin: var(--sp-4) 0 0;
	font-size: 0.82rem;
	font-weight: 700;
}

.gp-rail-block__more a {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--brand-ink);
	text-decoration: none;
}

.gp-rail-block__more a:hover {
	text-decoration: underline;
}

.gp-rail-block--panel {
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--sp-5);
}


/* Story list (More top stories) */
.gp-storylist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.gp-storylist__item {
	padding-block: var(--sp-4);
	border-top: 1px solid var(--line);
}

.gp-storylist__item:first-child {
	border-top: 0;
	padding-top: 0;
}

.gp-storylist__title {
	margin: 0 0 var(--sp-2);
	font-size: 1rem;
	line-height: 1.35;
	font-weight: 700;
}

.gp-storylist__title a {
	color: var(--navy);
	text-decoration: none;
}

.gp-storylist__title a:hover {
	color: var(--brand-ink);
}

.gp-storylist__meta {
	margin: 0;
	font-size: 0.78rem;
	color: var(--ink-3);
}

/* Ranked lists (Trending, Most read) */
.gp-ranked {
	list-style: none;
	counter-reset: gp-rank;
	margin: 0;
	padding: 0;
}

.gp-ranked__item {
	counter-increment: gp-rank;
	display: grid;
	grid-template-columns: 1.6rem minmax(0, 1fr);
	gap: var(--sp-3);
	padding-block: var(--sp-3);
	border-top: 1px solid var(--line);
	font-size: 0.92rem;
	line-height: 1.4;
}

.gp-ranked__item:first-child {
	border-top: 0;
	padding-top: 0;
}

.gp-ranked__item::before {
	content: counter(gp-rank);
	font-family: var(--display);
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--brand);
	font-variant-numeric: tabular-nums;
	line-height: 1.45;
}

.gp-ranked__item a {
	color: var(--navy);
	text-decoration: none;
	font-weight: 600;
}

.gp-ranked__item a:hover {
	color: var(--brand-ink);
	text-decoration: underline;
}


/* Sections */
.gp-home-section {
	padding-top: var(--section-gap);
}

.gp-home-section__more {
	margin: var(--sp-6) 0 0;
}

.gp-home-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap-lg);
	align-items: start;
}

@media (min-width: 1025px) {
	.gp-home-body {
		grid-template-columns: minmax(0, 1fr) var(--sidebar);
	}
}

.gp-home-body__main,
.gp-home-body__rail {
	min-width: 0;
}

.gp-home-body__rail {
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
	padding-top: var(--section-gap);
}

/* Long read band */
.gp-longread {
	margin-top: var(--section-gap);
	background: var(--navy);
	color: var(--on-dark-2);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.gp-longread__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	align-items: stretch;
}

@media (min-width: 860px) {
	.gp-longread__inner {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	}
}

.gp-longread__content {
	padding: clamp(1.5rem, 4vw, 3rem);
}

.gp-longread__content > * + * {
	margin-top: var(--sp-4);
}

.gp-longread__title {
	margin: 0;
	font-size: clamp(1.4rem, 1rem + 1.8vw, 2.1rem);
	line-height: 1.15;
	color: #fff;
}

.gp-longread__title a {
	color: #fff;
	text-decoration: none;
}

.gp-longread__title a:hover {
	color: var(--brand-on-dark);
}

.gp-longread__deck {
	margin: 0;
	color: var(--on-dark-2);
	max-width: 52ch;
}

.gp-longread__action {
	margin: 0;
}

/* The image sits centred inside its panel rather than bleeding to the edges,
   so portrait and landscape artwork both read as deliberate. */
.gp-longread__media {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--navy-700);
	order: -1;
}

@media (min-width: 860px) {
	.gp-longread__media {
		order: 0;
	}
}

.gp-longread__image {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: min(22rem, 60vh);
	margin-inline: auto;
	object-fit: contain;
	border-radius: var(--radius);
}

/* Latest stories: the feed dims while a filter is loading, and the chips keep
   their link semantics so they still work with JavaScript off. */
.gp-storyfeed.is-loading {
	opacity: 0.55;
	transition: opacity 120ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.gp-storyfeed.is-loading {
		transition: none;
	}
}

.gp-storyfeed__empty {
	margin: 0;
	padding: var(--sp-6) 0;
	color: var(--ink-3);
}

/* Tabs */
.gp-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-bottom: var(--sp-5);
}

.gp-tabs__tab {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--line-2);
	border-radius: var(--radius-pill);
	font-family: var(--display);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ink-2);
	text-decoration: none;
	transition: all var(--speed) var(--ease);
}

.gp-tabs__tab:hover,
.gp-tabs__tab:focus-visible {
	border-color: var(--brand);
	color: var(--brand-deep);
	background: var(--brand-wash);
}

.gp-tabs__tab.is-current {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

.gp-main .gp-tabs__tab.is-current {
	color: #fff;
}

/* Link lists */
.gp-linklist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gp-linklist li + li {
	border-top: 1px solid var(--line);
}

.gp-linklist a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: 0.6rem 0;
	text-decoration: none;
	color: var(--ink-2);
	font-size: 0.9rem;
	font-weight: 600;
}

.gp-linklist a:hover {
	color: var(--brand-ink);
}

.gp-linklist__count {
	flex-shrink: 0;
	padding: 0.1rem 0.5rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   7. CARDS AND STORY ROWS
   ========================================================================== */

.gp-card-grid {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.gp-card-grid--compact {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
	gap: var(--sp-5);
}

.gp-card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

@media (hover: hover) {
	.gp-card:hover {
		transform: translateY(-3px);
		box-shadow: var(--shadow);
		border-color: var(--line-2);
	}

	.gp-card:hover .gp-card__image {
		transform: scale(1.04);
	}
}

.gp-card:focus-within {
	border-color: var(--brand-ink);
	box-shadow: var(--shadow);
}

.gp-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--surface-sunk);
}

.gp-card__media-link {
	display: block;
	width: 100%;
	height: 100%;
}

.gp-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s var(--ease);
}

.gp-card__category {
	position: absolute;
	top: var(--sp-3);
	left: var(--sp-3);
	z-index: 2;
	box-shadow: 0 2px 8px rgba(6, 32, 68, 0.28);
}

.gp-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--sp-5);
	gap: var(--sp-3);
}

.gp-card__title {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.3;
}

.gp-card__title a {
	color: var(--navy);
	text-decoration: none;
}

.gp-card__title a:hover {
	color: var(--brand-ink);
	text-decoration: underline;
}

.gp-card__excerpt {
	margin: 0;
	font-size: 0.9rem;
	color: var(--ink-3);
	line-height: 1.55;
	flex: 1 1 auto;
}

.gp-card__meta {
	margin-top: auto;
	padding-top: var(--sp-3);
	border-top: 1px solid var(--line);
	font-size: 0.78rem;
}

/* Story feed */
.gp-storyfeed {
	display: flex;
	flex-direction: column;
}

.gp-story {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-4);
	padding-block: var(--sp-5);
	border-top: 1px solid var(--line);
}

.gp-storyfeed > .gp-story:first-child {
	border-top: 0;
	padding-top: 0;
}

@media (min-width: 560px) {
	.gp-story {
		grid-template-columns: minmax(0, 1fr) 9rem;
		align-items: start;
	}
}

.gp-story__body {
	min-width: 0;
}

.gp-story__title {
	margin: 0 0 var(--sp-2);
	font-size: 1.15rem;
	line-height: 1.3;
}

.gp-story__title a {
	color: var(--navy);
	text-decoration: none;
}

.gp-story__title a:hover {
	color: var(--brand-ink);
}

.gp-story__excerpt {
	margin: 0 0 var(--sp-3);
	font-size: 0.92rem;
	color: var(--ink-3);
	line-height: 1.55;
}

.gp-story__media {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-sm);
	aspect-ratio: 16 / 10;
	background: var(--surface-sunk);
}

.gp-story__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   8. ARTICLE
   ========================================================================== */

.gp-article__header {
	margin-bottom: var(--sp-6);
}

.gp-article__category {
	margin-bottom: var(--sp-4);
}

.gp-article__title {
	margin: 0 0 var(--sp-4);
	font-size: clamp(1.75rem, 1.1rem + 2.8vw, 3rem);
	line-height: 1.08;
	letter-spacing: -0.03em;
}

.gp-article__deck {
	margin: 0 0 var(--sp-5);
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
	line-height: 1.55;
	color: var(--ink-2);
	max-width: 60ch;
}

.gp-article__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--line);
}

.gp-share {
	display: flex;
	gap: var(--sp-2);
}

.gp-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	color: var(--ink-3);
	text-decoration: none;
	transition: all var(--speed) var(--ease);
}

.gp-share__link:hover,
.gp-share__link:focus-visible {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

.gp-main .gp-share__link:hover {
	color: #fff;
}

.gp-article__figure {
	margin: 0 0 var(--sp-6);
}

.gp-article__figure img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius);
}

.gp-article__figure figcaption {
	margin-top: var(--sp-2);
	font-size: 0.8rem;
	color: var(--ink-3);
}

.gp-takeaways {
	margin: 0 0 var(--sp-6);
	padding: var(--sp-5);
	background: var(--brand-wash);
	border: 1px solid var(--brand-tint);
	border-left: 4px solid var(--brand);
	border-radius: var(--radius);
}

.gp-takeaways__title {
	margin: 0 0 var(--sp-3);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-deep);
}

.gp-takeaways ul,
.gp-takeaways ol {
	margin: 0;
	padding-left: 1.15rem;
	color: var(--ink-2);
	font-size: 0.95rem;
}

.gp-takeaways li + li {
	margin-top: var(--sp-2);
}

.gp-pullquote {
	margin: var(--sp-7) 0;
	padding-left: var(--sp-5);
	border-left: 4px solid var(--brand);
}

.gp-pullquote blockquote {
	margin: 0;
	font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
	line-height: 1.35;
	font-weight: 600;
	color: var(--navy);
}

.gp-pullquote figcaption {
	margin-top: var(--sp-3);
	font-size: 0.85rem;
	color: var(--ink-3);
}

.gp-entry-content {
	font-size: clamp(1rem, 0.97rem + 0.2vw, 1.075rem);
	line-height: 1.72;
	max-width: 70ch;
	color: var(--ink-2);
}

.gp-layout--full .gp-entry-content {
	margin-inline: auto;
}

.gp-entry-content > * + * {
	margin-top: 1.5em;
}

.gp-entry-content h2,
.gp-entry-content h3,
.gp-entry-content h4 {
	margin-top: 1.9em;
	margin-bottom: 0.55em;
}

.gp-entry-content h2 {
	font-size: 1.45rem;
}

.gp-entry-content h3 {
	font-size: 1.2rem;
}

.gp-entry-content h4 {
	font-size: 1.05rem;
}

.gp-entry-content ul,
.gp-entry-content ol {
	padding-left: 1.35em;
}

.gp-entry-content li + li {
	margin-top: 0.4em;
}

.gp-entry-content blockquote {
	margin-inline: 0;
	padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
	border-left: 4px solid var(--brand);
	color: var(--ink-3);
	font-style: italic;
}

.gp-entry-content blockquote p:last-child {
	margin-bottom: 0;
}

.gp-entry-content img,
.gp-entry-content figure img {
	border-radius: var(--radius-sm);
}

.gp-entry-content figcaption {
	font-size: 0.8rem;
	color: var(--ink-3);
	text-align: center;
	margin-top: var(--sp-2);
}

.gp-entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.gp-entry-content th,
.gp-entry-content td {
	border: 1px solid var(--line);
	padding: var(--sp-2) var(--sp-3);
	text-align: left;
}

.gp-entry-content th {
	background: var(--surface-alt);
	color: var(--navy);
}

/* Wide content scrolls inside itself, never the page. */
.gp-entry-content > table,
.gp-entry-content > pre,
.gp-entry-content .wp-block-table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.gp-entry-content pre {
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: var(--sp-4);
	font-size: 0.86rem;
}

.gp-page-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-top: var(--sp-6);
	font-size: 0.9rem;
}

.gp-page-links__label {
	font-weight: 700;
	color: var(--navy);
}

.gp-page-links a,
.gp-page-links__item {
	display: inline-block;
	min-width: 2.25rem;
	padding: 0.35rem 0.6rem;
	text-align: center;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	text-decoration: none;
}

.gp-page-links > .gp-page-links__item {
	background: var(--brand-ink);
	border-color: var(--brand-ink);
	color: #fff;
}

.gp-post-tags {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--line);
}

.gp-post-tags__label {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--display);
	font-weight: 800;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--navy);
}

.gp-post-tags__list {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.gp-post-tags a {
	display: inline-block;
	padding: 0.28rem 0.7rem;
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	color: var(--ink-3);
	font-size: 0.8rem;
	text-decoration: none;
	transition: all var(--speed) var(--ease);
}

.gp-post-tags a:hover,
.gp-post-tags a:focus-visible {
	background: var(--brand-ink);
	border-color: var(--brand-ink);
	color: #fff;
}

.gp-post-nav {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-4);
}

@media (min-width: 640px) {
	.gp-post-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.gp-post-nav__link {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-4) var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-decoration: none;
	transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.gp-post-nav__link:hover,
.gp-post-nav__link:focus-visible {
	border-color: var(--brand);
	box-shadow: var(--shadow-sm);
}

.gp-post-nav__link--next {
	grid-column: 2;
	text-align: right;
}

@media (max-width: 639px) {
	.gp-post-nav__link--next {
		grid-column: auto;
		text-align: left;
	}
}

.gp-post-nav__label {
	font-family: var(--display);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--brand-ink);
}

.gp-post-nav__title {
	font-weight: 700;
	color: var(--navy);
	line-height: 1.3;
}

.gp-author-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--sp-4);
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

@media (min-width: 640px) {
	.gp-author-box {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
		gap: var(--sp-5);
	}
}

.gp-author-box__avatar img {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	border: 3px solid var(--surface);
	box-shadow: var(--shadow-sm);
}

.gp-author-box__info {
	min-width: 0;
}

.gp-author-box__eyebrow {
	margin: 0 0 var(--sp-1);
	font-family: var(--display);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--brand-ink);
}

.gp-author-box__name {
	margin: 0 0 var(--sp-2);
	font-size: 1.1rem;
}

.gp-author-box__name a {
	color: var(--navy);
	text-decoration: none;
}

.gp-author-box__name a:hover {
	color: var(--brand-ink);
}

.gp-author-box__bio {
	margin: 0;
	color: var(--ink-3);
	font-size: 0.92rem;
}

/* Static pages */
.gp-entry-header {
	margin-bottom: var(--sp-6);
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--line);
}

.gp-entry-header__title {
	margin: 0;
	font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.6rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.gp-featured-image {
	margin: 0 0 var(--sp-6);
}

.gp-featured-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius);
}

.gp-featured-image__caption {
	margin-top: var(--sp-2);
	font-size: 0.8rem;
	color: var(--ink-3);
}

/* ==========================================================================
   9. COMMENTS
   ========================================================================== */

.gp-comments {
	scroll-margin-top: var(--sp-6);
}

.gp-comment__like-icon {
	display: inline-flex;
}

.gp-comment__like-label {
	white-space: nowrap;
}

.gp-comments__empty,
.gp-comments__closed {
	margin: 0 0 var(--sp-5);
	padding: var(--sp-4);
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink-3);
	font-size: 0.92rem;
}

.gp-comment-list,
.gp-comment-list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gp-comment-list > .gp-comment {
	padding-block: var(--sp-5);
	border-top: 1px solid var(--line);
}

.gp-comment-list > .gp-comment:first-child {
	border-top: 0;
	padding-top: 0;
}

/* Threading: an indent plus a rule so the hierarchy reads at a glance. */
.gp-comment-list .children {
	margin-top: var(--sp-4);
	padding-left: var(--sp-4);
	border-left: 2px solid var(--line);
}

@media (min-width: 700px) {
	.gp-comment-list .children {
		padding-left: var(--sp-6);
	}
}

.gp-comment-list .children > .gp-comment + .gp-comment {
	margin-top: var(--sp-4);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--line);
}

.gp-comment__body {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: var(--sp-3);
}

.gp-comment__avatar img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
}

.gp-comment__main {
	min-width: 0;
}

.gp-comment__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-3);
	margin-bottom: var(--sp-2);
}

.gp-comment__author {
	font-family: var(--display);
	font-weight: 700;
	color: var(--navy);
	font-size: 0.95rem;
}

.gp-comment__badge {
	padding: 0.1rem 0.45rem;
	background: var(--brand-tint);
	border-radius: var(--radius-sm);
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brand-deep);
}

.gp-comment__time {
	font-size: 0.78rem;
	color: var(--ink-3);
	text-decoration: none;
}

.gp-main .gp-comment__time {
	color: var(--ink-3);
}

.gp-comment__time:hover {
	text-decoration: underline;
}

.gp-comment__pending {
	margin: 0 0 var(--sp-2);
	font-size: 0.82rem;
	font-style: italic;
	color: var(--warn);
}

.gp-comment__text {
	font-size: 0.95rem;
	line-height: 1.62;
	color: var(--ink-2);
}

.gp-comment__text p {
	margin: 0 0 var(--sp-3);
}

.gp-comment__text p:last-child {
	margin-bottom: 0;
}

.gp-comment__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-3);
}

.gp-comment__like {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 32px;
	padding: 0.25rem 0.7rem;
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: var(--radius-pill);
	font-family: var(--display);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--ink-3);
	cursor: pointer;
	transition: all var(--speed) var(--ease);
}

.gp-comment__like:hover,
.gp-comment__like:focus-visible {
	border-color: var(--brand);
	color: var(--brand-deep);
	background: var(--brand-wash);
}

.gp-comment__like.is-liked {
	background: var(--brand-tint);
	border-color: var(--brand);
	color: var(--brand-deep);
}

.gp-comment__like[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.gp-comment__like-count {
	font-variant-numeric: tabular-nums;
	padding-left: var(--sp-2);
	border-left: 1px solid currentColor;
	opacity: 0.85;
}

.gp-comment__reply a,
.gp-comment__edit a {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 0.25rem 0.2rem;
	font-family: var(--display);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--ink-3);
	text-decoration: none;
}

.gp-comment__reply a:hover,
.gp-comment__edit a:hover {
	color: var(--brand-ink);
	text-decoration: underline;
}

/* Comment form */
.gp-comment-form {
	margin-top: var(--sp-7);
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.gp-comment-form__title {
	margin: 0 0 var(--sp-4);
	font-size: 1.15rem;
}

/* Name and email sit side by side on wider screens. comment_form() emits its
   fields as flat siblings, so the two-up is done on the form itself: every
   direct child spans, and only the plain rows fall back to one column each. */
@media (min-width: 640px) {
	.gp-comment-form {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--sp-4);
		align-items: start;
	}

	.gp-comment-form > * {
		grid-column: 1 / -1;
	}

	.gp-comment-form > .gp-form__row:not(.gp-form__row--full) {
		grid-column: auto;
	}
}

#cancel-comment-reply-link {
	margin-left: var(--sp-3);
	font-size: 0.82rem;
	font-weight: 600;
}

.gp-form__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-4);
}

@media (min-width: 640px) {
	.gp-form__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.gp-form__row {
	margin: 0 0 var(--sp-4);
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.gp-form__grid .gp-form__row {
	margin-bottom: 0;
}

.gp-form__row--full {
	grid-column: 1 / -1;
}

.gp-form__row label {
	font-family: var(--display);
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--navy);
}

.gp-form__required {
	color: var(--brand-ink);
}

.gp-form__hint {
	font-size: 0.78rem;
	color: var(--ink-3);
}

.gp-comment-form input[type="text"],
.gp-comment-form input[type="email"],
.gp-comment-form input[type="url"],
.gp-comment-form textarea,
.gp-apply__form input[type="text"],
.gp-apply__form input[type="email"],
.gp-apply__form input[type="tel"],
.gp-apply__form input[type="file"],
.gp-apply__form textarea {
	width: 100%;
	padding: 0.65rem 0.85rem;
	font: inherit;
	font-size: 0.95rem;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: var(--radius-sm);
	transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.gp-comment-form input:focus,
.gp-comment-form textarea:focus,
.gp-apply__form input:focus,
.gp-apply__form textarea:focus {
	outline: none;
	border-color: var(--brand-ink);
	box-shadow: var(--focus-ring);
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	font-size: 0.85rem;
	color: var(--ink-3);
}

.comment-form-cookies-consent label {
	font-weight: 400;
}

.form-submit {
	margin: var(--sp-4) 0 0;
}

/* ==========================================================================
   10. PAGINATION
   Previous/next are their own labelled controls with SVG chevrons rather than
   arrow glyphs, which depend on the reader's font and rendered inconsistently.
   ========================================================================== */

.gp-pagination {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
	margin-top: var(--sp-7);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--line);
}

.gp-pagination__pages {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
	list-style: none;
	margin: 0;
	padding: 0;
	order: 2;
}

.gp-pagination__edge {
	order: 1;
}

.gp-pagination__edge--next {
	order: 3;
}

.gp-pagination__edge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 44px;
	padding: 0 1rem;
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	font-family: var(--display);
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
	white-space: nowrap;
	transition: all var(--speed) var(--ease);
}

.gp-main a.gp-pagination__edge {
	color: var(--navy);
}

a.gp-pagination__edge:hover,
a.gp-pagination__edge:focus-visible {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

.gp-main a.gp-pagination__edge:hover {
	color: #fff;
}

.gp-pagination__edge.is-disabled {
	opacity: 0.4;
	cursor: default;
	background: var(--surface-alt);
}

.gp-pagination a.page-numbers,
.gp-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.7rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink-2);
	font-family: var(--display);
	font-size: 0.9rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	transition: all var(--speed) var(--ease);
}

.gp-main .gp-pagination a.page-numbers {
	color: var(--ink-2);
}

.gp-pagination a.page-numbers:hover,
.gp-pagination a.page-numbers:focus-visible {
	background: var(--brand-wash);
	border-color: var(--brand);
	color: var(--brand-deep);
}

.gp-pagination .page-numbers.current {
	background: var(--brand-ink);
	border-color: var(--brand-ink);
	color: #fff;
}

.gp-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: var(--ink-3);
	min-width: 1.5rem;
	padding: 0;
}

.gp-pagination__status {
	order: 4;
	flex-basis: 100%;
	margin: var(--sp-3) 0 0;
	text-align: center;
	font-size: 0.78rem;
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}

/* Core's the_comments_pagination() output */
.gp-pagination--comments {
	justify-content: space-between;
}

.gp-pagination--comments .nav-links {
	display: flex;
	width: 100%;
	justify-content: space-between;
	gap: var(--sp-3);
}

.gp-pagination--comments a {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 40px;
	padding: 0 0.9rem;
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	font-weight: 700;
	font-size: 0.84rem;
	text-decoration: none;
}

/* ==========================================================================
   10b. CARD GRID, ARCHIVE AND SEARCH HEROES
   ========================================================================== */

.gp-cardgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: var(--sp-5);
	margin-block: var(--sp-5);
}

/* Used where the item count is small and known (a 404, a block, a "browse"
   strip). auto-fit rather than auto-fill so three cards fill the row instead
   of leaving a phantom fourth column. */
.gp-cardgrid--compact {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--sp-4);
}

.gp-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.gp-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--surface-alt);
	overflow: hidden;
}

.gp-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 240ms ease-out;
}

.gp-card:hover .gp-card__image {
	transform: scale(1.03);
}

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

	.gp-card:hover .gp-card__image {
		transform: none;
	}
}

.gp-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-4);
	flex: 1 1 auto;
}

.gp-card__title {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.3;
}

.gp-card__title a {
	color: var(--ink);
	text-decoration: none;
}

.gp-card__title a:hover {
	color: var(--brand-ink);
}

.gp-card__excerpt {
	margin: 0;
	color: var(--ink-2);
	font-size: 0.9rem;
	line-height: 1.55;
}

.gp-card__meta {
	margin-top: auto;
	padding-top: var(--sp-2);
}

/* The lead card on a section front runs full width and splits on wider
   screens, so the newest story reads as the newest story. */
.gp-card--lead {
	margin-bottom: var(--sp-5);
}

@media (min-width: 760px) {
	.gp-card--lead {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		align-items: stretch;
	}

	.gp-card--lead .gp-card__media {
		aspect-ratio: auto;
		height: 100%;
	}

	.gp-card--lead .gp-card__body {
		padding: var(--sp-6);
		justify-content: center;
	}

	.gp-card--lead .gp-card__title {
		font-size: clamp(1.3rem, 1rem + 1.1vw, 1.85rem);
	}

	.gp-card--lead .gp-card__excerpt {
		font-size: 1rem;
	}
}

/* --- Page hero (archive, jobs, search) ------------------------------------
   One column: eyebrow, heading, intro, then the sibling-section chips. There
   used to be a stats rail down the right; a long value like a date was set at
   the same weight as the H1 and out-shouted it, and with no category
   description the left half sat empty. The heading is the point of this band. */

.gp-hero {
	background: var(--surface-alt);
	border-bottom: 1px solid var(--line);
	padding-block: clamp(1.25rem, 3.5vw, 2.25rem);
	margin-bottom: var(--section-gap);
}

/* Used where the hero sits inside an existing container (the jobs archive),
   so it draws as a card rather than a full-width band. */
.gp-hero--flush {
	margin-bottom: var(--sp-6);
	padding: clamp(1.25rem, 4vw, 2.25rem);
	border: 1px solid var(--line);
	border-left: 4px solid var(--brand);
	border-radius: var(--radius);
}

.gp-hero__text {
	min-width: 0;
}

.gp-hero__eyebrow {
	margin: 0 0 var(--sp-2);
	font-family: var(--display);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-ink);
}

.gp-hero__title {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.5rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--navy);
	overflow-wrap: break-word;
}

/* The reading measure belongs to the prose, not to the block — on the heading
   it forced "Nursing jobs & the staffing market" onto two lines. */
.gp-hero__description {
	margin-top: var(--sp-3);
	max-width: 62ch;
	color: var(--ink-2);
	font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
}

.gp-hero__description p {
	margin: 0 0 var(--sp-2);
}

.gp-hero__description p:last-child {
	margin-bottom: 0;
}

.gp-hero__chips {
	margin-top: var(--sp-4);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--line);
}

.gp-hero .gp-breadcrumbs {
	margin-bottom: var(--sp-3);
}

.gp-hero--center {
	text-align: center;
}

.gp-hero--center .gp-hero__text {
	margin-inline: auto;
}

.gp-chip__count {
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
	font-size: 0.75rem;
}

/* Job taxonomy archives ---------------------------------------------------- */

/* The header of a specialty, location, type or setting page. It carries the
   count, because "how many roles are here" is the first thing a nurse wants to
   know, and a row of sibling terms, because the second thing is "what else is
   near this". */
.gp-hero--jobterm {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-4) var(--sp-6);
}

.gp-hero--jobterm .gp-hero__text {
	flex: 1 1 22rem;
	min-width: 0;
}

.gp-hero__meta {
	margin: var(--sp-2) 0 0;
	font-size: 0.95rem;
	color: var(--ink-2);
}

.gp-hero__meta strong {
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

.gp-hero--jobterm .gp-hero__description {
	margin-top: var(--sp-3);
}

/* Capped so a state with forty cities does not turn the header into a wall of
   chips; it scrolls inside itself instead of pushing the listing down. */
.gp-hero__siblings {
	flex: 1 1 20rem;
	min-width: 0;
	max-height: 7.5rem;
	overflow-y: auto;
}

.gp-hero__siblings .gp-chips {
	justify-content: flex-start;
}

@media (min-width: 900px) {
	.gp-hero__siblings .gp-chips {
		justify-content: flex-end;
	}
}

/* Editable archive content ------------------------------------------------- */

/* Two optional blocks per term: an intro under the heading, and a longer piece
   after the listing. Both are ordinary post content, so they inherit the entry
   styles; these rules only place them. */
.gp-termcontent {
	max-width: 68ch;
}

.gp-termcontent--intro {
	margin: 0 0 var(--sp-6);
	font-size: 1.02rem;
	color: var(--ink-2);
}

.gp-termcontent--intro > :first-child {
	margin-top: 0;
}

.gp-termcontent--intro > :last-child {
	margin-bottom: 0;
}

/* Below the listing it is a separate section of the page, so it gets a rule
   above it and room to breathe. The rule spans the page while the text stays
   at a readable measure — a 68ch border stopping halfway across looks like a
   mistake rather than a divider. */
.gp-termcontent--details {
	max-width: none;
	margin: var(--sp-8) 0 var(--sp-4);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--line);
}

.gp-termcontent--details > * {
	max-width: 68ch;
}

.gp-termcontent--details > :first-child {
	margin-top: 0;
}

.gp-search-hero {
	background: var(--surface-alt);
	border-bottom: 1px solid var(--line);
	padding-block: clamp(1.75rem, 5vw, 3rem);
	margin-bottom: var(--section-gap);
	text-align: center;
}

.gp-search-hero__title {
	margin: var(--sp-2) 0 var(--sp-5);
	font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
	line-height: 1.2;
}

.gp-search-hero__form {
	max-width: 34rem;
	margin: 0 auto;
}

.gp-search-hero__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	justify-content: center;
	margin-top: var(--sp-5);
}

.gp-search-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink-2);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.gp-search-tab.is-current {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

a.gp-search-tab:hover {
	border-color: var(--brand);
	color: var(--brand-ink);
}

.gp-browse {
	margin-top: var(--section-gap);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--line);
}

.gp-browse__title {
	margin: 0 0 var(--sp-4);
	font-size: 1.15rem;
}

.gp-browse__chips {
	margin-bottom: var(--sp-5);
}

.gp-404__chips {
	justify-content: center;
	margin-top: var(--sp-5);
}

.gp-404-jobs,
.gp-404-stories {
	margin-top: var(--section-gap);
}

.gp-404-jobs__chips {
	margin-bottom: var(--sp-5);
}

.gp-joblist--compact .gp-job {
	padding-block: var(--sp-4);
}

/* ==========================================================================
   11. SEARCH FORM, PAGE HEADERS, EMPTY STATES, 404
   ========================================================================== */

.gp-search-form {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	width: 100%;
}

@media (min-width: 480px) {
	.gp-search-form {
		flex-direction: row;
	}
}

.gp-search-form__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.7rem 0.95rem;
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.gp-search-form__input:focus {
	border-color: var(--brand-ink);
	box-shadow: var(--focus-ring);
	outline: none;
}

.gp-search-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: 44px;
	padding: 0.7rem 1.3rem;
	background: var(--brand-ink);
	color: #fff;
	font-family: var(--display);
	font-weight: 700;
	font-size: 0.9rem;
	border: 1px solid var(--brand-ink);
	border-radius: var(--radius);
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--speed) var(--ease);
}

.gp-search-form__submit:hover {
	background: var(--brand-deep);
	border-color: var(--brand-deep);
}

.gp-search-form-wrap--page {
	max-width: 40rem;
}

.gp-search-form-wrap--centered {
	max-width: 32rem;
	margin-inline: auto;
}

.gp-page-header {
	padding: clamp(1.25rem, 4vw, 2.25rem);
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-left: 4px solid var(--brand);
	border-radius: var(--radius);
}

.gp-page-header__eyebrow {
	margin: 0 0 var(--sp-2);
	font-family: var(--display);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-ink);
}

.gp-page-header__title {
	margin: 0;
	font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.25rem);
}

.gp-page-header__description {
	margin: var(--sp-3) 0 0;
	max-width: 62ch;
	color: var(--ink-2);
}

.gp-page-header__description p:last-child {
	margin-bottom: 0;
}

.gp-page-header--jobs {
	text-align: left;
	margin-bottom: var(--sp-6);
}

.gp-empty {
	text-align: center;
	padding: clamp(2rem, 6vw, 3.5rem) var(--sp-4);
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.gp-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.25rem;
	height: 4.25rem;
	margin-bottom: var(--sp-4);
	border-radius: 50%;
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--brand-ink);
}

.gp-empty__title {
	margin: 0 0 var(--sp-2);
	font-size: 1.25rem;
}

.gp-empty__text {
	margin: 0 auto var(--sp-5);
	max-width: 46ch;
	color: var(--ink-3);
}

.gp-404 {
	max-width: 40rem;
	margin-inline: auto;
	text-align: center;
	padding-block: clamp(1.5rem, 5vw, 3rem);
}

.gp-404__code {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(4.5rem, 14vw, 8rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.05em;
	color: var(--brand);
	opacity: 0.25;
}

.gp-404__title {
	margin: 0 0 var(--sp-3);
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
}

.gp-404__text {
	margin: 0 auto var(--sp-6);
	max-width: 48ch;
	color: var(--ink-3);
}

.gp-404__panel {
	margin-top: var(--sp-7);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-align: left;
}

.gp-404__panel-title {
	margin: 0 0 var(--sp-3);
	font-size: 1.05rem;
}

/* ==========================================================================
   12. AUTHOR PROFILE
   ========================================================================== */

.gp-author-profile {
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	text-align: center;
}

.gp-author-profile__avatar img {
	width: 92px;
	height: 92px;
	border-radius: 50%;
	margin: 0 auto var(--sp-4);
	border: 4px solid var(--surface);
	box-shadow: var(--shadow-sm);
}

.gp-author-profile__name {
	margin: 0 0 var(--sp-3);
	font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.7rem);
}

.gp-author-profile__bio {
	max-width: 60ch;
	margin: 0 auto var(--sp-4);
	color: var(--ink-3);
}

.gp-author-profile__link {
	margin: 0 0 var(--sp-4);
	font-weight: 700;
}

.gp-author-profile__link a {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
}

.gp-author-profile__stats {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--sp-6);
	margin: 0;
	padding-top: var(--sp-5);
	border-top: 1px solid var(--line);
}

.gp-author-profile__stat {
	min-width: 6rem;
}

.gp-author-profile__stat-number {
	display: block;
	margin: 0;
	font-family: var(--display);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--brand-ink);
	font-variant-numeric: tabular-nums;
}

.gp-author-profile__stat-label {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: var(--sp-1);
}

/* ==========================================================================
   13. SIDEBAR WIDGETS
   ========================================================================== */

.widget-area {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

.widget-area .widget {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--sp-5);
	font-size: 0.92rem;
}

.widget-area .widget-title {
	margin: 0 0 var(--sp-4);
	padding-bottom: var(--sp-2);
	border-bottom: 2px solid var(--brand);
	font-family: var(--display);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--navy);
	display: inline-block;
}

.widget-area .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget-area .widget li {
	padding: var(--sp-2) 0;
}

.widget-area .widget li + li {
	border-top: 1px solid var(--line);
}

.widget-area .widget a {
	color: var(--ink-2);
	text-decoration: none;
}

.widget-area .widget a:hover {
	color: var(--brand-ink);
	text-decoration: underline;
}

.widget-area .widget_search .gp-search-form {
	flex-direction: column;
}

.widget-area .widget img {
	border-radius: var(--radius-sm);
}

/* ==========================================================================
   14. JOBS
   ========================================================================== */

/* The whole archive is one GET form so it works without JavaScript; the form
   itself is a plain wrapper and only the search bar carries the panel look. */
.gp-jobsearch {
	margin-bottom: var(--sp-6);
}

/* Flex rather than a fixed column count: the bar holds the keyword field, the
   submit button and between one and three location fields depending on whether
   the site has more than one country. A four-column grid pushed the button
   onto a second row the moment the country select appeared. */
.gp-jobsearch__bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	align-items: flex-end;
	margin-bottom: var(--sp-6);
	padding: var(--sp-5);
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.gp-jobsearch__bar > * {
	flex: 1 1 100%;
	min-width: 0;
}

@media (min-width: 700px) {
	.gp-jobsearch__bar > * {
		flex: 1 1 9rem;
	}

	.gp-jobsearch__field--keyword {
		flex: 2 1 14rem;
	}

	/* Never shrink and never wrap: the button is the last thing that should
	   give way, and its label is short. */
	.gp-jobsearch__submit {
		flex: 0 0 auto;
	}
}

.gp-jobsearch__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.gp-jobsearch__field label,
.gp-locselect__label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ink-2);
}

.gp-jobsearch__field input[type="search"],
.gp-jobsearch__field input[type="text"] {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	background: var(--surface);
	font: inherit;
	color: var(--ink);
}

.gp-jobsearch__field input:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 1px;
}

.gp-jobsearch__submit {
	display: flex;
	align-items: flex-end;
}

.gp-jobsearch__submit .gp-button {
	width: 100%;
	justify-content: center;
	white-space: nowrap;
	padding-inline: clamp(1rem, 2vw, 1.6rem);
}

.gp-jobsearch__active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-3);
	margin-top: var(--sp-4);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--line);
}

.gp-jobsearch__active-label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ink-2);
}

.gp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink-2);
	font-size: 0.8125rem;
	line-height: 1.5;
	text-decoration: none;
}

.gp-chip:hover,
.gp-chip:focus-visible {
	border-color: var(--brand);
	color: var(--brand-ink);
}

.gp-chip__remove {
	font-size: 1rem;
	line-height: 1;
}

/* "Clear all" is an action rather than a filter, so it reads as a link and not
   as another removable chip. */
.gp-chip--clear {
	border-color: transparent;
	background: none;
	color: var(--brand-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gp-chip--clear:hover,
.gp-chip--clear:focus-visible {
	border-color: transparent;
	color: var(--brand);
}

/* Cascading location fields ------------------------------------------------ */

.gp-locselect {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.gp-locselect__select,
.gp-locselect__input {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	background: var(--surface);
	font: inherit;
	color: var(--ink);
}

/* One chevron, drawn by us, so the select matches the text inputs beside it
   instead of wearing whichever arrow the operating system supplies. The SVG is
   inline rather than a file: an external asset here would be a request in the
   critical path for a decoration. */
.gp-locselect__select {
	padding-right: 2.1rem;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23667085' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.8rem center;
	background-size: 12px 8px;
}


.gp-locselect__input:focus-visible,
.gp-locselect__select:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 1px;
}

.gp-locselect__select:disabled,
.gp-locselect__input:disabled {
	background: var(--surface-alt);
	color: var(--ink-3);
	cursor: not-allowed;
}

/* Waiting on the field above it, not broken. It keeps the surface and the
   sizing of a live field and says what it is waiting for; the dashed border is
   the only thing marking it as not yet usable. After :disabled, because the two
   rules have the same weight and this one has to win. */
.gp-locselect--waiting .gp-locselect__select,
.gp-locselect--waiting .gp-locselect__select:disabled {
	background-color: var(--surface);
	color: var(--ink-3);
	border-style: dashed;
	cursor: default;
}

/* The <select> is what submits; once the script runs the combobox stands in
   for it visually, but it stays in the DOM so the form still works. */
.gp-locselect__select--hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.gp-locselect__clear {
	position: absolute;
	right: 0.5rem;
	bottom: 0.6rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ink-3);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.gp-locselect__clear:hover,
.gp-locselect__clear:focus-visible {
	background: var(--brand-tint);
	color: var(--brand-deep);
}

.gp-locselect__list {
	position: absolute;
	z-index: 30;
	top: 100%;
	left: 0;
	right: 0;
	max-height: 15rem;
	margin: 0.25rem 0 0;
	padding: 0.25rem;
	overflow-y: auto;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	box-shadow: 0 12px 28px rgba(6, 32, 68, 0.16);
}

.gp-locselect__option {
	margin: 0;
	padding: 0.5rem 0.65rem;
	border-radius: calc(var(--radius) - 2px);
	cursor: pointer;
	font-size: 0.9375rem;
}

.gp-locselect__option:hover,
.gp-locselect__option.is-active {
	background: var(--brand);
	color: #fff;
}

.gp-locselect__empty {
	margin: 0;
	padding: 0.6rem 0.65rem;
	color: var(--ink-3);
	font-size: 0.875rem;
}

/* Browse-by block ---------------------------------------------------------- */

.gp-jobs-browse {
	margin-top: var(--section-gap);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--line);
}

.gp-jobs-browse__title {
	margin: 0 0 var(--sp-4);
	font-size: 1.15rem;
}

.gp-jobs-browse__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--sp-5);
}

.gp-jobs-browse__heading {
	margin: 0 0 var(--sp-3);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ink-3);
}

.gp-jobs-browse__list {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: var(--sp-4);
}

.gp-jobs-browse__list li {
	break-inside: avoid;
	margin-bottom: 0.35rem;
}

.gp-jobs-browse__list a {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-2);
	font-size: 0.9rem;
	text-decoration: none;
	color: var(--ink-2);
}

.gp-jobs-browse__list a:hover {
	color: var(--brand-ink);
}

.gp-jobs-browse__count {
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}

.gp-jobfilters__hint {
	margin: 0 0 var(--sp-3);
	font-size: 0.8125rem;
	color: var(--ink-3);
}

/* The location group is one filter among several, so it looks like the others:
   the same legend, no panel of its own, no border. It used to be a filled grey
   card, which made it read as a different kind of control from the checkbox
   lists beneath it, and stacked three uppercase headings — LOCATION, STATE,
   CITY — as if they were the same rank. */
.gp-jobfilters__group--location {
	padding: 0;
	background: none;
	border: 0;
}

.gp-jobfilters__levels {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

/* Field labels, not headings: the legend above them is the heading. */
.gp-jobfilters__group--location .gp-locselect__label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink-2);
}

.gp-jobfilters__group--location .gp-locselect__select,
.gp-jobfilters__group--location .gp-locselect__input {
	padding: 0.55rem 2rem 0.55rem 0.7rem;
	font-size: 0.9rem;
}

.gp-jobfilters__group--location .gp-locselect__clear {
	bottom: 0.35rem;
	right: 1.8rem;
}

/* The listbox is absolutely positioned inside a sticky, bordered panel; without
   this it would be clipped by the panel's own rounded corner. */
.gp-jobfilters {
	overflow: visible;
}

.gp-jobfilters__group--location .gp-locselect__list {
	max-height: 13rem;
}

/* A level with nothing above it chosen yet is disabled rather than empty, so
   say why instead of looking broken. */
.gp-locselect__select:disabled + .gp-locselect__input,
.gp-locselect__input:disabled {
	border-style: dashed;
}

.gp-jobs-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap-lg);
	align-items: start;
}

@media (min-width: 900px) {
	.gp-jobs-layout {
		grid-template-columns: 16rem minmax(0, 1fr);
	}
}

.gp-jobfilters {
	min-width: 0;
	padding: var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

@media (min-width: 900px) {
	.gp-jobfilters {
		position: sticky;
		top: var(--sp-5);
	}
}

.gp-jobfilters__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--line);
	margin-bottom: var(--sp-4);
}

.gp-jobfilters__title {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--navy);
}

.gp-jobfilters__clear {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--brand-ink);
}

.gp-jobfilters__group {
	border: 0;
	margin: 0 0 var(--sp-5);
	padding: 0;
}

.gp-jobfilters__group legend {
	padding: 0;
	margin-bottom: var(--sp-2);
	font-family: var(--display);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.gp-jobfilters__group ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gp-jobfilters__group label {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 0.35rem 0;
	font-size: 0.88rem;
	color: var(--ink-2);
	cursor: pointer;
}

.gp-jobfilters__group input {
	accent-color: var(--brand-ink);
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

.gp-jobfilters__group label span:nth-of-type(1) {
	flex: 1 1 auto;
}

.gp-jobfilters__count {
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}

.gp-jobfilters__apply {
	margin: 0;
}

.gp-jobs-results {
	min-width: 0;
}

.gp-jobs-results__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--sp-3);
	padding-bottom: var(--sp-3);
	border-bottom: 2px solid var(--navy);
	margin-bottom: var(--sp-4);
}

.gp-jobs-results__count {
	margin: 0;
	font-family: var(--display);
	font-weight: 800;
	color: var(--navy);
	font-size: 1rem;
}

.gp-jobs-results__sort {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: 0.82rem;
}

.gp-jobs-results__sort label {
	font-weight: 700;
	color: var(--ink-3);
}

.gp-jobs-results__sort select {
	width: auto;
	padding: 0.35rem 0.6rem;
	font-size: 0.84rem;
}

.gp-joblist {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.gp-job {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: var(--sp-3) var(--sp-4);
	padding: var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

@media (min-width: 720px) {
	.gp-job {
		grid-template-columns: 56px minmax(0, 1fr) 11rem;
		align-items: start;
	}
}

.gp-job:hover,
.gp-job:focus-within {
	border-color: var(--brand);
	box-shadow: var(--shadow-sm);
}

.gp-job.is-closed {
	opacity: 0.72;
}

/* The tile behind a monogram is brand navy, because the monogram is white text
   and needs the contrast. A real employer logo gets a neutral tile instead: a
   dark background would swallow any logo that is not a white PNG, and we cannot
   assume what anyone uploads. */
.gp-job__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius);
	background: var(--navy);
	color: #fff;
	overflow: hidden;
	flex-shrink: 0;
}

.gp-job__logo--image {
	background: var(--surface);
	border: 1px solid var(--line);
	padding: 4px;
}

@media (min-width: 720px) {
	.gp-job__logo {
		width: 56px;
		height: 56px;
	}
}

.gp-job__logo img {
	width: 100%;
	height: 100%;
	/* contain, not cover: a wordmark must not be cropped to a square. */
	object-fit: contain;
}

.gp-job__location a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.gp-job__location a:hover,
.gp-job__location a:focus-visible {
	color: var(--brand-ink);
	border-bottom-color: currentColor;
}

.gp-job__logo--large {
	width: 64px;
	height: 64px;
}

.gp-job__monogram {
	font-family: var(--display);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.gp-job__body {
	min-width: 0;
	grid-column: 2;
}

@media (max-width: 719px) {
	.gp-job__body {
		grid-column: 1 / -1;
	}
}

.gp-job__title {
	margin: 0 0 var(--sp-2);
	font-size: 1.08rem;
	line-height: 1.3;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.gp-job__title a {
	color: var(--navy);
	text-decoration: none;
}

.gp-job__title a:hover {
	color: var(--brand-ink);
}

.gp-job__closed {
	padding: 0.1rem 0.45rem;
	background: var(--warn-tint);
	border-radius: var(--radius-sm);
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--warn);
}

.gp-job__org {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-4);
	margin: 0 0 var(--sp-3);
	font-size: 0.88rem;
	color: var(--ink-3);
}

.gp-job__employer {
	font-weight: 700;
	color: var(--ink-2);
}

.gp-job__location {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
}

/* The links and their separators sit in one flex item, otherwise the grid gap
   lands between "Houston" and its comma. */
.gp-job__location-text {
	min-width: 0;
}

.gp-job__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gp-job__aside {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--line);
}

@media (min-width: 720px) {
	.gp-job__aside {
		grid-column: 3;
		flex-direction: column;
		align-items: flex-end;
		text-align: right;
		padding-top: 0;
		border-top: 0;
	}
}

.gp-job__pay {
	margin: 0;
	font-family: var(--display);
	font-size: 1rem;
	font-weight: 800;
	color: var(--navy);
	font-variant-numeric: tabular-nums;
}

.gp-job__posted {
	margin: 0;
	font-size: 0.78rem;
	color: var(--ink-3);
}

/* Single job */
.gp-joblayout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap-lg);
	align-items: start;
}

@media (min-width: 1000px) {
	.gp-joblayout {
		grid-template-columns: minmax(0, 1fr) var(--sidebar);
	}
}

.gp-joblayout__rail {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	min-width: 0;
}

@media (min-width: 1000px) {
	.gp-joblayout__rail {
		position: sticky;
		top: var(--sp-5);
	}
}

.gp-jobdetail {
	min-width: 0;
}

.gp-jobdetail__header {
	padding-bottom: var(--sp-5);
	border-bottom: 1px solid var(--line);
	margin-bottom: var(--sp-6);
}

.gp-jobdetail__identity {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	margin-bottom: var(--sp-4);
}

.gp-jobdetail__title {
	margin: 0 0 var(--sp-2);
	font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
	line-height: 1.12;
}

.gp-jobdetail__org {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-4);
	margin: 0;
	font-size: 0.95rem;
	color: var(--ink-3);
}

.gp-quickfacts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-4);
}

.gp-quickfacts__item {
	padding: var(--sp-2) var(--sp-4);
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}

.gp-quickfacts__item dt {
	font-family: var(--display);
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 0.15rem;
}

.gp-quickfacts__item dd {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--navy);
}

.gp-jobdetail__pay {
	padding: var(--sp-4);
	background: var(--brand-wash);
	border: 1px solid var(--brand-tint);
	border-left: 4px solid var(--brand);
	border-radius: var(--radius);
}

.gp-jobdetail__pay-value {
	margin: 0;
	font-family: var(--display);
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--navy);
	font-variant-numeric: tabular-nums;
}

.gp-jobdetail__pay-note {
	margin: var(--sp-1) 0 0;
	font-size: 0.85rem;
	color: var(--ink-3);
}

.gp-deflist {
	margin: 0;
}

.gp-deflist > div {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: var(--sp-2) 0;
	border-top: 1px solid var(--line);
	font-size: 0.88rem;
}

.gp-deflist > div:first-child {
	border-top: 0;
	padding-top: 0;
}

.gp-deflist dt {
	color: var(--ink-3);
	font-weight: 600;
}

.gp-deflist dd {
	margin: 0;
	font-weight: 700;
	color: var(--navy);
	text-align: right;
}

.gp-employer {
	display: flex;
	gap: var(--sp-4);
	margin-top: var(--sp-6);
	padding: var(--sp-5);
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.gp-employer__name {
	margin: 0 0 var(--sp-2);
	font-size: 1.05rem;
}

.gp-employer__desc {
	margin: 0 0 var(--sp-2);
	font-size: 0.92rem;
	color: var(--ink-3);
}

.gp-minijobs {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gp-minijobs__item {
	padding-block: var(--sp-3);
	border-top: 1px solid var(--line);
}

.gp-minijobs__item:first-child {
	border-top: 0;
	padding-top: 0;
}

.gp-minijobs__title {
	margin: 0 0 var(--sp-1);
	font-size: 0.95rem;
	line-height: 1.3;
}

.gp-minijobs__title a {
	color: var(--navy);
	text-decoration: none;
}

.gp-minijobs__title a:hover {
	color: var(--brand-ink);
}

.gp-minijobs__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1) var(--sp-3);
	margin: 0;
	font-size: 0.78rem;
	color: var(--ink-3);
}

.gp-minijobs__pay {
	margin: var(--sp-1) 0 0;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--navy);
}

/* Application form */
.gp-apply {
	margin-top: var(--sp-7);
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	scroll-margin-top: var(--sp-6);
}

.gp-apply__title {
	margin: 0 0 var(--sp-3);
	font-size: 1.25rem;
}

.gp-apply__intro {
	margin: 0 0 var(--sp-5);
	font-size: 0.92rem;
	color: var(--ink-3);
}

.gp-apply__closed {
	margin: 0;
	color: var(--ink-3);
}

/* Honeypot — off-screen rather than display:none so bots still fill it. */
.gp-apply__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.gp-apply__submit {
	margin: var(--sp-5) 0 0;
}

.gp-apply__privacy {
	margin: var(--sp-3) 0 0;
	font-size: 0.8rem;
	color: var(--ink-3);
}

.gp-apply__form input[type="file"] {
	padding: 0.5rem;
	background: var(--surface);
}

/* ==========================================================================
   14b. BLOCK WIDGETS
   ========================================================================== */

.gp-block {
	margin-block: var(--sp-5);
}

.gp-block__title {
	margin: 0 0 var(--sp-3);
	padding-bottom: var(--sp-2);
	border-bottom: 2px solid var(--brand);
	font-family: var(--display);
	font-size: 0.8125rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--ink);
}

.gp-block__list,
.gp-block__jobs,
.gp-block__stories {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-block__list--two {
	columns: 2;
	column-gap: var(--sp-4);
}

.gp-block__list li {
	break-inside: avoid;
	border-bottom: 1px solid var(--line);
}

.gp-block__list li:last-child {
	border-bottom: 0;
}

.gp-block__list a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--sp-2);
	padding: 0.5rem 0;
	color: var(--ink-2);
	font-size: 0.9375rem;
	text-decoration: none;
}

.gp-block__list a:hover {
	color: var(--brand-ink);
}

.gp-block__count {
	color: var(--ink-3);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

/* Jobs list -------------------------------------------------------------- */

.gp-block__job {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--line);
}

.gp-block__job:last-child {
	border-bottom: 0;
}

.gp-block__job-title {
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	line-height: 1.35;
}

.gp-block__job-title:hover {
	color: var(--brand-ink);
}

.gp-block__job-meta {
	color: var(--ink-3);
	font-size: 0.8125rem;
}

.gp-block__job-pay {
	color: var(--brand-ink);
	font-size: 0.8125rem;
	font-weight: 600;
}

.gp-block__more {
	margin: var(--sp-3) 0 0;
	font-size: 0.875rem;
	font-weight: 600;
}

/* Stories list ----------------------------------------------------------- */

.gp-block__story {
	display: flex;
	gap: var(--sp-3);
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--line);
}

.gp-block__story:last-child {
	border-bottom: 0;
}

.gp-block__story-media {
	flex: 0 0 4.5rem;
	display: block;
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.gp-block__story-media img {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

.gp-block__story-body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.gp-block__story-title {
	color: var(--ink);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.35;
	text-decoration: none;
}

.gp-block__story-title:hover {
	color: var(--brand-ink);
}

.gp-block__story-meta {
	color: var(--ink-3);
	font-size: 0.8125rem;
}

/* Ranked list ------------------------------------------------------------ */

.gp-block__ranked {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: gp-block-rank;
}

.gp-block__ranked li {
	display: flex;
	gap: var(--sp-3);
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--line);
	counter-increment: gp-block-rank;
}

.gp-block__ranked li:last-child {
	border-bottom: 0;
}

.gp-block__ranked li::before {
	content: counter(gp-block-rank);
	flex: 0 0 1.4rem;
	font-family: var(--display);
	font-weight: 800;
	color: var(--brand);
	font-variant-numeric: tabular-nums;
}

.gp-block__ranked a {
	color: var(--ink);
	font-size: 0.9375rem;
	line-height: 1.35;
	text-decoration: none;
}

.gp-block__ranked a:hover {
	color: var(--brand-ink);
}

/* Snapshot --------------------------------------------------------------- */

.gp-block__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-block__stats li {
	display: flex;
	flex-direction: column;
	padding: var(--sp-3);
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.gp-block__stats strong {
	font-family: var(--display);
	font-size: 1.5rem;
	line-height: 1.1;
	color: var(--navy);
}

.gp-block__stats span {
	color: var(--ink-3);
	font-size: 0.8125rem;
}

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

.gp-block__searchform {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.gp-block__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
}

.gp-block__field label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ink-2);
}

.gp-block__field input[type="search"] {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	background: var(--surface);
	font: inherit;
	color: var(--ink);
}

.gp-block__submit {
	margin: 0;
}

.gp-block__submit .gp-button {
	width: 100%;
	justify-content: center;
}

.gp-block__empty {
	margin: 0;
	color: var(--ink-3);
	font-size: 0.875rem;
	font-style: italic;
}

/* ==========================================================================
   15. FOOTER
   ========================================================================== */

.gp-footer {
	background: var(--navy);
	color: var(--on-dark-2);
	font-size: 0.92rem;
}

.gp-footer .gp-container {
	padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* Any widget or menu markup dropped into the footer inherits legible colours
   on the navy panel. Zero specificity, so component rules still win. */
:where(.gp-footer) :where(h1, h2, h3, h4, h5, h6) {
	color: #fff;
}

:where(.gp-footer) :where(p, li, td, th, dd, dt, figcaption, label, small) {
	color: var(--on-dark-2);
}

:where(.gp-footer) :where(a) {
	color: var(--on-dark-2);
	text-decoration: none;
}

:where(.gp-footer) :where(a:hover) {
	color: #fff;
}

.gp-footer__main {
	padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2.5rem);
}

/* Flex rather than grid: the number of footer columns depends on how many
   menus are assigned, and `repeat(auto-fit, …)` cannot be combined with an fr
   track — that declaration was invalid and silently collapsed the footer to
   two columns. Flex handles a variable column count and wraps cleanly. */
.gp-footer__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-7) clamp(1.5rem, 3vw, 3rem);
}

.gp-footer__col {
	flex: 1 1 10rem;
	min-width: min(100%, 10rem);
}

.gp-footer__col--brand {
	flex: 2 1 17rem;
	min-width: min(100%, 17rem);
}

.gp-footer__site-name {
	margin: 0 0 var(--sp-2);
	font-family: var(--display);
	font-size: 1.3rem;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.025em;
}

.gp-footer__logo-img {
	max-height: 52px;
	width: auto;
	margin-bottom: var(--sp-3);
	display: block;
}

.gp-footer__tagline {
	margin: 0 0 var(--sp-4);
	font-family: var(--display);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-on-dark);
}

/* Social row sits directly after the tagline. */
.gp-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-bottom: var(--sp-5);
}

.gp-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: #fff;
	transition: background var(--speed) var(--ease), transform var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.gp-footer__social-link:hover,
.gp-footer__social-link:focus-visible {
	background: var(--brand);
	border-color: var(--brand);
	transform: translateY(-2px);
	color: #fff;
}

.gp-footer__about {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.65;
	max-width: 38ch;
}

.gp-footer__about p:last-child {
	margin-bottom: 0;
}

.gp-footer__heading {
	position: relative;
	margin: 0 0 var(--sp-4);
	padding-bottom: var(--sp-2);
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	font-family: var(--display);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
}

.gp-footer__heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 2.25rem;
	height: 2px;
	background: var(--brand);
}

.gp-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gp-footer__links li + li {
	margin-top: var(--sp-2);
}

.gp-footer__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: 0.2rem 0;
	font-size: 0.9rem;
	transition: color var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.gp-footer__links a:hover,
.gp-footer__links a:focus-visible {
	color: #fff;
	transform: translateX(3px);
}

.gp-footer__count {
	flex-shrink: 0;
	padding: 0.1rem 0.5rem;
	background: rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-pill);
	font-size: 0.7rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.gp-footer__widget {
	font-size: 0.9rem;
}

.gp-footer__widget .widget-title {
	margin: 0 0 var(--sp-4);
	padding-bottom: var(--sp-2);
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	font-family: var(--display);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
}

.gp-footer__widget input[type="email"],
.gp-footer__widget input[type="text"] {
	width: 100%;
	padding: 0.7rem 0.95rem;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.26);
	border-radius: var(--radius);
	color: #fff;
	font: inherit;
}

.gp-footer__widget input[type="submit"],
.gp-footer__widget button {
	min-height: 44px;
	margin-top: var(--sp-2);
	padding: 0.7rem 1.2rem;
	background: var(--brand);
	color: #fff;
	border: 0;
	border-radius: var(--radius);
	font-family: var(--display);
	font-weight: 700;
	cursor: pointer;
}

.gp-footer__bottom {
	background: rgba(0, 0, 0, 0.22);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-block: var(--sp-4);
}

.gp-footer__bottom-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-2);
	text-align: center;
}

@media (min-width: 640px) {
	.gp-footer__bottom-inner {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}
}

.gp-footer__copyright {
	margin: 0;
	font-size: 0.8rem;
}

.gp-footer__legal-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.8rem;
}

.gp-footer__legal-menu a {
	display: inline-block;
	padding: var(--sp-2) var(--sp-1);
	margin: calc(var(--sp-2) * -1) calc(var(--sp-1) * -1);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* ==========================================================================
   16. PREFERENCES AND PRINT
   ========================================================================== */

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

	.gp-card:hover,
	.gp-footer__social-link:hover,
	.gp-footer__links a:hover,
	.gp-button:hover svg,
	.gp-lead__media:hover .gp-lead__image,
	.gp-card:hover .gp-card__image {
		transform: none;
	}
}

@media (prefers-contrast: more) {
	:root {
		--line: #97a3b6;
		--line-2: #6b7c95;
		--ink-3: #3d4d66;
		--on-dark-2: rgba(255, 255, 255, 0.94);
		--on-dark-3: rgba(255, 255, 255, 0.86);
	}
}

@media print {
	.gp-masthead,
	.gp-footer,
	.gp-layout__sidebar,
	.gp-home-body__rail,
	.gp-joblayout__rail,
	.gp-post-nav,
	.gp-related,
	.gp-pagination,
	.gp-share,
	.gp-search-form-wrap,
	.gp-apply__form,
	.gp-tabs,
	.gp-comment__actions,
	.gp-comment-form {
		display: none !important;
	}

	.gp-layout,
	.gp-home-body,
	.gp-joblayout,
	.gp-home-lead {
		display: block;
	}

	.gp-card,
	.gp-job,
	.gp-page-header,
	.gp-author-profile,
	.gp-takeaways {
		box-shadow: none;
		border-color: #999;
		break-inside: avoid;
	}

	.gp-entry-content {
		max-width: none;
		font-size: 11pt;
	}

	.gp-entry-content a::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		word-break: break-all;
	}
}

/* Customizer-only hint when an enabled section has nothing to render. */
.gp-section-empty {
	margin: 0 0 var(--sp-5);
	padding: var(--sp-3) var(--sp-4);
	background: var(--warn-tint);
	border: 1px dashed var(--warn);
	border-radius: var(--radius);
	color: var(--warn);
	font-size: 0.86rem;
}

/* ==========================================================================
   16. SINGLE JOB RAIL — employer, location, share and save
   ========================================================================== */

.gp-rail-block__subtitle {
	margin: var(--sp-4) 0 var(--sp-2);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.gp-rail-block__note {
	margin: var(--sp-3) 0 0;
	font-size: 0.8125rem;
	color: var(--ink-3);
}

.gp-rail-block--widgets {
	padding: 0;
	background: none;
	border: 0;
}

.gp-rail-employer {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-3);
}

.gp-rail-employer__logo {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
}

.gp-rail-employer__name {
	margin: 0;
	font-family: var(--display);
	font-weight: 700;
	line-height: 1.25;
	color: var(--navy);
}

.gp-rail-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gp-rail-list li + li {
	margin-top: var(--sp-3);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--line);
}

.gp-rail-list a {
	display: block;
	font-weight: 600;
	line-height: 1.35;
	color: var(--navy);
	text-decoration: none;
}

.gp-rail-list a:hover,
.gp-rail-list a:focus-visible {
	color: var(--brand-ink);
	text-decoration: underline;
}

.gp-rail-list__meta {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.8125rem;
	color: var(--ink-3);
}

.gp-rail-share {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gp-rail-share__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--line-2);
	border-radius: var(--radius-pill);
	background: var(--surface);
	color: var(--ink-2);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
}

.gp-rail-share__link:hover,
.gp-rail-share__link:focus-visible {
	border-color: var(--brand);
	color: var(--brand-ink);
}

.gp-rail-share__link.is-done {
	border-color: var(--ok);
	color: var(--ok);
}

.gp-savejob.is-saved {
	border-color: var(--ok);
	color: var(--ok);
	background: var(--ok-tint);
}


/* ==========================================================================
   17. PAGE-BUILDING BLOCKS
   ========================================================================== */

/* FAQ ---------------------------------------------------------------------- */

.gp-faq {
	border-top: 1px solid var(--line);
}

.gp-faq__item {
	border-bottom: 1px solid var(--line);
}

.gp-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: var(--sp-4) 0;
	font-family: var(--display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--navy);
	cursor: pointer;
	list-style: none;
}

.gp-faq__q::-webkit-details-marker {
	display: none;
}

.gp-faq__q:hover {
	color: var(--brand-ink);
}

.gp-faq__q .gp-icon {
	flex: 0 0 auto;
	transition: transform 200ms ease-out;
}

.gp-faq__item[open] .gp-faq__q .gp-icon {
	transform: rotate(180deg);
}

.gp-faq__a {
	padding: 0 0 var(--sp-4);
	color: var(--ink-2);
}

.gp-faq__a p {
	margin: 0 0 var(--sp-3);
}

.gp-faq__a p:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.gp-faq__q .gp-icon {
		transition: none;
	}
}

/* Call to action ----------------------------------------------------------- */

.gp-cta {
	padding: clamp(1.5rem, 5vw, 3rem);
	border-radius: var(--radius-lg);
	margin-block: var(--sp-6);
}

.gp-cta--dark {
	background: var(--navy);
	color: var(--on-dark);
}

.gp-cta--light {
	background: var(--surface-alt);
	border: 1px solid var(--line);
}

.gp-cta--center {
	text-align: center;
}

.gp-cta__title {
	margin: 0;
	font-size: clamp(1.25rem, 1rem + 1.2vw, 1.9rem);
	line-height: 1.2;
}

.gp-cta--dark .gp-cta__title {
	color: var(--on-dark);
}

.gp-cta__text {
	margin: var(--sp-3) 0 0;
	max-width: 58ch;
	font-size: 1rem;
}

.gp-cta--dark .gp-cta__text {
	color: var(--on-dark-2);
}

.gp-cta--center .gp-cta__text {
	margin-inline: auto;
}

.gp-cta__action {
	margin: var(--sp-5) 0 0;
}

/* Stat row ----------------------------------------------------------------- */

.gp-statrow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: var(--sp-4);
	margin: 0;
}

.gp-statrow__item {
	padding: var(--sp-4);
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-align: center;
}

.gp-statrow__value {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);
	font-weight: 800;
	line-height: 1.05;
	color: var(--brand-ink);
	font-variant-numeric: tabular-nums;
}

.gp-statrow__label {
	margin: var(--sp-2) 0 0;
	font-size: 0.85rem;
	line-height: 1.35;
	color: var(--ink-2);
}

/* Section heading ---------------------------------------------------------- */

.gp-section-header--block {
	margin-block: var(--sp-6) var(--sp-4);
}

.gp-section-header__text-body {
	margin: var(--sp-2) 0 0;
	max-width: 62ch;
	color: var(--ink-2);
	font-size: 0.95rem;
}

/* Featured story ----------------------------------------------------------- */

.gp-featured {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-4);
	align-items: center;
}

@media (min-width: 640px) {
	.gp-featured {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		gap: var(--sp-5);
	}
}

.gp-featured__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--surface-sunk);
}

.gp-featured__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gp-featured__title {
	margin: var(--sp-2) 0 0;
	font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.5rem);
	line-height: 1.2;
}

.gp-featured__title a {
	color: var(--navy);
	text-decoration: none;
}

.gp-featured__title a:hover,
.gp-featured__title a:focus-visible {
	color: var(--brand-ink);
}

.gp-featured__excerpt {
	margin: var(--sp-3) 0 0;
	color: var(--ink-2);
}

.gp-featured__meta {
	margin: var(--sp-3) 0 0;
	font-size: 0.8125rem;
	color: var(--ink-3);
}

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

.gp-authorcard {
	display: flex;
	gap: var(--sp-4);
	align-items: flex-start;
}

.gp-authorcard__avatar img {
	border-radius: 50%;
}

.gp-authorcard__name {
	margin: 0;
	font-family: var(--display);
	font-size: 1.05rem;
	font-weight: 700;
}

.gp-authorcard__name a {
	color: var(--navy);
	text-decoration: none;
}

.gp-authorcard__bio {
	margin: var(--sp-2) 0 0;
	color: var(--ink-2);
	font-size: 0.9rem;
}

.gp-authorcard__posts {
	margin-top: var(--sp-4);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--line);
}

/* Contact details ---------------------------------------------------------- */

.gp-contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-3);
}

.gp-contact__item {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	color: var(--ink-2);
}

.gp-contact__item .gp-icon {
	flex: 0 0 auto;
	margin-top: 0.15rem;
	color: var(--brand-ink);
}

.gp-contact__item address {
	font-style: normal;
	margin: 0;
}

/* Newsletter slot ---------------------------------------------------------- */

.gp-signup {
	padding: clamp(1.25rem, 4vw, 2.25rem);
	border-radius: var(--radius-lg);
	margin-block: var(--sp-6);
}

.gp-signup--tint {
	background: var(--brand-wash);
	border: 1px solid var(--line);
}

.gp-signup--dark {
	background: var(--navy);
	color: var(--on-dark);
}

.gp-signup__title {
	margin: 0;
	font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem);
}

.gp-signup--dark .gp-signup__title {
	color: var(--on-dark);
}

.gp-signup__text {
	margin: var(--sp-2) 0 0;
	max-width: 52ch;
}

.gp-signup--dark .gp-signup__text {
	color: var(--on-dark-2);
}

.gp-signup__form {
	margin-top: var(--sp-4);
}

.gp-signup__hint {
	margin: var(--sp-4) 0 0;
	padding: var(--sp-3);
	border: 1px dashed var(--line-2);
	border-radius: var(--radius);
	font-size: 0.85rem;
	color: var(--ink-3);
}

.gp-signup--dark .gp-signup__hint {
	border-color: rgba(255, 255, 255, 0.3);
	color: var(--on-dark-3);
}

/* Jobs by state ------------------------------------------------------------ */

.gp-statelist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gp-statelist__row {
	display: grid;
	grid-template-columns: minmax(6rem, 1fr) minmax(3rem, 6rem) auto;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-2) 0;
	border-bottom: 1px solid var(--line);
}

.gp-statelist__name {
	color: var(--navy);
	font-weight: 600;
	text-decoration: none;
	min-width: 0;
	overflow-wrap: break-word;
}

.gp-statelist__name:hover,
.gp-statelist__name:focus-visible {
	color: var(--brand-ink);
	text-decoration: underline;
}

/* The bar is decoration; the number beside it carries the meaning. */
.gp-statelist__bar {
	position: relative;
	display: block;
	height: 6px;
	border-radius: 999px;
	background: var(--surface-sunk);
	overflow: hidden;
}

.gp-statelist__bar::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: 999px;
	background: var(--brand);
}

.gp-statelist__bar--5::after { width: 5%; }
.gp-statelist__bar--10::after { width: 10%; }
.gp-statelist__bar--15::after { width: 15%; }
.gp-statelist__bar--20::after { width: 20%; }
.gp-statelist__bar--25::after { width: 25%; }
.gp-statelist__bar--30::after { width: 30%; }
.gp-statelist__bar--35::after { width: 35%; }
.gp-statelist__bar--40::after { width: 40%; }
.gp-statelist__bar--45::after { width: 45%; }
.gp-statelist__bar--50::after { width: 50%; }
.gp-statelist__bar--55::after { width: 55%; }
.gp-statelist__bar--60::after { width: 60%; }
.gp-statelist__bar--65::after { width: 65%; }
.gp-statelist__bar--70::after { width: 70%; }
.gp-statelist__bar--75::after { width: 75%; }
.gp-statelist__bar--80::after { width: 80%; }
.gp-statelist__bar--85::after { width: 85%; }
.gp-statelist__bar--90::after { width: 90%; }
.gp-statelist__bar--95::after { width: 95%; }
.gp-statelist__bar--100::after { width: 100%; }

.gp-statelist__count {
	font-variant-numeric: tabular-nums;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--ink-3);
}

/* ==========================================================================
   18. PUBLIC FORMS — contact and job submission
   ========================================================================== */

.gp-form {
	max-width: 46rem;
	margin-block: var(--sp-5);
}

.gp-form--job {
	max-width: none;
}

.gp-form__group {
	margin: 0 0 var(--sp-6);
	padding: var(--sp-5);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}

.gp-form__group legend {
	padding-inline: var(--sp-2);
	font-family: var(--display);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--navy);
}

.gp-form__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-4);
}

@media (min-width: 640px) {
	.gp-form__row {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	}
}

.gp-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0 0 var(--sp-4);
	min-width: 0;
}

.gp-form__field label,
.gp-form__label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ink-2);
}

.gp-form__field label span[aria-hidden],
.gp-form__label span[aria-hidden] {
	color: var(--brand-ink);
}

.gp-form__field input,
.gp-form__field select,
.gp-form__field textarea {
	width: 100%;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	background: var(--surface);
	font: inherit;
	color: var(--ink);
}

.gp-form__field textarea {
	resize: vertical;
	min-height: 7rem;
}

.gp-form__field input:focus-visible,
.gp-form__field select:focus-visible,
.gp-form__field textarea:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 1px;
}

.gp-form__help {
	font-size: 0.8125rem;
	color: var(--ink-3);
}

.gp-form__levels {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-3);
	margin-top: var(--sp-2);
}

@media (min-width: 640px) {
	.gp-form__levels {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
	}
}

.gp-form__submit {
	margin: var(--sp-5) 0 0;
}

.gp-form__note {
	margin: var(--sp-3) 0 0;
	font-size: 0.8125rem;
	color: var(--ink-3);
	max-width: 60ch;
}

/* Offscreen rather than display:none, so a bot that checks visibility still
   fills it in. */
.gp-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.gp-formnotice {
	margin: 0 0 var(--sp-5);
	padding: var(--sp-4);
	border-radius: var(--radius);
	border: 1px solid var(--line);
}

.gp-formnotice p {
	margin: 0;
}

.gp-formnotice--ok {
	background: var(--ok-tint);
	border-color: var(--ok);
	color: var(--ink);
}

.gp-formnotice--error {
	background: var(--brand-wash);
	border-color: var(--brand-ink);
	color: var(--ink);
}

.gp-entry--wide {
	max-width: 62rem;
	margin-inline: auto;
}