/**
 * plugins/themes/aetherion/styles/aetherion.css
 *
 * AETHERION's look, loaded after the default theme's stylesheet (the parent's
 * styles register first), so equal-specificity rules here win.
 *
 * "Payak" (simple), the direction CMC chose on 2026-10-19 from the three
 * mockups in journals/aetherion/mockups/. A navy masthead and footer from the
 * client's Blues, a mist opening that holds the journal's name beside the call
 * for papers, then a white page. No ornament: hairlines and space carry the
 * structure. Gold is for actions: a filled button, an underline, the bar under
 * the current menu item, links on navy.
 *
 * Type: Red Hat Display for headings, Red Hat Text for navigation, buttons,
 * labels and meta, Source Serif 4 for reading. See fonts.css. rem is the
 * browser's own (16px by default), not the parent theme's 14px.
 *
 * Colours: the client's Blues set (Blues 9 navy, Blues 8 links, Blues 1-3 for
 * panel, hover and rule), Teal for the drawn issue cover, Metallic Gold
 * #D4AF37. Contrast, WCAG 2.1 (AA needs 4.5:1 for text, 3:1 for large text and
 * a control's edge):
 *   ink on white 15.43, on mist 14.84        muted on white 6.92, mist 6.65, Blues-2 5.71
 *   link (Blues 8) on white 7.87, mist 7.57, Blues-2 6.50, Blues-3 5.54
 *   navy on white 12.76, mist 12.28           navy on gold 6.07, gold on navy 6.07
 *   gold-hi on navy 7.65                      Blues-2 on navy 10.53, Blues-4 on navy 7.29
 *   white on navy 12.76, on teal 4.77         field edge on white 5.42
 *   error on white 7.26, on error-tint 6.58   ink on error-tint 13.98
 * Gold is 2.10:1 on white, so it never sets text on a light surface: there it
 * is a fill with navy text, an underline, or a rule. Blues-3 (1.42:1) is for
 * hairlines only.
 *
 * Sections: 1 tokens · 2 base · 3 header · 4 the opening and page heads ·
 * 5 columns and sidebar · 6 homepage · 7 footer · 8 custom pages and their
 * components · 9 reading pages (the issue's contents, the article) · 10 OJS's
 * own pages (archives, announcements, search, forms).
 */

/* 1. Tokens ================================================================ */

:root {
	--aeth-navy: #08306b;     /* Blues 9: the masthead, footer, headings */
	--aeth-link: #08519c;     /* Blues 8: links and the focus ring on light */
	--aeth-mist: #f7fbff;     /* Blues 1: the opening, page heads, panels */
	--aeth-b2: #deebf7;       /* Blues 2: hover; text on navy */
	--aeth-line: #c6dbef;     /* Blues 3: every hairline */
	--aeth-b4: #9ecae1;       /* Blues 4: secondary text on navy */
	--aeth-ink: #102540;      /* reading text */
	--aeth-muted: #4a5b73;    /* dates, labels, meta */
	--aeth-gold: #d4af37;     /* Metallic Gold: buttons, underlines, the menu bar */
	--aeth-gold-hi: #e6c65a;  /* gold links on navy, hovered */
	--aeth-teal: #008080;     /* the drawn issue cover */
	--aeth-field: #5a6b85;    /* form-field edges */
	--aeth-error: #a4262c;    /* a form's error text and the edge of a field in error */
	--aeth-error-tint: #fdf1f1; /* behind a form's error message */
	--aeth-white: #ffffff;

	--aeth-display: 'Red Hat Display', system-ui, sans-serif;
	--aeth-ui: 'Red Hat Text', system-ui, sans-serif;
	--aeth-read: 'Source Serif 4', Georgia, 'Times New Roman', serif;

	--aeth-wrap: 1200px;
	--aeth-gut: clamp(16px, 3vw, 32px);
	--aeth-radius: 2px;
	--aeth-ease: cubic-bezier(0.16, 1, 0.3, 1);

	/* Icons, drawn at 1.8 stroke and painted in currentColor through a mask. */
	--aeth-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--aeth-i-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
	--aeth-i-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E");
	--aeth-i-feed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11a8 8 0 0 1 8 8M5 5a14 14 0 0 1 14 14'/%3E%3Ccircle cx='6' cy='18' r='1.4'/%3E%3C/svg%3E");

	/* The custom-page design is the same content contract as journal-pages
	   (plain elements + jp-* components); toc.js only builds the Contents box
	   on a page that sets --jp-accent, which section 8 does. */
}

/* 2. Base =================================================================== */

html {
	font-size: 100%;
}

html,
body {
	background: var(--aeth-white);
	color: var(--aeth-ink);
}

body {
	font-family: var(--aeth-read);
	font-size: 1.0625rem;
	line-height: 1.65;
	font-optical-sizing: auto;
	-webkit-text-size-adjust: 100%;
	/* A string with no break (a URL in an announcement, a hyphen-joined title)
	   wraps rather than running into the next column or under the page's clip. */
	overflow-wrap: break-word;
}

.pkp_structure_page {
	background: var(--aeth-white);
	overflow-x: clip;
}

::selection {
	background: var(--aeth-gold);
	color: var(--aeth-navy);
}

a {
	color: var(--aeth-link);
	text-decoration: underline;
	text-decoration-color: var(--aeth-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

a:focus {
	color: var(--aeth-link);
}

a:hover {
	color: var(--aeth-navy);
	text-decoration-color: var(--aeth-navy);
}

:focus-visible {
	outline: 3px solid var(--aeth-link);
	outline-offset: 2px;
}

.pkp_structure_main :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	font-family: var(--aeth-display);
	color: var(--aeth-navy);
	text-wrap: balance;
}

.pkp_structure_main :is(p, ul) {
	margin: 0 0 1em;
	line-height: inherit;
}

/* One container for every row: the masthead, the opening, the columns, the
   footer. The parent theme's fixed widths (728/952/1160px) give way to it. */
.aeth-util,
.pkp_head_wrapper,
.has_site_logo .pkp_head_wrapper,
.aeth-opening_inner,
.aeth-pagehead_inner,
.pkp_structure_content,
.pkp_structure_footer {
	box-sizing: border-box;
	width: auto;
	max-width: var(--aeth-wrap);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--aeth-gut);
	padding-right: var(--aeth-gut);
}

/* The rows below are flex or grid boxes; OJS's clearfix pseudo-elements on
   them would become items and push the content off the gutter. */
:is(.pkp_head_wrapper, .has_site_logo .pkp_head_wrapper, .pkp_site_name_wrapper, .pkp_navigation_primary_wrapper, .pkp_navigation_user, .pkp_structure_content, .pkp_structure_footer, .pkp_structure_main)::before,
:is(.pkp_head_wrapper, .has_site_logo .pkp_head_wrapper, .pkp_site_name_wrapper, .pkp_navigation_primary_wrapper, .pkp_navigation_user, .pkp_structure_content, .pkp_structure_footer, .pkp_structure_main)::after {
	content: none;
}

.aeth-icon {
	width: 1.1em;
	height: 1.1em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Buttons: square, gold-filled for the one action; navy-outlined beside it.
   A page's hero and a box's download (section 8), a form's submit (section 10)
   are drawn the same. */
.aeth-button,
.page_custom table.jp-hero a,
.page_custom table.jp-box p:has(> code) a,
.cmp_form button.submit,
.cmp_form .buttons > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: 1.5px solid var(--aeth-gold);
	border-radius: var(--aeth-radius);
	background: var(--aeth-gold);
	margin: 0;
	box-shadow: none;
	font: 600 1rem/1.2 var(--aeth-ui);
	color: var(--aeth-navy);
	text-decoration: none;
	text-shadow: none;
	transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}

/* The parent's buttons shade inward on rest and hover; these stay flat. */
.cmp_form :is(button.submit, .buttons > a):is(:hover, :focus, :active) {
	box-shadow: none;
}

.aeth-button:focus,
.page_custom table.jp-hero a:focus,
.page_custom table.jp-box p:has(> code) a:focus,
.cmp_form button.submit:focus {
	color: var(--aeth-navy);
}

.aeth-button:hover,
.page_custom table.jp-hero a:hover,
.page_custom table.jp-box p:has(> code) a:hover,
.cmp_form button.submit:hover {
	background: var(--aeth-navy);
	border-color: var(--aeth-navy);
	color: var(--aeth-gold);
}

.aeth-button_secondary,
.aeth-button_secondary:focus,
.page_custom table.jp-hero a + a,
.page_custom table.jp-hero a + a:focus,
.cmp_form .buttons > a,
.cmp_form .buttons > a:focus {
	background: transparent;
	border-color: var(--aeth-navy);
	color: var(--aeth-navy);
}

.aeth-button_secondary:hover,
.page_custom table.jp-hero a + a:hover,
.cmp_form .buttons > a:hover {
	background: var(--aeth-navy);
	border-color: var(--aeth-navy);
	color: var(--aeth-white);
}

.aeth-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

/* "Read the call for papers", "Read more": a link with an arrow. */
.aeth-more,
.obj_announcement_summary .read_more,
.pkp_page_index .current_issue .read_more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 600 1rem/1.3 var(--aeth-ui);
}

.aeth-more::after,
.obj_announcement_summary .read_more::after,
.pkp_page_index .current_issue .read_more::after {
	content: "";
	position: static;
	flex: none;
	width: 1.1em;
	height: 1.1em;
	transform: none;
	background: currentColor;
	-webkit-mask: var(--aeth-i-arrow) center / contain no-repeat;
	mask: var(--aeth-i-arrow) center / contain no-repeat;
}

