/*
 * Site components for the ISARCH V2 child theme (phase 4a).
 *
 * Global settings (colours, fonts, links, buttons, form fields, container
 * width) live in the Elementor Kit, which uses the same values as the
 * tokens in tokens.css. This file styles what the Kit cannot: the skip link
 * and focus indicators, the sticky header and the navigation, the footer,
 * the light reading layout of posts and post archives, the post cards and
 * pagination, and the error page. Layout structure (rows, columns, widths)
 * is set in the Elementor templates (wp/elementor/isarch-v2 in the
 * repository).
 *
 * Accessibility (docs/specs/isarch-v2.md section 8, WCAG 2.2 AA):
 * - every focusable element shows a 3px focus outline: yellow on dark
 *   surfaces, ink on light surfaces (both at least 13:1 against the surface);
 * - scroll-padding keeps focused elements and anchors clear of the sticky
 *   header (2.4.11);
 * - links inside text are underlined, not identified by colour alone (1.4.1);
 * - targets are at least 24 by 24 px (2.5.8);
 * - only colour transitions are used, and none with prefers-reduced-motion.
 */

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

html {
	scroll-padding-top: calc(var(--isarch-header-height) + 1rem);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-stretch: 112%;
	text-wrap: balance;
}

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

html body .site-main.isarch-main {
	margin: 0;
	max-width: none;
	padding: 0;
	width: 100%;
}

.isarch-sr-only,
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	white-space: nowrap;
	width: 1px;
	word-wrap: normal !important;
}

/* Skip link (printed by Hello Elementor before the header). */
html body .skip-link.screen-reader-text:focus {
	background: var(--isarch-yellow);
	border-radius: var(--isarch-radius-pill);
	clip: auto;
	clip-path: none;
	color: var(--isarch-black);
	font: 600 1rem/1.2 var(--isarch-font-body);
	height: auto;
	left: 1rem;
	margin: 0;
	outline: 3px solid var(--isarch-focus-on-dark);
	outline-offset: 3px;
	padding: 0.875rem 1.25rem;
	text-decoration: none;
	top: 1rem;
	width: auto;
	z-index: 100000;
}

/* Focus: yellow on dark surfaces (default), ink on light surfaces.
   "html body" outranks Hello's reset (a:focus-visible, button:focus-visible:
   black outline with a white ring), which is invisible on the dark menus. */
html body :focus-visible {
	box-shadow: none;
	outline: 3px solid var(--isarch-focus-on-dark);
	outline-offset: 3px;
}

html body .isarch-reading :focus-visible {
	outline-color: var(--isarch-focus-on-light);
}

/* ---------- Header ---------- */

.elementor-location-header {
	background: var(--isarch-color-chrome-bg);
	position: sticky;
	top: 0;
	z-index: 900;
}

body.admin-bar .elementor-location-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .elementor-location-header {
		top: 0;
	}
}

.isarch-header {
	min-height: var(--isarch-header-height);
}

/* The header row is boxed to the Kit content width (1200px in the Elementor
   header template), while its links are sized in rem. With a larger default
   font size in the browser the links grew but the 1200px did not, and the
   navigation wrapped onto a second line at every window width (seen at
   1196 and 1888px, 2026-10-11). The same width in rem (75rem, 1200px at the
   default 16px) grows with the font size, so the full navigation, which
   only shows from 80em (see below), always has the room it has at 16px. */
.elementor-location-header .e-con.isarch-header {
	--container-max-width: 75rem;
}

.isarch-logo {
	align-items: center;
	display: inline-flex;
	min-height: 44px;
}

.isarch-logo__image {
	display: block;
	width: 170px;
}

.elementor-location-header .elementor-widget.isarch-header__nav {
	flex: 1 1 auto;
}

/* The mobile menu panel is positioned against the full-width header row,
   not against the navigation widget. */
body .elementor-location-header .elementor-element.isarch-header__nav {
	position: static;
}