/* Breadcrumbs, in the page heads and on the article. */
.cmp_breadcrumbs {
	display: block;
}

.cmp_breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font: 500 0.9rem/1.4 var(--aeth-ui);
	color: var(--aeth-muted);
}

.cmp_breadcrumbs li {
	display: inline;
}

/* inline-block drops the space OJS leaves inside each link, so the underline
   stops at the word. */
.cmp_breadcrumbs a {
	display: inline-block;
	text-decoration: underline;
	text-decoration-color: var(--aeth-gold);
}

.cmp_breadcrumbs .separator {
	margin: 0 10px;
	padding: 0;
	color: var(--aeth-b4);
}

.cmp_breadcrumbs .current {
	color: var(--aeth-muted);
}

/* 3. Header ================================================================= */

.pkp_structure_head {
	position: relative;
	z-index: 20;
	background: var(--aeth-navy);
	border-bottom: 0;
	color: var(--aeth-white);
}

.pkp_structure_head :focus-visible {
	outline: 3px solid var(--aeth-gold);
	outline-offset: 2px;
}

/* The user menu (Register, Login, or the account): its own row, top right. */
.aeth-util {
	display: flex;
	justify-content: flex-end;
	padding-top: 10px;
}

.aeth-util .pkp_navigation_user_wrapper {
	position: static;
	transform: none;
	margin: 0;
	padding: 0;
	border: 0;
	text-align: right;
}

.aeth-util .pkp_navigation_user.pkp_navigation_user {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 4px 20px;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	font-size: 1rem;
}

.aeth-util .pkp_navigation_user li {
	display: block;
}

.pkp_structure_head .pkp_navigation_user > li > a,
.pkp_structure_head .pkp_navigation_user > li:last-child > a {
	margin: 0;
	padding: 0;
	font: 500 0.875rem/1.4 var(--aeth-ui);
	color: var(--aeth-b2);
	text-decoration: none;
}

.pkp_structure_head .pkp_navigation_user > li > a:focus {
	background: transparent;
	color: var(--aeth-b2);
}

.pkp_structure_head .pkp_navigation_user > li > a:hover {
	color: var(--aeth-gold);
}

.pkp_navigation_user .task_count {
	background: var(--aeth-gold);
	color: var(--aeth-navy);
}

/* The logo and the primary menu. */
.pkp_site_name_wrapper {
	flex: none;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
}

.pkp_site_name {
	position: static;
	width: auto;
	padding: 0;
	overflow: visible;
	white-space: normal;
	font-size: inherit;
}

.pkp_site_name .is_img {
	display: block;
	margin: 0;
}

.pkp_site_name .is_img img {
	width: auto;
	height: 58px;
	max-height: none;
}

.pkp_site_name .is_img:focus {
	outline: 0;
}

.pkp_site_name .is_img:focus-visible {
	outline: 3px solid var(--aeth-gold);
	outline-offset: 4px;
}

.pkp_navigation_primary_wrapper {
	width: auto;
	margin: 0;
	padding: 0;
}

/* The parent takes the outline off header links on focus; keyboard focus gets it back. */
.pkp_structure_head :is(.pkp_nav_list a, .pkp_navigation_search_wrapper a):focus-visible {
	outline: 3px solid var(--aeth-gold);
	outline-offset: 2px;
}

/* Desktop: the logo left, the menu right, Search behind a hairline. */
@media (min-width: 992px) {
	.pkp_head_wrapper,
	.has_site_logo .pkp_head_wrapper {
		display: flex;
		align-items: center;
		gap: 24px;
		padding-top: 6px;
		padding-bottom: 22px;
	}

	/* The parent's mobile z-index (9999) applies to a static flex item, which
	   would put this row over the user menu's dropdown. */
	.pkp_site_nav_menu {
		z-index: auto;
		display: flex;
		align-items: center;
		width: auto;
		margin-left: auto;
		padding: 0;
		background: transparent;
	}

	.pkp_navigation_primary_wrapper {
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.pkp_navigation_primary {
		display: flex;
		max-width: none;
		text-align: left;
	}

	/* The gold bar under the item that is hovered, open or current. */
	.pkp_structure_head .pkp_navigation_primary > li > a,
	.pkp_structure_head .pkp_navigation_primary > li:first-child > a,
	.pkp_structure_head .pkp_navigation_primary > li:last-child > a {
		display: flex;
		align-items: center;
		gap: 2px;
		margin: 0;
		padding: 12px 11px 10px;
		border: 0;
		background: linear-gradient(var(--aeth-gold), var(--aeth-gold)) no-repeat 11px calc(100% - 2px) / 0 3px;
		font: 500 1rem/1.2 var(--aeth-ui);
		color: var(--aeth-white);
		text-decoration: none;
		transition: background-size 300ms var(--aeth-ease);
	}

	.pkp_structure_head .pkp_navigation_primary > li > a:focus {
		background-color: transparent;
		color: var(--aeth-white);
	}

	.pkp_structure_head .pkp_navigation_primary > li > a:hover,
	.pkp_structure_head .pkp_navigation_primary > li > a[aria-expanded="true"],
	.pkp_structure_head .pkp_navigation_primary > li:focus-within > a,
	.pkp_structure_head .pkp_navigation_primary > li.aeth-current > a {
		background-size: calc(100% - 22px) 3px;
		color: var(--aeth-white);
	}

	/* Dropdown parents get a chevron (main.js marks them aria-haspopup). */
	.pkp_structure_head .pkp_nav_list [aria-haspopup]::after {
		content: "";
		width: 16px;
		height: 16px;
		margin: 0 0 0 2px;
		border: 0;
		background: currentColor;
		opacity: 0.8;
		-webkit-mask: var(--aeth-i-chev) center / contain no-repeat;
		mask: var(--aeth-i-chev) center / contain no-repeat;
	}

	/* Dropdowns: white, the one floating surface, so the one shadow. */
	.pkp_structure_head .pkp_nav_list ul {
		width: auto;
		min-width: 260px;
		padding: 8px 0;
		background: var(--aeth-white);
		border: 0;
		border-radius: var(--aeth-radius);
		box-shadow: 0 14px 30px rgba(8, 48, 107, 0.18), 0 2px 6px rgba(8, 48, 107, 0.1);
	}

	.pkp_structure_head .pkp_navigation_primary > li:hover > ul {
		top: 100%;
		left: 0;
		transform: none;
	}

	/* Shown while the li is hovered, not just the link (the parent's rule): the
	   li runs a few pixels below the link, and that gap closed the dropdown. */
	.pkp_structure_head .pkp_navigation_user > li:hover > ul {
		display: block;
		top: 100%;
		right: 0;
		left: auto;
		transform: none;
	}

	.pkp_structure_head .pkp_nav_list ul a,
	.pkp_structure_head .pkp_nav_list ul li:first-child a,
	.pkp_structure_head .pkp_nav_list ul li:last-child a {
		display: block;
		margin: 0;
		padding: 10px 18px;
		border: 0;
		border-radius: 0;
		font: 500 0.98rem/1.35 var(--aeth-ui);
		color: var(--aeth-ink);
		white-space: nowrap;
		text-decoration: none;
	}

	.pkp_structure_head .pkp_nav_list ul a:hover,
	.pkp_structure_head .pkp_nav_list ul a:focus {
		background: var(--aeth-mist);
		color: var(--aeth-link);
	}

	.pkp_structure_head .pkp_navigation_search_wrapper {
		float: none;
		margin: 0;
		padding: 0;
		border: 0;
	}

	.pkp_structure_head .pkp_navigation_search_wrapper a {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin: 0 0 0 6px;
		padding: 10px 4px 10px 14px;
		border: 0;
		border-left: 1px solid rgba(222, 235, 247, 0.25);
		font: 500 1rem/1.2 var(--aeth-ui);
		color: var(--aeth-white);
		text-decoration: none;
	}

	.pkp_structure_head .pkp_navigation_search_wrapper a:focus {
		background: transparent;
		color: var(--aeth-white);
	}

	.pkp_structure_head .pkp_navigation_search_wrapper a:hover {
		color: var(--aeth-gold);
	}
}

/* Narrow desktops: the same row, set smaller so it stays one line. */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.pkp_structure_head .pkp_navigation_primary > li > a,
	.pkp_structure_head .pkp_navigation_primary > li:first-child > a,
	.pkp_structure_head .pkp_navigation_primary > li:last-child > a {
		padding-left: 8px;
		padding-right: 8px;
		background-position-x: 8px;
		font-size: 0.95rem;
	}

	.pkp_structure_head .pkp_navigation_primary > li > a:hover,
	.pkp_structure_head .pkp_navigation_primary > li > a[aria-expanded="true"],
	.pkp_structure_head .pkp_navigation_primary > li:focus-within > a,
	.pkp_structure_head .pkp_navigation_primary > li.aeth-current > a {
		background-size: calc(100% - 16px) 3px;
	}

	.pkp_site_name .is_img img {
		height: 50px;
	}
}

/* Phones and tablets: the logo and a menu button; the menu opens in the masthead. */
@media (max-width: 991.98px) {
	.pkp_head_wrapper,
	.has_site_logo .pkp_head_wrapper {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding-top: 6px;
		padding-bottom: 16px;
	}

	.pkp_site_name_wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		width: 100%;
	}

	.pkp_site_name .is_img img {
		height: 46px;
	}

	.pkp_site_nav_toggle {
		position: relative;
		order: 2;
		flex: none;
		width: 44px;
		height: 44px;
		border: 1px solid rgba(222, 235, 247, 0.45);
		border-radius: var(--aeth-radius);
		background: transparent;
		box-shadow: none;
		cursor: pointer;
	}

	.pkp_site_nav_toggle > span {
		width: 22px;
		height: 16px;
		border-bottom-width: 2px;
	}

	.pkp_site_nav_toggle > span::before,
	.pkp_site_nav_toggle > span::after {
		height: 2px;
	}

	.pkp_site_nav_toggle > span::after {
		top: 7px;
	}

	.pkp_site_nav_toggle:focus {
		outline: 0;
	}

	.pkp_site_nav_toggle:focus-visible {
		outline: 3px solid var(--aeth-gold);
		outline-offset: 2px;
	}

	.pkp_site_nav_menu {
		position: static;
		width: 100%;
		padding: 8px 0 0;
		background: transparent;
	}

	.pkp_site_nav_menu .pkp_navigation_primary > li {
		display: block;
	}

	.pkp_site_nav_menu .pkp_navigation_primary > li > a {
		display: block;
		padding: 13px 0;
		border-top: 1px solid rgba(222, 235, 247, 0.16);
		font: 500 1.05rem/1.2 var(--aeth-ui);
		color: var(--aeth-white);
		text-decoration: none;
	}

	.pkp_site_nav_menu ul ul {
		margin: 0;
		padding: 0 0 10px 16px;
	}

	.pkp_site_nav_menu ul ul a {
		display: block;
		padding: 7px 0;
		font: 500 0.98rem/1.35 var(--aeth-ui);
		color: var(--aeth-b2);
		text-decoration: none;
	}

	.pkp_site_nav_menu a:hover,
	.pkp_site_nav_menu a:focus {
		color: var(--aeth-gold);
		text-decoration: none;
	}

	.pkp_navigation_search_wrapper {
		margin: 0;
		padding: 0;
		border: 0;
	}

	.pkp_navigation_search_wrapper a {
		display: flex;
		align-items: center;
		gap: 6px;
		width: 100%;
		padding: 13px 0;
		border-top: 1px solid rgba(222, 235, 247, 0.16);
		font: 500 1.05rem/1.2 var(--aeth-ui);
		color: var(--aeth-white);
		text-decoration: none;
	}

	/* A signed-in user's menu has its items listed in the row, not as a dropdown. */
	.aeth-util .pkp_navigation_user ul {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 16px;
		margin: 2px 0 0;
		padding: 0;
		list-style: none;
	}

	.aeth-util .pkp_navigation_user ul a {
		font: 500 0.875rem/1.4 var(--aeth-ui);
		color: var(--aeth-b2);
		text-decoration: none;
	}
}

/* 4. The opening and page heads ============================================== */

/* The homepage: the journal's name, motto and buttons beside the call. */
.aeth-opening {
	background: var(--aeth-mist);
	border-bottom: 1px solid var(--aeth-line);
}

.aeth-opening_inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	column-gap: clamp(28px, 4vw, 56px);
	padding-top: clamp(36px, 5vw, 60px);
	padding-bottom: clamp(40px, 5vw, 64px);
}

/* No open call (after its deadline): the name and buttons hold the opening alone. */
.aeth-opening_inner:not(:has(> .aeth-opening_call)) {
	grid-template-columns: minmax(0, 1fr);
}

.aeth-opening_title {
	max-width: 19ch;
	margin: 0;
	font: 700 clamp(2.05rem, 3.5vw, 3.05rem)/1.08 var(--aeth-display);
	letter-spacing: -0.012em;
	color: var(--aeth-navy);
	text-wrap: balance;
}

.aeth-opening_motto {
	margin: 18px 0 30px;
	font: italic 400 clamp(1.15rem, 1.8vw, 1.35rem)/1.4 var(--aeth-read);
	color: var(--aeth-muted);
}

/* The call, behind a hairline that runs the opening's full height. */
.aeth-opening_call {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: clamp(28px, 4vw, 56px);
	border-left: 1px solid var(--aeth-line);
}

.aeth-opening_call h2 {
	margin: 0;
	font: 700 1.45rem/1.2 var(--aeth-display);
	color: var(--aeth-navy);
	text-wrap: balance;
}

.aeth-opening_theme {
	max-width: 36ch;
	margin: 12px 0 22px;
	font: italic 400 1.18rem/1.5 var(--aeth-read);
	color: var(--aeth-ink);
}

.aeth-opening_dates {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, max-content));
	gap: 10px 40px;
	margin: 0 0 22px;
}

.aeth-opening_dates dt {
	font: 500 0.875rem/1.3 var(--aeth-ui);
	color: var(--aeth-muted);
}

.aeth-opening_dates dd {
	margin: 4px 0 0;
	font: 700 1.3rem/1.2 var(--aeth-display);
	color: var(--aeth-navy);
}

.aeth-opening_call > p:last-child {
	margin: 0;
}

@media (max-width: 760px) {
	.aeth-opening_inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.aeth-opening_call {
		margin-top: 28px;
		padding: 28px 0 0;
		border-left: 0;
		border-top: 1px solid var(--aeth-line);
	}
}