/* Entry link (new tab, labelled in the link text for assistive technology). */
body a.isarch-cta {
	align-items: center;
	background: var(--isarch-yellow);
	border-radius: var(--isarch-radius-pill);
	color: var(--isarch-black);
	display: inline-flex;
	font: 600 0.9375rem/1.2 var(--isarch-font-body);
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.625rem 1.25rem;
	text-decoration: none;
	transition: background-color 0.15s ease;
	white-space: nowrap;
}

body a.isarch-cta:hover,
body a.isarch-cta:focus-visible {
	background: var(--isarch-yellow-soft);
	color: var(--isarch-black);
}

.isarch-cta svg {
	flex: none;
}

/* Desktop header row: the entry link widget is a shrinkable flex item
   (min-width 0). When the full navigation started at 1100px, the row was
   squeezed between 1100px and about 1220px and the entry link fell below
   the width of its non-wrapping text; with the WCAG 1.4.12 text spacing the
   overhang made the page scroll sideways by up to 5px. The widget may shrink
   to 98% of its text width at most, so a narrow row takes the room from the
   navigation and the logo. Since the full navigation starts at 80em the row
   is no longer squeezed; the rule stays as a guard. calc-size() is read by
   Chromium 129 and newer; other browsers skip the rule. */
@media (min-width: 80em) {
	.elementor-location-header .elementor-widget.isarch-header__cta {
		min-width: calc-size(max-content, size * 0.98);
	}
}

/* ---------- Main navigation ---------- */

.isarch-nav {
	font-family: var(--isarch-font-body);
}

.isarch-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.isarch-nav a,
.isarch-nav button.isarch-nav__toggle--label {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 8px;
	color: var(--isarch-paper);
	cursor: pointer;
	display: inline-flex;
	font: 500 0.9375rem/1.2 var(--isarch-font-body);
	gap: 0.375rem;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	text-decoration: none;
	transition: color 0.15s ease;
}

.isarch-nav a:hover,
.isarch-nav button.isarch-nav__toggle--label:hover,
.isarch-nav button.isarch-nav__toggle[aria-expanded="true"] {
	background: none;
	color: var(--isarch-yellow);
}