@media (max-width: 480px) {
	.aeth-opening_dates {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Every other page with a title in the opening (custom pages): the breadcrumb, then the title. */
.aeth-pagehead {
	background: var(--aeth-mist);
	border-bottom: 1px solid var(--aeth-line);
}

.aeth-pagehead_inner {
	padding-top: 26px;
	padding-bottom: 38px;
}

.aeth-pagehead_title,
.obj_article_details > .page_title,
.page_issue > h1 {
	max-width: 30ch;
	margin: 20px 0 0;
	font: 700 clamp(1.75rem, 3vw, 2.5rem)/1.15 var(--aeth-display);
	letter-spacing: -0.008em;
	color: var(--aeth-navy);
	text-wrap: balance;
}

/* OJS's own pages print their breadcrumb and h1 again at the top of the page;
   the opening already holds both (header.tpl adds aeth-stock-band). An
   announcement repeats its title inside announcement_full.tpl. */
.aeth-stock-band .pkp_structure_main > .page > :is(.cmp_breadcrumbs, h1),
.page_announcement .obj_announcement_full > h1 {
	display: none;
}

/* 5. Columns and sidebar ===================================================== */

.pkp_structure_content {
	padding-top: 48px;
	padding-bottom: 80px;
}

.pkp_structure_main,
.pkp_structure_main:first-child:last-child {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.pkp_structure_sidebar {
	float: none;
	width: auto;
	display: grid;
	gap: 28px;
	align-content: start;
}

@media (min-width: 992px) {
	.pkp_structure_content.has_sidebar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 300px;
		column-gap: 64px;
		align-items: start;
	}
}

@media (max-width: 991.98px) {
	.pkp_structure_sidebar {
		padding-top: 56px;
	}
}

.pkp_block {
	margin: 0;
	padding: 0;
	font-family: var(--aeth-ui);
}

.pkp_block .title {
	margin: 0 0 10px;
	font: 700 1.2rem/1.25 var(--aeth-display);
	color: var(--aeth-navy);
}

/* Make a Submission: a mist panel; a paragraph holding only a link is the button. */
.block_custom {
	padding: 24px 24px 12px;
	background: var(--aeth-mist);
	border: 1px solid var(--aeth-line);
}

.block_custom .content p {
	margin: 0 0 1em;
	font: 400 1rem/1.6 var(--aeth-read);
	color: var(--aeth-ink);
}

.block_custom .content p:has(> a:only-child) a {
	display: flex;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 22px;
	border: 1.5px solid var(--aeth-gold);
	border-radius: var(--aeth-radius);
	background: var(--aeth-gold);
	font: 600 1rem/1.2 var(--aeth-ui);
	color: var(--aeth-navy);
	text-decoration: none;
	transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}

.block_custom .content p:has(> a:only-child) a:hover {
	background: var(--aeth-navy);
	border-color: var(--aeth-navy);
	color: var(--aeth-gold);
}

/* On the page the button opens, it would only link to itself. */
.pkp_page_submit-article .block_custom .content p:has(> a:only-child[href$="/submit-article"]) {
	display: none;
}

.block_custom .content ul {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.block_custom .content ul li {
	border-top: 1px solid var(--aeth-line);
}

.block_custom .content ul a {
	display: block;
	padding: 10px 0;
	font: 500 0.98rem/1.35 var(--aeth-ui);
	color: var(--aeth-link);
	text-decoration: none;
}

.block_custom .content ul a:hover {
	background: var(--aeth-b2);
	color: var(--aeth-navy);
	text-decoration: underline;
	text-decoration-color: var(--aeth-gold);
}

/* The feeds: three small labelled links, an icon and the format's name. */
.block_web_feed .content ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.block_web_feed .content li {
	margin: 0;
	padding: 0;
}

.block_web_feed .content a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border: 1px solid var(--aeth-line);
	border-radius: var(--aeth-radius);
	font: 500 0.9rem/1.3 var(--aeth-ui);
	color: var(--aeth-navy);
	text-decoration: none;
}

.block_web_feed .content a:hover {
	border-color: var(--aeth-navy);
}

.block_web_feed .content a::before {
	content: "";
	width: 1.1em;
	height: 1.1em;
	background: currentColor;
	-webkit-mask: var(--aeth-i-feed) center / contain no-repeat;
	mask: var(--aeth-i-feed) center / contain no-repeat;
}

/* The feed images name the format; the format's name, as text, replaces them. */
.block_web_feed .content img {
	display: none;
}

.block_web_feed .content a[href$="/atom"]::after { content: "Atom"; }
.block_web_feed .content a[href$="/rss2"]::after { content: "RSS 2.0"; }
.block_web_feed .content a[href$="/rss"]::after { content: "RSS 1.0"; }

/* 6. Homepage =============================================================== */

/* Announcements, about, sections and facts, then the issue: the template's
   order (indexJournal.tpl), so the keyboard follows the screen. */
.page_index_journal {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.pkp_page_index .pkp_structure_content {
	padding-top: 64px;
}

.pkp_page_index :is(.homepage_about, .cmp_announcements, .additional_content, .current_issue) {
	margin: 0;
	padding: 0;
	border: 0;
}

.pkp_page_index :is(.homepage_about, .cmp_announcements, .current_issue) > h2,
.pkp_page_index .additional_content > h2 {
	margin: 0 0 18px;
	font: 700 1.6rem/1.2 var(--aeth-display);
	color: var(--aeth-navy);
}

/* The parent hides the announcements heading; this page shows it. */
.pkp_page_index .cmp_announcements > h2 {
	position: static !important;
	left: auto;
	clip: auto;
}

.pkp_page_index .homepage_about p {
	max-width: 68ch;
	margin: 0;
	font: 400 1.15rem/1.72 var(--aeth-read);
	color: var(--aeth-ink);
}

.pkp_page_index .homepage_about strong {
	font-weight: 600;
	color: var(--aeth-navy);
}

/* Announcements: side by side, each under a hairline. */
.pkp_page_index .cmp_announcements::before,
.pkp_page_index .cmp_announcements::after {
	content: none;
}

.aeth-announcements_list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 0 40px;
}

.aeth-announcements .obj_announcement_summary {
	float: none;
	width: auto;
	margin: 0;
	padding: 18px 0 6px;
	border-top: 1px solid var(--aeth-line);
}

.obj_announcement_summary :is(h2, h3, h4) {
	margin: 0;
	font: 700 1.2rem/1.25 var(--aeth-display);
	color: var(--aeth-navy);
}

.obj_announcement_summary :is(h2, h3, h4) a {
	color: var(--aeth-navy);
	text-decoration: none;
}

.obj_announcement_summary :is(h2, h3, h4) a:hover {
	text-decoration: underline;
	text-decoration-color: var(--aeth-gold);
}

.obj_announcement_summary .date {
	margin: 6px 0 10px;
	font: 500 0.875rem/1.3 var(--aeth-ui);
	color: var(--aeth-muted);
}

.obj_announcement_summary .date::before {
	content: none;
}

.obj_announcement_summary .summary p {
	max-width: 68ch;
	margin: 0 0 1em;
	font: 400 1rem/1.65 var(--aeth-read);
	color: var(--aeth-ink);
}

/* 7. Footer ================================================================= */

.pkp_structure_footer_wrapper {
	background: var(--aeth-navy);
	border: 0;
	color: var(--aeth-b2);
}

.pkp_structure_footer {
	padding-top: 0;
	padding-bottom: 0;
	text-align: left;
}

.pkp_footer_content {
	padding: 0;
}

.pkp_brand_footer {
	display: none;
}

.aeth-footer {
	font-family: var(--aeth-ui);
}

/* The journal's three columns: publisher, contact, copyright. */
.aeth-footer > div:first-child {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 40px;
	padding: 52px 0 40px;
}

.aeth-footer h2 {
	margin: 0 0 14px;
	font: 700 1.1rem/1.3 var(--aeth-display);
	color: var(--aeth-white);
}

.aeth-footer h3 {
	margin: 16px 0 4px;
	font: 600 0.92rem/1.3 var(--aeth-ui);
	color: var(--aeth-b4);
}

.aeth-footer h2 + h3 {
	margin-top: 0;
}

.aeth-footer p {
	margin: 0 0 1em;
	font: 400 0.95rem/1.6 var(--aeth-ui);
	color: var(--aeth-b2);
	overflow-wrap: anywhere;
}

.aeth-footer strong {
	font-weight: 600;
	color: var(--aeth-white);
}

.aeth-footer a {
	color: var(--aeth-gold);
	text-decoration-color: rgba(212, 175, 55, 0.5);
}

.aeth-footer a:focus {
	color: var(--aeth-gold);
}

.aeth-footer a:hover {
	color: var(--aeth-gold-hi);
	text-decoration-color: var(--aeth-gold-hi);
}

.pkp_structure_footer_wrapper :focus-visible {
	outline-color: var(--aeth-gold);
}

/* The base row: the partners, then the platform's credit. */
.aeth-footer > div:last-child {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 18px;
	padding: 22px 0 32px;
	border-top: 1px solid rgba(222, 235, 247, 0.2);
}

.aeth-footer > div:last-child > p {
	margin: 0;
	font: 500 0.85rem/1.3 var(--aeth-ui);
	color: var(--aeth-b4);
}

.aeth-footer > div:last-child > p:last-child {
	margin-left: auto;
}

.aeth-footer > div:last-child > ul {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 auto 0 0;
	padding: 0;
	list-style: none;
}

.aeth-footer > div:last-child img {
	display: block;
	width: 64px;
	height: 64px;
}

/* 8. Custom pages and their components ===================================== */
/* (A single announcement's text follows the same contract.) */

/* The same content contract as tools/journal-pages: the page holds only
   headings, paragraphs, lists, notes (blockquote), links and tables, as typed
   in OJS's editor, plus the jp-* components from the editor's Styles menu (one
   class on a list, table or note). The homepage's additional content uses the
   same components. No cards in the reading column: hairlines and space. */
:is(.page_custom, .pkp_page_index .additional_content, .obj_announcement_full .description) {
	--jp-accent: var(--aeth-link);

	font-family: var(--aeth-read);
	color: var(--aeth-ink);

	/* ---- Contents box (built by toc.js from the h2s) ------------------- */
	& .jp-toc {
		margin: 0 0 48px;
		padding: 0;
	}

	& .jp-toc p {
		margin: 0 0 8px;
		font: 600 0.9rem/1.3 var(--aeth-ui);
		color: var(--aeth-muted);
	}

	& .jp-toc ol {
		max-width: none;
		margin: 0;
		padding: 0;
		list-style: none;
		columns: 2 260px;
		column-gap: 40px;
	}

	& .jp-toc li {
		margin: 0;
		padding: 0;
		border-top: 1px solid var(--aeth-line);
		break-inside: avoid;
		font-size: 1rem;
	}

	& .jp-toc a {
		display: block;
		padding: 9px 0;
		font: 500 0.98rem/1.35 var(--aeth-ui);
		color: var(--aeth-link);
		text-decoration: none;
	}

	& .jp-toc a:hover {
		background: var(--aeth-mist);
		color: var(--aeth-navy);
		text-decoration: underline;
		text-decoration-color: var(--aeth-gold);
	}

	/* ---- Headings ------------------------------------------------------ */
	& h2 {
		margin: 48px 0 14px;
		font: 700 1.45rem/1.2 var(--aeth-display);
		color: var(--aeth-navy);
		scroll-margin-top: 24px;
	}

	& > h2:first-child,
	& .jp-toc + h2 {
		margin-top: 0;
	}

	& h3 {
		margin: 32px 0 10px;
		font: 700 1.2rem/1.3 var(--aeth-display);
		color: var(--aeth-navy);
	}

	& h4 {
		margin: 28px 0 8px;
		font: 600 1rem/1.3 var(--aeth-ui);
		color: var(--aeth-navy);
	}

	/* ---- Text ---------------------------------------------------------- */
	& p,
	& li {
		font: 400 1.1rem/1.72 var(--aeth-read);
		color: var(--aeth-ink);
	}

	& p {
		max-width: 68ch;
		margin: 0 0 1em;
	}

	& strong {
		font-weight: 600;
	}

	/* ---- Lists ---------------------------------------------------------- */
	& ul,
	& ol {
		max-width: 68ch;
		margin: 0 0 1.2em;
		padding: 0 0 0 1.4em;
	}

	& li {
		margin: 0;
		padding: 3px 0 3px 4px;
	}

	& ul > li::marker {
		color: var(--aeth-link);
	}

	& ol > li::marker {
		font: 600 0.95em var(--aeth-ui);
		color: var(--aeth-link);
	}

	& li > p {
		margin: 0;
		font-size: inherit;
		line-height: inherit;
	}

	/* ---- Notes (blockquote) -------------------------------------------- */
	& blockquote {
		max-width: 68ch;
		margin: 24px 0;
		padding: 18px 22px;
		background: var(--aeth-mist);
	}

	& blockquote p {
		margin: 0 0 10px;
		font-size: 1.05rem;
	}

	& blockquote p:last-child {
		margin-bottom: 0;
	}

	/* ---- Tables --------------------------------------------------------- */
	& table {
		width: 100%;
		margin: 0 0 28px;
		border-collapse: collapse;
	}

	& th,
	& td {
		padding: 12px 16px;
		border: 1px solid var(--aeth-line);
		text-align: left;
		vertical-align: top;
		font-size: 1rem;
	}

	& th {
		background: var(--aeth-mist);
		font: 600 0.98rem/1.4 var(--aeth-ui);
		color: var(--aeth-navy);
	}

	& td p {
		margin: 0 0 6px;
		font-size: inherit;
	}

	& td > :last-child {
		margin-bottom: 0;
	}

	/* ==== Components: a plain list, table or note with ONE class ======== */
	& table[class],
	& table[class] > tbody,
	& table[class] tr,
	& table[class] td,
	& table[class] th {
		display: block;
		padding: 0;
		border: 0;
		background: none;
		text-align: left;
	}

	& table[class] {
		width: auto;
		margin: 0 0 28px;
	}

	& :is(ul, table)[class] {
		max-width: none;
	}

	& ul[class] {
		margin: 0 0 28px;
		padding: 0;
		list-style: none;
	}

	& ul[class] > li {
		padding: 0;
	}

	& :is(table, ul)[class] p {
		margin: 0 0 8px;
	}

	& table[class] td > :last-child {
		margin-bottom: 0;
	}

	/* Facts: **Title** / line break / text, as ruled rows in two columns. */
	& ul.jp-facts {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
		gap: 0 40px;
	}

	& ul.jp-facts > li {
		padding: 16px 0 18px;
		border-top: 1px solid var(--aeth-line);
		font: 400 0.98rem/1.55 var(--aeth-ui);
		color: var(--aeth-muted);
	}

	& ul.jp-facts strong {
		display: inline-block;
		margin-bottom: 4px;
		font: 700 1.1rem/1.3 var(--aeth-display);
		color: var(--aeth-navy);
	}

	/* Hero: the lead under a page's title, its links as the button pair
	   (drawn with .aeth-button in section 2). No panel: space carries it. */
	& table.jp-hero {
		margin: 0 0 44px;
	}

	& table.jp-hero p {
		font-size: 1.25rem;
		line-height: 1.6;
	}

	& table.jp-hero p:has(> a) {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		margin: 24px 0 0;
	}

	/* Checklist: title | text, as ruled rows with an empty box to tick. */
	& table.jp-checklist {
		max-width: 68ch;
	}

	& table.jp-checklist tr {
		position: relative;
		padding: 16px 0 16px 34px;
		border-top: 1px solid var(--aeth-line);
	}

	& table.jp-checklist tr:last-child {
		border-bottom: 1px solid var(--aeth-line);
	}

	& table.jp-checklist tr::before {
		content: "";
		position: absolute;
		left: 0;
		top: 20px;
		width: 14px;
		height: 14px;
		border: 1.5px solid var(--aeth-link);
		border-radius: var(--aeth-radius);
	}

	& table.jp-checklist td:first-child {
		margin-bottom: 4px;
		font: 700 1.06rem/1.35 var(--aeth-display);
		color: var(--aeth-navy);
	}

	& table.jp-checklist td:last-child :is(p, li) {
		font-size: 1.02rem;
		line-height: 1.6;
	}

	/* Chips: a short list as small outlined tags (who publishes, article types). */
	& ul.jp-chips {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	& ul.jp-chips > li {
		padding: 5px 12px;
		border: 1px solid var(--aeth-line);
		border-radius: var(--aeth-radius);
		font: 500 0.95rem/1.3 var(--aeth-ui);
		color: var(--aeth-navy);
	}

	/* Tiles: one-line items in a ruled grid (what to write to each office about). */
	& ul.jp-tiles {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
		gap: 0 32px;
	}

	& ul.jp-tiles > li {
		padding: 12px 0;
		border-top: 1px solid var(--aeth-line);
		font: 400 1rem/1.5 var(--aeth-ui);
		color: var(--aeth-ink);
	}

	/* Index: a ruled list of links, each row one target (the policies). */
	& ul.jp-index {
		max-width: 68ch;
		border-bottom: 1px solid var(--aeth-line);
	}

	& ul.jp-index > li {
		border-top: 1px solid var(--aeth-line);
	}

	& ul.jp-index a {
		display: flex;
		align-items: baseline;
		gap: 14px;
		margin: 0 -10px;
		padding: 13px 10px;
		font: 500 1.05rem/1.4 var(--aeth-ui);
		color: var(--aeth-link);
		text-decoration: none;
	}

	& ul.jp-index a:hover {
		background: var(--aeth-b2);
		color: var(--aeth-navy);
	}

	& ul.jp-index a strong {
		flex: none;
		min-width: 1.6em;
		font: 600 0.95rem/1.4 var(--aeth-ui);
		font-variant-numeric: tabular-nums;
		color: var(--aeth-muted);
	}

	/* Cards: area | *tag* | text, as ruled entries in two columns, the tag first
	   (the scope's areas). Entries, not boxes: hairlines and space. */
	& table.jp-cards > tbody {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
		gap: 0 40px;
	}

	& table.jp-cards tr {
		display: flex;
		flex-direction: column;
		padding: 16px 0 18px;
		border-top: 1px solid var(--aeth-line);
	}

	& table.jp-cards td:nth-child(2) {
		order: -1;
		margin-bottom: 4px;
		font: 500 0.875rem/1.3 var(--aeth-ui);
		color: var(--aeth-muted);
	}

	& table.jp-cards td:nth-child(2) em {
		font-style: normal;
	}

	& table.jp-cards td:first-child {
		margin-bottom: 6px;
		font: 700 1.1rem/1.3 var(--aeth-display);
		color: var(--aeth-navy);
	}

	& table.jp-cards td:last-child :is(p, li) {
		font: 400 0.98rem/1.55 var(--aeth-ui);
		color: var(--aeth-muted);
	}

	/* Panel: a heading row, then label | value rows (the language rules). */
	& table.jp-panel {
		max-width: 68ch;
	}

	& table.jp-panel th {
		padding: 0 0 10px;
		font: 700 1.1rem/1.3 var(--aeth-display);
		color: var(--aeth-navy);
	}

	& table.jp-panel tr:not(:first-child) {
		display: grid;
		grid-template-columns: 120px minmax(0, 1fr);
		gap: 16px;
		padding: 11px 0;
		border-top: 1px solid var(--aeth-line);
	}

	& table.jp-panel tr:last-child {
		border-bottom: 1px solid var(--aeth-line);
	}

	& table.jp-panel td {
		font: 400 1rem/1.5 var(--aeth-ui);
		color: var(--aeth-ink);
	}

	& table.jp-panel td:first-child {
		font-weight: 600;
		color: var(--aeth-muted);
	}

	& table.jp-panel td strong {
		color: var(--aeth-navy);
	}

	/* Box: one cell under a hairline (a contact, a file, the licence). */
	& table.jp-box {
		max-width: 68ch;
		padding-top: 18px;
		border-top: 1px solid var(--aeth-line);
	}

	& table.jp-box h3 {
		margin: 0 0 8px;
		font: 700 1.2rem/1.3 var(--aeth-display);
		color: var(--aeth-navy);
	}

	& table.jp-box h4 {
		margin: 16px 0 2px;
		font: 600 0.875rem/1.3 var(--aeth-ui);
		color: var(--aeth-muted);
	}

	& table.jp-box h4:first-child {
		margin: 0 0 6px;
	}

	& table.jp-box :is(p, li) {
		font-size: 1rem;
		line-height: 1.6;
	}

	& table.jp-box ul {
		margin: 0 0 8px;
	}

	/* In a box, a file and its download: a bar with the gold button. */
	& table.jp-box p:has(> code) {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 12px 20px;
		max-width: none;
		margin: 18px 0 0;
		padding: 12px 12px 12px 16px;
		border: 1px solid var(--aeth-line);
		background: var(--aeth-white);
	}

	& table.jp-box code {
		font: 400 0.92rem/1.4 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
		color: var(--aeth-ink);
		overflow-wrap: anywhere;
	}

	/* Alt: the second of a pair, on the mist. */
	& table.jp-alt {
		padding: 20px 24px;
		border-top: 0;
		background: var(--aeth-mist);
	}

	/* Dark: a navy block, the masthead's own colour (the main contact, a pledge). */
	& :is(table.jp-box, blockquote.jp-note).jp-dark {
		padding: 22px 26px;
		border: 0;
		background: var(--aeth-navy);
	}

	& .jp-dark :is(p, li) {
		color: var(--aeth-b2);
	}

	& :is(table, blockquote).jp-dark h3 {
		color: var(--aeth-white);
	}

	& :is(table, blockquote).jp-dark h4 {
		color: var(--aeth-b4);
	}

	& .jp-dark a,
	& .jp-dark a:focus {
		color: var(--aeth-gold);
		text-decoration-color: rgba(212, 175, 55, 0.5);
	}

	& .jp-dark a:hover {
		color: var(--aeth-gold-hi);
		text-decoration-color: var(--aeth-gold-hi);
	}

	& .jp-dark :focus-visible {
		outline-color: var(--aeth-gold);
	}

	/* People: name | profile | role | institution | address | email, as ruled
	   entries in two columns. .jp-featured: one person, larger, on the mist. */
	& table.jp-people > tbody {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
		gap: 0 40px;
	}

	& table.jp-people tr {
		display: flex;
		flex-direction: column;
		padding: 16px 0 20px;
		border-top: 1px solid var(--aeth-line);
	}

	& table.jp-people td {
		font: 400 0.95rem/1.5 var(--aeth-ui);
		color: var(--aeth-muted);
		overflow-wrap: anywhere;
	}

	& table.jp-people td:empty {
		display: none;
	}

	& table.jp-people td:first-child {
		font: 700 1.12rem/1.35 var(--aeth-display);
		color: var(--aeth-navy);
	}

	& table.jp-people td:first-child a {
		color: var(--aeth-navy);
		text-decoration-color: var(--aeth-line);
	}

	& table.jp-people td:first-child a:hover {
		text-decoration-color: var(--aeth-gold);
	}

	& table.jp-people td:first-child em {
		font-style: normal;
	}

	& table.jp-people td:nth-child(2) {
		margin-bottom: 8px;
		font-size: 0.85rem;
	}

	& table.jp-people td:nth-child(3) {
		font-weight: 600;
		color: var(--aeth-ink);
	}

	& table.jp-people td:nth-child(4) {
		color: var(--aeth-ink);
	}

	& table.jp-people.jp-featured {
		padding: 22px 26px 4px;
		background: var(--aeth-mist);
	}

	& table.jp-people.jp-featured > tbody {
		display: block;
	}

	& table.jp-people.jp-featured tr {
		padding-top: 0;
		border-top: 0;
	}

	& table.jp-people.jp-featured td:first-child {
		font-size: 1.4rem;
	}

	/* An unclassed table's badge column (PHP 500, COPE) stays on one line. */
	& table:not([class]) td:first-child:has(> strong:only-child) {
		white-space: nowrap;
	}

	/* ---- Pasted formatting: a paste from Word cannot restyle the page --- */
	& [style] {
		font-family: inherit !important;
		color: inherit !important;
		background: transparent !important;
	}

	& span[style],
	& font {
		font-size: inherit !important;
		line-height: inherit !important;
	}
}

/* The homepage's additional content: an intro line in the interface face. */
.pkp_page_index .additional_content > p {
	max-width: 68ch;
	margin: 0 0 6px;
	font: 400 1rem/1.6 var(--aeth-ui);
	color: var(--aeth-muted);
}

.pkp_page_index .additional_content > h2:not(:first-child) {
	margin-top: 48px;
}

.pkp_page_index .additional_content ul.jp-facts {
	margin-bottom: 0;
}

/* 9. Reading pages: the issue's contents, the article ====================== */

/* OJS's clearfix pseudo-elements would become grid items below. */
:is(.current_issue, .obj_issue_toc .heading, .obj_article_summary, .obj_article_details .row, .cmp_article_list > li)::before,
:is(.current_issue, .obj_issue_toc .heading, .obj_article_summary, .obj_article_details .row, .cmp_article_list > li)::after {
	content: none;
}

/* ---- Galley links: a small outlined button; the article page fills its own --- */
.obj_galley_link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border: 1.5px solid var(--aeth-navy);
	border-radius: var(--aeth-radius);
	background: transparent;
	font: 600 0.95rem/1.2 var(--aeth-ui);
	color: var(--aeth-navy);
	text-decoration: none;
	transition: background-color 150ms ease-out, color 150ms ease-out;
}

.obj_galley_link.pdf::before {
	content: "";
	margin: 0;
	font-size: inherit;
	width: 1.1em;
	height: 1.1em;
	background: currentColor;
	-webkit-mask: var(--aeth-i-doc) center / contain no-repeat;
	mask: var(--aeth-i-doc) center / contain no-repeat;
}

.obj_galley_link:focus {
	background: transparent;
	color: var(--aeth-navy);
}

.obj_galley_link:hover {
	background: var(--aeth-navy);
	color: var(--aeth-white);
}

/* ---- The homepage's current issue: the cover beside the contents ---------- */
.pkp_page_index .current_issue .current_issue_title {
	margin: 0 0 6px;
	font: 700 1.3rem/1.25 var(--aeth-display);
	color: var(--aeth-navy);
}

.obj_issue_toc .heading .cover {
	float: none;
	width: auto;
	margin: 0 0 24px;
}

.obj_issue_toc .heading .cover img {
	display: block;
	width: 100%;
	max-width: 200px;
	height: auto;
	max-height: none;
}

.obj_issue_toc .heading > :not(.cover) {
	font: 400 0.95rem/1.5 var(--aeth-ui);
	color: var(--aeth-muted);
}

.obj_issue_toc .published .label {
	font-weight: 500;
}

.obj_issue_toc .sections:not(:first-child) {
	margin-top: 26px;
}

.obj_issue_toc .galleys,
.obj_issue_toc .section {
	position: static;
	margin: 0 0 28px;
	padding: 0;
	background: none;
}

.obj_issue_toc .galleys::before,
.obj_issue_toc .section::before {
	content: none;
}

.obj_issue_toc :is(.galleys, .section) > :is(h2, h3) {
	display: block;
	position: static;
	margin: 0;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--aeth-line);
	background: none;
	font: 700 1rem/1.3 var(--aeth-display);
	color: var(--aeth-navy);
}

.obj_issue_toc .section:last-child {
	margin-bottom: 0;
}

.obj_issue_toc .articles,
.cmp_article_list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cmp_article_list > li {
	margin: 0;
	padding: 14px 0 4px;
}

.obj_article_summary > .title {
	margin: 0;
	font: 600 1.15rem/1.35 var(--aeth-read);
	color: var(--aeth-ink);
}

.obj_article_summary > .title a {
	color: var(--aeth-ink);
	text-decoration: underline;
	text-decoration-color: var(--aeth-line);
}

.obj_article_summary > .title a:hover {
	text-decoration-color: var(--aeth-gold);
}

.obj_article_summary .subtitle {
	margin: 4px 0 0;
	font-weight: 400;
	color: var(--aeth-muted);
}

.obj_article_summary .meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 8px 0 12px;
	padding: 0;
	font: 400 0.95rem/1.4 var(--aeth-ui);
	color: var(--aeth-muted);
}

.obj_article_summary :is(.authors, .pages, .published) {
	position: static;
	padding: 0;
	color: var(--aeth-muted);
}

.obj_article_summary .pages {
	flex: none;
	font-variant-numeric: tabular-nums;
}

.obj_article_summary .galleys_links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.obj_article_summary .galleys_links li {
	margin: 0;
}

.obj_article_summary .cover {
	float: none;
	width: auto;
	max-width: 200px;
	margin: 0 0 12px;
}

.pkp_page_index .current_issue > .read_more {
	margin-top: 28px;
	padding: 0;
	line-height: 1.3;
}

/* With a cover, the issue's wrappers are dissolved so the cover, the title and
   the contents share one grid; the cover spans down to a last, flexible row,
   so a cover taller than the text does not space the text out. */
@media (min-width: 761px) {
	.current_issue:has(> .obj_issue_toc > .heading > .cover) {
		display: grid;
		grid-template-columns: 200px minmax(0, 1fr);
		grid-template-rows: auto auto auto auto auto 1fr;
		column-gap: 36px;
		align-items: start;

		& > a:empty {
			position: absolute;
		}

		& > .obj_issue_toc,
		& > .obj_issue_toc > .heading {
			display: contents;
		}

		& > h2 {
			grid-column: 1 / -1;
		}

		& > :not(h2, .obj_issue_toc),
		& > .obj_issue_toc > :not(.heading),
		& > .obj_issue_toc > .heading > :not(.cover) {
			grid-column: 2;
		}

		& > .obj_issue_toc > .heading > .cover {
			grid-column: 1;
			grid-row: 2 / -1;
			margin: 0;
		}
	}
}