.isarch-nav a[aria-current="page"],
.isarch-nav .current-menu-item > a,
.isarch-nav .current-menu-ancestor > a,
.isarch-nav .current-menu-ancestor > button.isarch-nav__toggle--label {
	color: var(--isarch-yellow);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

.isarch-nav button.isarch-nav__toggle--icon {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 8px;
	color: var(--isarch-paper);
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	min-height: 44px;
	min-width: 32px;
	padding: 0;
}

.isarch-nav button.isarch-nav__toggle--icon:hover {
	background: none;
	color: var(--isarch-yellow);
}

/* A parent item that is a link has its own toggle button: keep the pair
   together, like the label toggles (link padding only on the left). */
.isarch-nav__list > li > a:has(+ .isarch-nav__toggle--icon) {
	padding-right: 0.125rem;
}

.isarch-nav__chevron {
	transition: transform 0.15s ease;
}

.isarch-nav__toggle[aria-expanded="true"] .isarch-nav__chevron {
	transform: rotate(180deg);
}

.isarch-nav .sub-menu {
	display: none;
}

/* Without JavaScript: submenus open on hover and on keyboard focus. */
.isarch-nav:not(.isarch-nav--js) li:hover > .sub-menu,
.isarch-nav:not(.isarch-nav--js) li:focus-within > .sub-menu,
.isarch-nav .isarch-nav__toggle[aria-expanded="true"] + .sub-menu {
	display: block;
}

.isarch-nav button.isarch-nav__menu-button {
	align-items: center;
	background: none;
	border: 1px solid var(--isarch-line-dark);
	border-radius: var(--isarch-radius-pill);
	color: var(--isarch-paper);
	cursor: pointer;
	display: none;
	font: 600 0.9375rem/1 var(--isarch-font-body);
	gap: 0.625rem;
	min-height: 44px;
	padding: 0 1rem;
}

.isarch-nav button.isarch-nav__menu-button:hover,
.isarch-nav button.isarch-nav__menu-button[aria-expanded="true"] {
	background: none;
	border-color: var(--isarch-yellow);
	color: var(--isarch-yellow);
}

.isarch-nav__menu-icon {
	display: inline-grid;
	gap: 4px;
	width: 18px;
}

.isarch-nav__menu-icon span {
	background: currentColor;
	border-radius: 1px;
	display: block;
	height: 2px;
}

/* Full navigation from 80em (1280px at the default font size, more with a
   larger one), the menu button below. Between 1100 and 1280px, and at any
   width with a larger default font size, the one-line navigation did not fit
   in the 1200px row and wrapped onto a second line (reported 2026-10-11 at
   1196 and 1888px). At 80em the row is 75rem wide and the navigation needs
   about 80% of its room (95% with the WCAG 1.4.12 text spacing). The same
   breakpoint is in tokens.css (header height) and navigation.js (WIDE). */
@media (min-width: 80em) {
	.isarch-nav__list {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: 0.125rem;
		justify-content: flex-end;
	}

	.isarch-nav__list > li {
		align-items: center;
		display: flex;
		position: relative;
	}

	/* 10px side padding (was 12px): the eight items then take about 80% of
	   the row's room with the default spacing and 95% with the 1.4.12
	   spacing (was 99%); the text stays 15px and every target 44px high. */
	.isarch-nav__list > li > a,
	.isarch-nav__list > li > button.isarch-nav__toggle--label {
		padding-inline: 0.625rem;
	}

	.isarch-nav .sub-menu {
		background: var(--isarch-ink-raised);
		border: 1px solid var(--isarch-line-dark);
		border-radius: 14px;
		left: 0;
		min-width: 15rem;
		padding: 0.5rem;
		position: absolute;
		top: 100%;
		z-index: 10;
	}

	.isarch-nav .sub-menu a {
		display: flex;
		width: 100%;
	}
}

@media (max-width: 79.999em) {
	.isarch-nav {
		display: flex;
		justify-content: flex-end;
	}

	.isarch-nav--js button.isarch-nav__menu-button {
		display: inline-flex;
	}

	.isarch-nav--js .isarch-nav__panel {
		display: none;
	}

	.isarch-nav--js.is-open .isarch-nav__panel {
		background: var(--isarch-color-chrome-bg);
		border-top: 1px solid var(--isarch-line-dark);
		display: block;
		left: 0;
		max-height: calc(100vh - var(--isarch-header-height));
		max-height: calc(100dvh - var(--isarch-header-height));
		overflow-y: auto;
		padding: 0.5rem var(--isarch-gutter) 1.5rem;
		position: absolute;
		right: 0;
		top: 100%;
	}

	.isarch-nav:not(.isarch-nav--js) .isarch-nav__panel {
		width: 100%;
	}

	/*
	 * Scripts on (html.js, set at the top of <head>) but navigation.js not
	 * run yet: show the collapsed header at once so the page does not jump
	 * when the script runs. If the script did not run by DOMContentLoaded
	 * (deferred scripts run before it: it failed or was blocked), the inline
	 * script of functions.php adds html.isarch-nav-fallback and the full
	 * list comes back. (Until 2026-10-16 a 3-second timer brought the list
	 * back; on a slow load it fired before navigation.js ran, and the header
	 * opened and closed again: a layout shift of 0.7 on phones.)
	 */
	.js:not(.isarch-nav-fallback) .isarch-nav:not(.isarch-nav--js) button.isarch-nav__menu-button {
		display: inline-flex;
	}

	.js:not(.isarch-nav-fallback) .isarch-nav:not(.isarch-nav--js) .isarch-nav__panel {
		height: 0;
		left: 0;
		overflow: hidden;
		position: absolute;
		top: 0;
		visibility: hidden;
	}

	.isarch-nav__list > li {
		border-bottom: 1px solid var(--isarch-line-dark);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.isarch-nav__list > li > a,
	.isarch-nav__list > li > button.isarch-nav__toggle--label {
		flex: 1 1 auto;
		font-size: 1.0625rem;
		justify-content: space-between;
		padding-inline: 0;
	}

	.isarch-nav button.isarch-nav__toggle--icon {
		min-width: 44px;
	}

	.isarch-nav .sub-menu {
		padding: 0 0 0.75rem 1rem;
		width: 100%;
	}
}

/* The compact header (menu button) uses the smaller logo, at the same
   breakpoint as the navigation. */
@media (max-width: 79.999em) {
	.isarch-logo__image {
		width: 120px;
	}
}

@media (max-width: 767px) {
	.isarch-logo__image {
		width: 96px;
	}

	body a.isarch-cta {
		font-size: 0.8125rem;
		gap: 0.375rem;
		padding: 0.5rem 0.875rem;
	}
}

/* Narrow phones: the menu button shows its icon only (the name "Menu" stays
   for assistive technology), so logo, menu and entry link fit at 320px.
   These steps are in em (479, 374 and 359px at the default 16px), so they
   follow the reader's default font size like the 80em step above: with a
   larger default font size the row's text grew while steps in px no longer
   applied, and from 320 to 480px at 24px the row ran up to 16px past the
   window (reported 2026-10-11). */
@media (max-width: 29.9375em) {
	.isarch-nav button.isarch-nav__menu-button {
		justify-content: center;
		padding: 0;
		width: 44px;
	}

	.isarch-nav__menu-label {
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
}

@media (max-width: 23.375em) {
	.isarch-cta svg {
		display: none;
	}
}

@media (max-width: 22.4375em) {
	.isarch-logo__image {
		width: 76px;
	}

	body a.isarch-cta {
		font-size: 0.75rem;
		padding: 0.5rem 0.75rem;
	}
}

/* Narrower than 20em (below 320px at the default 16px, so never at that
   size; 320 to 478px at a 24px default font size): a 64px logo, and the
   entry link's text follows the window (4.375vw, 14px at 320px) with less
   side padding. Its whole visible text stays, so the link's name still
   contains it (WCAG 2.5.3). The image sizes of the logo (functions.php)
   follow these steps. */
@media (max-width: 19.9375em) {
	.isarch-logo__image {
		width: 64px;
	}

	body a.isarch-cta {
		font-size: min(0.75rem, 4.375vw);
		padding-inline: 0.625rem;
	}
}

/* ---------- Footer ---------- */

.elementor-location-footer {
	background: var(--isarch-color-chrome-bg);
	border-top: 1px solid var(--isarch-line-dark);
	color: var(--isarch-paper);
}

.isarch-footer p {
	margin: 0 0 0.375rem;
}

.isarch-footer__about {
	color: var(--isarch-mist);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.isarch-footer__about strong {
	color: var(--isarch-paper);
	font-family: var(--isarch-font-display);
	font-size: 1.25rem;
	font-stretch: 112%;
	font-weight: 700;
}

.isarch-footer a.isarch-email {
	color: var(--isarch-yellow);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.isarch-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.isarch-menu a {
	align-items: center;
	color: var(--isarch-paper);
	display: inline-flex;
	font: 500 0.9375rem/1.3 var(--isarch-font-body);
	min-height: 32px;
	text-decoration: none;
	transition: color 0.15s ease;
}

.isarch-menu a:hover {
	color: var(--isarch-yellow);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.isarch-menu--columns ul {
	column-gap: 2rem;
	columns: 2;
}

.isarch-menu--inline ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
}

.isarch-menu--inline a {
	color: var(--isarch-mist);
	font-size: 0.8125rem;
}

.isarch-footer__copyright .elementor-heading-title {
	color: var(--isarch-mist);
	font: 400 0.8125rem/1.5 var(--isarch-font-body);
}

/* ---------- Light reading layout (posts, post archives, search) ---------- */

.isarch-reading {
	background: var(--isarch-color-reading-bg);
	color: var(--isarch-color-reading-text);
}

body .isarch-reading h1,
body .isarch-reading h2,
body .isarch-reading h3,
body .isarch-reading h4,
body .isarch-reading h5,
body .isarch-reading h6,
body .isarch-reading .elementor-heading-title {
	color: var(--isarch-color-reading-text);
}

body .isarch-reading a {
	color: var(--isarch-color-reading-text);
}

.isarch-meta {
	align-items: center;
	color: var(--isarch-color-reading-muted);
	display: flex;
	flex-wrap: wrap;
	font: 500 0.875rem/1.4 var(--isarch-font-body);
	gap: 0.25rem 0.75rem;
	letter-spacing: 0.04em;
	margin: 0;
	text-transform: uppercase;
}

body .isarch-meta a {
	align-items: center;
	color: var(--isarch-color-reading-text);
	display: inline-flex;
	font-weight: 600;
	min-height: 24px;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--isarch-yellow);
	text-underline-offset: 0.3em;
}

/* Hover: the text keeps its colour (not the Kit's pale yellow), the
   underline turns dark and thicker. */
body .isarch-meta a:hover {
	color: var(--isarch-color-reading-text);
	text-decoration-color: currentColor;
	text-decoration-thickness: 3px;
}

.isarch-meta__separator::before {
	background: currentColor;
	border-radius: 50%;
	content: "";
	display: block;
	height: 4px;
	width: 4px;
}

/* The post title follows its column (as the page titles in pages.css):
   13% of the column fits a word of up to 7.1em with 8% spare ("Announced",
   6.18em, ran 9px past a 288px column at a 24px default font size). At the
   default 16px the column is wide enough everywhere, so nothing changes. */
.elementor-widget.isarch-single__title {
	container-type: inline-size;
	width: 100%;
}

.isarch-single__title .elementor-heading-title {
	font-family: var(--isarch-font-display);
	font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
	font-size: min(clamp(2rem, 1.35rem + 2.6vw, 3.25rem), 13cqi);
	font-stretch: 112%;
	font-weight: 750;
	letter-spacing: -0.01em;
	line-height: 1.08;
}

/* The featured image widget is a flex item of a column container: with an
   auto width its height was measured before the image loaded, as 0, and the
   content jumped down by the image height when it arrived (CLS 0.19 at
   390 px, 2026-10-16). A definite width lets the width and height
   attributes reserve the space. */
.elementor-widget.isarch-single__image {
	width: 100%;
}

.isarch-single__image img {
	border-radius: var(--isarch-radius);
	display: block;
	width: 100%;
}

/* Post content: readable measure, visible links. Body text in "Inter Text"
   (fonts.css: the Inter files without a late swap); after it only the
   metric fallback, not "Inter", which would swap. */
.isarch-content {
	font-family: "Inter Text", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 1.125rem;
	line-height: 1.7;
}

.isarch-content p,
.isarch-content ul,
.isarch-content ol,
.isarch-content blockquote,
.isarch-content figure,
.isarch-content table {
	margin: 0 0 1.25em;
}

.isarch-content h2,
.isarch-content h3,
.isarch-content h4 {
	font-family: var(--isarch-font-display);
	font-weight: 700;
	line-height: 1.2;
	margin: 2em 0 0.6em;
}

.isarch-content h2 {
	font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}

.isarch-content h3 {
	font-size: 1.375rem;
}

.isarch-content h4 {
	font-size: 1.1875rem;
}

body .isarch-content a {
	color: var(--isarch-color-reading-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: background-color 0.15s ease;
}

body .isarch-content a:hover {
	background: var(--isarch-yellow);
	/* The Kit's site-wide link hover colour (pale yellow, for dark bands)
	   would sit on the yellow: keep the reading text colour (WCAG 1.4.3). */
	color: var(--isarch-color-reading-text);
	text-decoration-thickness: 2px;
}

.isarch-content img {
	border-radius: 12px;
}

.isarch-content figcaption,
.isarch-content .wp-element-caption {
	color: var(--isarch-color-reading-muted);
	font-size: 0.875rem;
	margin-top: 0.5rem;
}

.isarch-content blockquote {
	border-left: 4px solid var(--isarch-yellow);
	padding-left: 1.25rem;
}

.isarch-content table {
	border-collapse: collapse;
	width: 100%;
}

.isarch-content th,
.isarch-content td {
	border: 1px solid var(--isarch-line-light);
	padding: 0.5rem 0.75rem;
	text-align: left;
}

/* Previous and next post (Elementor Pro post navigation): two columns that
   wrap long titles (the widget's own styles keep them on one line). */
.isarch-post-nav {
	border-top: 1px solid var(--isarch-line-light);
	padding-top: 1.5rem;
}

body .isarch-post-nav .elementor-post-navigation {
	display: grid;
	gap: 1.5rem 2rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	overflow: visible;
}

body .isarch-post-nav .elementor-post-navigation__separator-wrapper {
	display: none;
}

body .isarch-post-nav .elementor-post-navigation__link {
	min-width: 0;
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
	width: auto;
}

body .isarch-post-nav .elementor-post-navigation__next {
	grid-column: 2;
	text-align: right;
}

body .isarch-post-nav .elementor-post-navigation__link a {
	display: block;
	max-width: none;
	text-decoration: none;
}

body .isarch-post-nav .elementor-post-navigation__link__prev,
body .isarch-post-nav .elementor-post-navigation__link__next {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	overflow: visible;
	white-space: normal;
}

body .isarch-post-nav .elementor-post-navigation__link__next {
	align-items: flex-end;
}

body .isarch-post-nav span.post-navigation__prev--label,
body .isarch-post-nav span.post-navigation__next--label {
	color: var(--isarch-color-reading-muted);
	font: 600 0.75rem/1.2 var(--isarch-font-body);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

body .isarch-post-nav span.post-navigation__prev--title,
body .isarch-post-nav span.post-navigation__next--title {
	color: var(--isarch-color-reading-text);
	font: 600 1rem/1.35 var(--isarch-font-body);
	overflow: visible;
	text-decoration: underline;
	text-decoration-color: var(--isarch-line-light);
	text-underline-offset: 0.25em;
	white-space: normal;
}

body .isarch-post-nav a:hover span.post-navigation__prev--title,
body .isarch-post-nav a:hover span.post-navigation__next--title {
	text-decoration-color: currentColor;
}

@media (max-width: 767px) {
	body .isarch-post-nav .elementor-post-navigation {
		grid-template-columns: minmax(0, 1fr);
	}

	body .isarch-post-nav .elementor-post-navigation__next {
		grid-column: 1;
		text-align: left;
	}

	body .isarch-post-nav .elementor-post-navigation__link__next {
		align-items: flex-start;
	}
}

/* Archive heading and post cards. The heading's size is capped at a share
   of its own width (container unit, as for the display headings in
   pages.css): "JOURNAL" is 6.18em wide, 14.8% leaves it 8.5% spare, so it
   no longer breaks in the middle on phones with a larger default font size.
   The definite width keeps a wrapping column from measuring the widget at
   zero width. overflow-wrap stays for 1.4.12 spacing and long search
   terms. */
.elementor-widget.isarch-archive__title {
	container-type: inline-size;
	width: 100%;
}

.isarch-archive__title .elementor-heading-title {
	font-family: var(--isarch-font-display);
	font-size: clamp(2.75rem, 1.8rem + 4.5vw, 5.5rem);
	font-size: min(clamp(2.75rem, 1.8rem + 4.5vw, 5.5rem), 14.8cqi);
	font-stretch: 125%;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 0.95;
	overflow-wrap: anywhere;
}

.isarch-cards {
	display: grid;
	gap: 3rem 2rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
	.isarch-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.isarch-cards {
		gap: 2.5rem;
		grid-template-columns: minmax(0, 1fr);
	}
}

.isarch-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	position: relative;
}

.isarch-card__media {
	aspect-ratio: 3 / 2;
	border-radius: 14px;
	order: -1;
	overflow: hidden;
}

.isarch-card__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.isarch-card__body {
	border-top: 2px solid var(--isarch-color-reading-text);
	padding-top: 1rem;
}

body .isarch-reading .isarch-card__title {
	font-family: var(--isarch-font-display);
	font-size: 1.375rem;
	font-stretch: 106%;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 0.5rem;
}

body .isarch-card__link {
	text-decoration: none;
}

/* The whole card is the target of its title link. */
.isarch-card__link::after {
	border-radius: 14px;
	content: "";
	inset: 0;
	position: absolute;
}

body .isarch-card__link:hover {
	color: var(--isarch-color-reading-text);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.isarch-card__link:focus-visible {
	outline: none;
}

.isarch-card__link:focus-visible::after {
	outline: 3px solid var(--isarch-focus-on-light);
	outline-offset: 6px;
}

.isarch-card__meta {
	color: var(--isarch-color-reading-muted);
	font: 500 0.875rem/1.4 var(--isarch-font-body);
	margin: 0 0 0.5rem;
}

.isarch-card__excerpt {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
}

.isarch-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.isarch-pagination .page-numbers {
	align-items: center;
	border: 1px solid var(--isarch-color-reading-text);
	border-radius: var(--isarch-radius-pill);
	display: inline-flex;
	font: 600 0.9375rem/1 var(--isarch-font-body);
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: 0 1rem;
	text-decoration: none;
}

body .isarch-pagination a.page-numbers:hover {
	background: var(--isarch-yellow);
	/* Not the Kit's pale yellow link hover colour on yellow (WCAG 1.4.3). */
	color: var(--isarch-black);
}

.isarch-pagination .page-numbers.current {
	background: var(--isarch-color-reading-text);
	color: var(--isarch-color-reading-bg);
}

.isarch-pagination .page-numbers.dots {
	border-color: transparent;
}

.isarch-empty .search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.5rem 0;
}

.isarch-empty .search-form label {
	flex: 1 1 16rem;
}

.isarch-empty .search-field {
	width: 100%;
}

body .isarch-empty a.isarch-empty__link {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---------- Dark stage: error page ---------- */

.isarch-display .elementor-heading-title {
	color: var(--isarch-yellow);
	font-family: var(--isarch-font-display);
	font-size: clamp(3rem, 1.8rem + 6vw, 7.5rem);
	font-stretch: 125%;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 0.92;
}

.isarch-lead {
	color: var(--isarch-paper);
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	line-height: 1.5;
}

.isarch-lead p {
	margin: 0;
}

body .isarch-error .elementor-search-form__container {
	border: 0;
	border-radius: var(--isarch-radius-pill);
	min-height: 52px;
	overflow: hidden;
}

body .isarch-error input.elementor-search-form__input {
	background: var(--isarch-paper);
	border: 0;
	border-radius: 0;
	color: var(--isarch-ink);
	font: 400 1rem/1.4 var(--isarch-font-body);
	padding-inline: 1.5rem;
}

body .isarch-error input.elementor-search-form__input::placeholder {
	color: var(--isarch-stone);
	opacity: 1;
}

body .isarch-error button.elementor-search-form__submit {
	background: var(--isarch-yellow);
	border-radius: 0;
	color: var(--isarch-black);
	font: 600 1rem/1 var(--isarch-font-body);
	min-width: 6.5rem;
}

body .isarch-error button.elementor-search-form__submit:hover {
	background: var(--isarch-yellow-soft);
	color: var(--isarch-black);
}

.isarch-error .elementor-search-form__container:focus-within {
	outline: 3px solid var(--isarch-focus-on-dark);
	outline-offset: 3px;
}

/* The pill clips the outlines of the field and the button: the container
   shows focus (above) and the button adds an inset ring so the stops differ. */
body .isarch-error input.elementor-search-form__input:focus-visible {
	outline: none;
}

body .isarch-error button.elementor-search-form__submit:focus-visible {
	background: var(--isarch-yellow-soft);
	outline: 3px solid var(--isarch-black);
	outline-offset: -6px;
}

/* Ghost buttons on dark surfaces. */
body .isarch-button-ghost .elementor-button {
	background: transparent;
	border: 1px solid var(--isarch-mist);
	color: var(--isarch-paper);
	width: 100%;
}

body .isarch-button-ghost .elementor-button:hover,
body .isarch-button-ghost .elementor-button:focus-visible {
	background: var(--isarch-yellow);
	border-color: var(--isarch-yellow);
	color: var(--isarch-black);
}

/* ---------- Reduced motion ---------- */

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