@media (max-width: 760px) {
	.obj_issue_toc .heading .cover img {
		max-width: 180px;
	}
}

/* ---- An issue's page --------------------------------------------------------- */
/* Like the article: the breadcrumb and the title on the mist, edge to edge,
   painted by a border image so the page keeps OJS's markup. */
.pkp_page_issue:not(.pkp_op_archive) .pkp_structure_content {
	padding-top: 0;
}

.page_issue > .cmp_breadcrumbs,
.page_issue > h1 {
	border-image: linear-gradient(var(--aeth-mist), var(--aeth-mist)) fill 0 // 0 100vmax;
}

.page_issue > .cmp_breadcrumbs {
	margin: 0;
	padding-top: 26px;
}

.page_issue > h1 {
	max-width: none;
	margin: 0 0 36px;
	padding: 20px 0 38px;
	border-image: linear-gradient(to top, var(--aeth-line) 1px, var(--aeth-mist) 1px) fill 0 // 0 100vmax;
}

.page_issue > h1 + .obj_issue_toc .heading {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px 36px;
	margin-bottom: 30px;
}

.page_issue .obj_issue_toc .heading .cover {
	width: 200px;
	margin: 0;
}

/* ---- The issue in preparation (homepage, current issue, archives) ---------- */
/* The cover is drawn: the journal's white logo, the issue's title and number on
   teal, the mockup's own cover. */
.aeth-upcoming {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 24px 36px;
	align-items: start;
	max-width: 900px;
}

.aeth-upcoming:not(:has(> .aeth-cover)) {
	grid-template-columns: minmax(0, 1fr);
}

.aeth-cover {
	display: flex;
	flex-direction: column;
	aspect-ratio: 210 / 297;
	padding: 18px 16px 16px;
	background: var(--aeth-teal);
	color: var(--aeth-white);
}

.aeth-cover::before {
	content: "";
	aspect-ratio: 1400 / 400;
	background: url("../images/aetherion-logo-white.png") center / contain no-repeat;
}

.aeth-cover p {
	margin: 0;
	color: var(--aeth-white);
}

.aeth-cover .aeth-cover_theme {
	margin: auto 0 10px;
	font: 700 0.95rem/1.3 var(--aeth-display);
}

.aeth-cover_vol {
	font: 500 0.75rem/1.3 var(--aeth-ui);
}

.aeth-upcoming_text h2 {
	margin: 0 0 10px;
	font: 700 1.45rem/1.2 var(--aeth-display);
	color: var(--aeth-navy);
}

.aeth-upcoming_issue {
	max-width: 40ch;
	margin: 0;
	font: 700 1.3rem/1.25 var(--aeth-display);
	color: var(--aeth-navy);
	text-wrap: balance;
}

.aeth-upcoming_call {
	max-width: 60ch;
	margin: 14px 0 22px;
	font: 400 1.05rem/1.6 var(--aeth-read);
	color: var(--aeth-ink);
}

.aeth-upcoming_call strong {
	font-weight: 600;
	color: var(--aeth-navy);
}

/* What is not true yet says so: a dashed tag, never a badge of status. */
.aeth-pending {
	display: inline-block;
	margin: 12px 0 0;
	padding: 3px 10px;
	border: 1px dashed var(--aeth-muted);
	border-radius: var(--aeth-radius);
	font: 500 0.85rem/1.4 var(--aeth-ui);
	color: var(--aeth-muted);
}

@media (max-width: 760px) {
	.aeth-upcoming {
		grid-template-columns: minmax(0, 1fr);
	}

	.aeth-cover {
		width: 180px;
	}
}

/* ---- The article page ------------------------------------------------------ */
/* The breadcrumb, the title and the authors sit on the mist, edge to edge,
   with a hairline under them; the reading column and the details follow. The
   mist is painted by a border image reaching out to the window's edges, so the
   article keeps OJS's own markup. */
.pkp_page_article .pkp_structure_content {
	padding-top: 0;
}

.page_article > .cmp_breadcrumbs,
.obj_article_details > :is(.page_title, .subtitle),
.obj_article_details .main_entry > .item.authors {
	border-image: linear-gradient(var(--aeth-mist), var(--aeth-mist)) fill 0 // 0 100vmax;
}

.page_article > .cmp_breadcrumbs {
	margin: 0;
	padding-top: 26px;
}

/* Padding, not margin, between the band's parts, so the mist runs unbroken. */
.obj_article_details > .page_title {
	margin: 0;
	padding-top: 20px;
}

.obj_article_details > .subtitle {
	max-width: 52ch;
	margin: 0;
	padding-top: 10px;
	font: 500 1.3rem/1.4 var(--aeth-display);
	color: var(--aeth-muted);
}

.obj_article_details .main_entry > .item.authors {
	margin: 0;
	padding: 22px 0 38px;
	border-image: linear-gradient(to top, var(--aeth-line) 1px, var(--aeth-mist) 1px) fill 0 // 0 100vmax;
}

.obj_article_details .authors {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 14px 40px;
	max-width: 900px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.obj_article_details .authors li {
	margin: 0;
	font: 400 0.95rem/1.5 var(--aeth-read);
	color: var(--aeth-muted);
}

.obj_article_details .authors .name {
	display: inline;
	font: 600 1.05rem/1.4 var(--aeth-ui);
	color: var(--aeth-ink);
}

.obj_article_details .authors .affiliation {
	display: block;
	margin-top: 2px;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--aeth-muted);
}

.obj_article_details .authors .userGroup {
	display: none;
}

.obj_article_details .authors .orcid {
	display: block;
	font: 400 0.9rem/1.5 var(--aeth-ui);
}

.obj_article_details .row {
	margin: 0;
	border: 0;
}

.obj_article_details :is(.main_entry, .entry_details) {
	float: none;
	width: auto;
	margin: 0;
	border: 0;
}

.obj_article_details .item {
	padding: 0;
}

.obj_article_details .main_entry > .item:not(.authors) {
	max-width: 70ch;
}

.obj_article_details .main_entry > .item.authors + .item,
.obj_article_details .entry_details {
	margin-top: 36px;
}

/* DOI and keywords: a label column beside the value, between hairlines. */
.obj_article_details .main_entry > .item:is(.doi, .keywords) {
	display: grid;
	grid-template-columns: 100px minmax(0, 1fr);
	gap: 16px;
	padding: 12px 0;
	border-top: 1px solid var(--aeth-line);
}

.obj_article_details .main_entry > .item:is(.doi, .keywords):not(:has(+ .item:is(.doi, .keywords))) {
	border-bottom: 1px solid var(--aeth-line);
}

.obj_article_details .main_entry .item:is(.doi, .keywords) .label {
	display: block;
	margin: 0;
	font: 600 0.9rem/1.6 var(--aeth-ui);
	color: var(--aeth-muted);
}

.obj_article_details .main_entry .item:is(.doi, .keywords) .value {
	font: 400 0.98rem/1.6 var(--aeth-ui);
	color: var(--aeth-ink);
	overflow-wrap: anywhere;
}

/* Abstract and references. */
.obj_article_details .main_entry .item:is(.abstract, .references, .author_bios, .dataAvailability, .downloads_chart) > .label {
	margin: 40px 0 14px;
	font: 700 1.45rem/1.2 var(--aeth-display);
	color: var(--aeth-navy);
}

.obj_article_details :is(.abstract, .author_bios, .dataAvailability) p {
	margin: 0 0 1em;
	font: 400 1.1rem/1.72 var(--aeth-read);
	color: var(--aeth-ink);
}

.obj_article_details .abstract strong {
	font: 600 0.95em var(--aeth-ui);
	color: var(--aeth-navy);
}

.obj_article_details .references .value p {
	margin: 0 0 0.8em;
	padding-left: 2em;
	text-indent: -2em;
	font: 400 0.98rem/1.6 var(--aeth-read);
	color: var(--aeth-ink);
	overflow-wrap: anywhere;
}

/* The details column: the cover, the PDF, then facts between hairlines. */
.obj_article_details .entry_details {
	display: flex;
	flex-direction: column;
}

.obj_article_details .entry_details > .item {
	order: 6;
	margin: 0;
	padding: 14px 0 4px;
	border: 0;
	border-top: 1px solid var(--aeth-line);
	font: 400 0.98rem/1.55 var(--aeth-ui);
	color: var(--aeth-ink);
	overflow-wrap: anywhere;
}

.obj_article_details .entry_details > .item.cover_image { order: 0; }
.obj_article_details .entry_details > .item.galleys { order: 1; }
.obj_article_details .entry_details > .item.published { order: 2; }
.obj_article_details .entry_details > .item.citation { order: 3; }
.obj_article_details .entry_details > .item.issue { order: 4; }
.obj_article_details .entry_details > .item.copyright { order: 5; }

.obj_article_details .entry_details > .item:is(.cover_image, .galleys) {
	padding: 0;
	border-top: 0;
}

.obj_article_details .entry_details .item.cover_image {
	margin: 0 0 22px;
}

.obj_article_details .entry_details .item.cover_image img {
	display: block;
	width: 200px;
	max-width: 100%;
	height: auto;
}

.obj_article_details .entry_details .item.galleys {
	margin: 0 0 18px;
}

.obj_article_details .entry_details .galleys_links {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.obj_article_details .entry_details .galleys_links li {
	margin: 0;
}

.obj_article_details .entry_details .galleys_links .obj_galley_link {
	display: flex;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 22px;
	border-color: var(--aeth-gold);
	background: var(--aeth-gold);
	font-size: 1rem;
	color: var(--aeth-navy);
}

.obj_article_details .entry_details .galleys_links .obj_galley_link:hover {
	background: var(--aeth-navy);
	border-color: var(--aeth-navy);
	color: var(--aeth-gold);
}

/* Issue and section: two facts, each under its own hairline. */
.obj_article_details .entry_details > .item:is(.issue, .published) {
	padding: 0;
	border-top: 0;
}

.obj_article_details .entry_details > .item:is(.issue, .published) > .sub_item {
	margin: 0;
	padding: 14px 0 4px;
	border-top: 1px solid var(--aeth-line);
}

.obj_article_details .entry_details .item .label {
	margin: 0 0 6px;
	font: 600 0.9rem/1.3 var(--aeth-ui);
	color: var(--aeth-muted);
}

.obj_article_details .entry_details .value,
.obj_article_details .entry_details .item p {
	margin: 0 0 10px;
	font: 400 0.98rem/1.55 var(--aeth-ui);
	color: var(--aeth-ink);
}

.obj_article_details .entry_details .item.issue .title {
	font-weight: 400;
}

.obj_article_details .copyright a[rel="license"]:has(> img) {
	display: inline-block;
	margin: 0 0 10px;
}

.obj_article_details .copyright img {
	display: block;
}

.obj_article_details .citation_display .csl-entry {
	font: 400 0.98rem/1.55 var(--aeth-ui);
	color: var(--aeth-ink);
	overflow-wrap: anywhere;
}

.obj_article_details .citation_display .citation_formats {
	margin: 8px 0 14px;
	border: 1px solid var(--aeth-field);
	border-radius: var(--aeth-radius);
	background: var(--aeth-white);
}

.obj_article_details .citation_display .citation_formats_button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	background: transparent;
	font: 500 0.95rem/1.3 var(--aeth-ui);
	color: var(--aeth-ink);
	text-align: left;
	cursor: pointer;
}

.obj_article_details .citation_display .citation_formats_button::after {
	content: "";
	position: static;
	flex: none;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--aeth-i-chev) center / contain no-repeat;
	mask: var(--aeth-i-chev) center / contain no-repeat;
	transform: none;
}

.obj_article_details .citation_display .citation_formats_button[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

.obj_article_details .citation_display .citation_formats_button:focus {
	background: transparent;
}

.obj_article_details .citation_display .citation_formats_button:focus-visible {
	outline: 3px solid var(--aeth-link);
	outline-offset: 2px;
}

.obj_article_details .citation_display .citation_formats_styles a {
	padding: 8px 10px;
	border-bottom-color: var(--aeth-line);
	font: 500 0.95rem/1.3 var(--aeth-ui);
	color: var(--aeth-ink);
	text-decoration: none;
}

.obj_article_details .citation_display .citation_formats_styles a:hover,
.obj_article_details .citation_display .citation_formats_styles a:focus {
	background: var(--aeth-mist);
	color: var(--aeth-link);
}

.obj_article_details .citation_display .citation_formats_list .label {
	padding: 10px 10px 4px;
	margin: 0;
}

/* Desktop: the reading column beside the details. The authors run the full
   width on the mist; the reading column's items follow them down the left, and
   the details hold the right from the first of them to a last, flexible row. */
@media (min-width: 992px) {
	.obj_article_details .row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 300px;
		grid-template-rows: auto repeat(9, auto) 1fr;
		column-gap: 72px;
		align-items: start;
	}

	.obj_article_details .main_entry {
		display: contents;
	}

	.obj_article_details .main_entry > .item {
		grid-column: 1;
	}

	.obj_article_details .main_entry > .item.authors {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.obj_article_details .entry_details {
		grid-column: 2;
		grid-row: 2 / -1;
	}
}

@media (max-width: 991.98px) {
	.obj_article_details .entry_details {
		padding-top: 4px;
	}
}

@media (max-width: 480px) {
	.obj_article_details .main_entry > .item:is(.doi, .keywords) {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}
}

/* 10. OJS's own pages: archives, announcements, search, forms =============== */
/* Their titles sit in the opening (section 4); what follows is OJS's markup. */

/* ---- The archive: each issue under a hairline, its cover beside its title -- */
.page_issue_archive .issues_archive {
	max-width: 900px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.page_issue_archive .issues_archive > li {
	margin: 0;
	padding: 24px 0;
	border: 0;
	border-top: 1px solid var(--aeth-line);
}

.obj_issue_summary {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	column-gap: 28px;
	align-items: start;
}

.obj_issue_summary::before,
.obj_issue_summary::after {
	content: none;
}

.obj_issue_summary:not(:has(> .cover)) {
	grid-template-columns: minmax(0, 1fr);
}

.obj_issue_summary .cover {
	grid-row: 1 / span 2;
	float: none;
	width: auto;
	margin: 0;
}

.obj_issue_summary .cover img {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
}

/* The issue's number above its title. */
.obj_issue_summary h2 {
	display: flex;
	flex-direction: column;
	margin: 0;
	font: 700 1.3rem/1.25 var(--aeth-display);
	color: var(--aeth-navy);
	text-wrap: balance;
}

.obj_issue_summary h2 .title {
	font: inherit;
	color: var(--aeth-navy);
	text-decoration: none;
}

.obj_issue_summary h2 .title:hover {
	text-decoration: underline;
	text-decoration-color: var(--aeth-gold);
}

.obj_issue_summary .series {
	order: -1;
	margin: 0 0 6px;
	font: 500 0.95rem/1.4 var(--aeth-ui);
	color: var(--aeth-muted);
}

.obj_issue_summary .description {
	max-width: 68ch;
	margin: 10px 0 0;
	font: 400 1rem/1.6 var(--aeth-read);
	color: var(--aeth-ink);
}

.obj_issue_summary .description:empty {
	display: none;
}

@media (max-width: 480px) {
	.obj_issue_summary {
		grid-template-columns: 96px minmax(0, 1fr);
		column-gap: 18px;
	}
}

/* ---- Announcements: the list, and one announcement ------------------------- */
.page_announcements .cmp_announcements {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--aeth-line);
}

.page_announcements .cmp_announcements > li {
	margin: 0;
	padding: 20px 0 6px;
	border-top: 1px solid var(--aeth-line);
}

.page_announcements .obj_announcement_summary {
	margin: 0;
	padding: 0;
}

.obj_announcement_full .date {
	margin: 0 0 24px;
	font: 500 0.9rem/1.3 var(--aeth-ui);
	color: var(--aeth-muted);
}

.obj_announcement_full .date::before {
	content: none;
}

.page_announcement .aeth-next {
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var(--aeth-line);
}

/* ---- Notices: a mist block, no edge; a form's error on its own tint -------- */
.cmp_notification {
	margin: 0 0 28px;
	padding: 16px 20px;
	border: 0;
	background: var(--aeth-mist);
	font: 400 1rem/1.6 var(--aeth-ui);
	color: var(--aeth-ink);
}

.pkp_form_error {
	margin: 0 0 24px;
	padding: 14px 18px;
	border: 0;
	background: var(--aeth-error-tint);
	font: 600 1rem/1.5 var(--aeth-ui);
	color: var(--aeth-error);
}

/* ---- Forms: login, registration, password, search -------------------------- */
.cmp_form fieldset {
	margin: 0 0 32px;
	padding: 0;
	border: 0;
}

.cmp_form legend:not(.pkp_screen_reader) {
	margin: 0 0 14px;
	padding: 0;
	font: 700 1.2rem/1.3 var(--aeth-display);
	color: var(--aeth-navy);
}

.cmp_form .fields > div {
	margin: 0 0 18px;
}

.cmp_form .label {
	display: block;
	margin: 0 0 6px;
	font: 600 0.95rem/1.3 var(--aeth-ui);
	color: var(--aeth-navy);
}

.cmp_form .required {
	margin-left: 2px;
	color: var(--aeth-error);
}

.cmp_form :is(input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="search"], select, textarea) {
	box-sizing: border-box;
	width: 100%;
	max-width: 32rem;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--aeth-field);
	border-radius: var(--aeth-radius);
	background: var(--aeth-white);
	box-shadow: none;
	font: 400 1rem/1.4 var(--aeth-ui);
	color: var(--aeth-ink);
}

.cmp_form :is(input, select, textarea):focus {
	border-color: var(--aeth-link);
	outline: 3px solid var(--aeth-link);
	outline-offset: 1px;
}

.cmp_form :is(input, select, textarea)[aria-invalid="true"] {
	border-color: var(--aeth-error);
}

/* A checkbox hangs left of its words, at the first line's height; the words
   (with any link in them) run as ordinary text. */
.cmp_form :is(.checkbox, .optin, .consent) label {
	display: block;
	position: relative;
	padding-left: 28px;
	font: 400 1rem/1.5 var(--aeth-ui);
	color: var(--aeth-ink);
}

.cmp_form :is(.checkbox, .optin, .consent) .label {
	display: inline;
	margin: 0;
	font: inherit;
	color: inherit;
}

.cmp_form :is(input[type="checkbox"], input[type="radio"]) {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--aeth-navy);
}

.cmp_form :is(.checkbox, .optin, .consent) label > :is(input[type="checkbox"], input[type="radio"]) {
	position: absolute;
	top: 3px;
	left: 0;
}

.cmp_form .buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 8px 0 0;
}

/* The parent's clearfix would become a flex item and push the buttons in. */
.cmp_form .buttons::before,
.cmp_form .buttons::after {
	content: none;
}

/* A field's own error, which the parent places under the field. */
.cmp_form .fields .error {
	font: 600 0.875rem/1.3 var(--aeth-ui);
	color: var(--aeth-error);
}

/* ---- Search: the query, the filters, the results ----------------------------- */
.page_search .search_input {
	margin: 0 0 24px;
}

/* The parent's icon font draws over the button's word; the word is enough. */
.page_search .submit button::before,
.page_search .submit button::after {
	content: none;
}

.page_search .submit button {
	padding: 12px 22px;
}

.page_search .search_input .query {
	max-width: none;
	min-height: 48px;
	font-size: 1.1rem;
}

.page_search .search_advanced {
	margin: 0 0 28px;
	padding: 0;
	border: 0;
}

.page_search .date_range {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 40px;
	margin: 0 0 18px;
}

/* The parent floats the dates and the author field side by side at half width
   each, with no gutter between them. */
.page_search .search_advanced .date_range {
	padding-right: 32px;
}

.page_search .date_range > div {
	flex: 1 1 16rem;
	min-width: 0;
}

/* Year, month and day side by side; their labels are for screen readers. */
.page_search .date_range fieldset {
	display: flex;
	gap: 8px;
	min-width: 0;
	margin: 0;
}

.page_search .date_range legend:not(.pkp_screen_reader) {
	margin: 0 0 8px;
	font: 600 0.95rem/1.3 var(--aeth-ui);
}

.page_search .date_range label {
	margin: 0 6px 0 0;
	font: 500 0.875rem/1.3 var(--aeth-ui);
	color: var(--aeth-muted);
}

.page_search .date_range select[name] {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	margin: 0;
}

.page_search .date_range select[name*="Month"] {
	flex-grow: 2;
}

.page_search .author .label {
	display: block;
}

.page_search .search_results {
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.page_search .search_results > li {
	margin: 0;
	padding: 14px 0 4px;
	border-top: 1px solid var(--aeth-line);
}

/* Below the two-column width, the authors take their own line; the pages and
   the date follow on the next, each kept whole. */
@media (max-width: 991.98px) {
	.page_search .obj_article_summary .meta {
		flex-wrap: wrap;
		gap: 4px 16px;
	}

	.page_search .obj_article_summary .meta .authors {
		flex-basis: 100%;
	}

	.page_search .obj_article_summary .meta :is(.pages, .published) {
		white-space: nowrap;
	}
}

/* ---- Pages of results: previous, the count, next ----------------------------- */
.cmp_pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin: 28px 0 0;
	font: 500 0.95rem/1.4 var(--aeth-ui);
	color: var(--aeth-muted);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
	}
}