/**
 * Klasik — classic two-column journal layout for OJS 3.5
 *
 * Child of the bundled default theme. Plain CSS, no build step.
 *
 * Reproduces, for OJS 3.5, the layout convention of Indonesian university
 * journals still on OJS 2 — measured from a reference site:
 *
 *   container      1080px, centred
 *   masthead band  coloured strip, journal title inside
 *   menu strip     same colour, 40px, items padded 13px
 *   breadcrumb     thin line under the menu
 *   content        865px main column, LEFT
 *   sidebar        205px, RIGHT, blocks 180px wide
 *   blocks         no card, no border — uppercase title, dotted rule, list
 *   type           Lato 14px body, ~25px headings
 *
 * None of the reference site's code, markup or identity assets are used —
 * only proportions and conventions. Colours come from theme options; never
 * hard-code one here.
 *
 * Structure:
 *   1  Tokens
 *   2  Base and typography
 *   3  Masthead band and menu strip
 *   4  Navigation — mobile drawer
 *   5  Page scaffold — two columns
 *   6  Breadcrumb and headings
 *   7  Homepage, issues, article summaries
 *   8  Article landing and galley pages
 *   9  Sidebar blocks
 *  10  Forms
 *  11  Tables, pagination, notices
 *  12  Footer
 *  13  Parent-theme corrections
 *  14  Print
 */

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

:root {
	/* Fallbacks only — the plugin injects the real values inline. */
	--kls-band: #b9b995;
	--kls-band-dark: #9b9b7d;
	--kls-band-emphasis: #e3e3d4;
	--kls-band-light: #c6c6a8;
	--kls-band-deep: #a0a081;
	--kls-strip-bg: #72725c;
	--kls-on-strip: #ffffff;
	--kls-strip-emphasis: #545443;
	--kls-on-band-soft: #333333;
	--kls-band-soft: #dcdcca;
	--kls-on-band: #222222;
	--kls-on-band-70: rgba(34, 34, 34, 0.70);
	--kls-on-band-25: rgba(34, 34, 34, 0.25);
	--kls-accent: #c9a227;
	--kls-accent-soft: #dcdcca;
	--kls-on-accent: #222222;

	--kls-link: #6b6b49;
	--kls-link-hover: #505036;
	--kls-link-raw: #8e8e61;
	--kls-link-tint: #f4f4ef;
	--kls-row-alt: #ebebe1;
	--kls-hover-wash: #f0f0e8;
	--kls-link-row: #696947;
	--kls-link-row-hover: #4f4f35;

	--kls-font-display: "Lato", Helvetica, Arial, sans-serif;
	--kls-font-body: "Lato", Helvetica, Arial, sans-serif;
	--kls-font-masthead: "Berkshire Swash", Georgia, serif;
	--kls-masthead-weight: 400;
	--kls-masthead-spacing: 0;
	--kls-brand-logo-display: block;
	--kls-brand-original-size: clamp(34px, 3vw, 40px);
	--kls-brand-original-size-mobile: 16px;
	--kls-brand-short-title: normal;
	--kls-brand-short-size: inherit;
	--kls-brand-short-size-mobile: inherit;
	--kls-brand-min-height: 135px;
	--kls-brand-bottom-space: 36px;
	--kls-brand-content-display: block;
	--kls-brand-wrapper-aspect: auto;
	--kls-brand-wrapper-aspect-mobile: auto;
	--kls-brand-banner-space-mobile: 0px;
	--kls-head-wrapper-padding-mobile: 0 16px;
	--kls-mobile-edge-width: calc(100% + 32px);
	--kls-mobile-edge-margin: 0 -16px;
	--kls-subtitle-size: 25px;
	--kls-subtitle-size-mobile: 13px;
	--kls-subtitle-weight: 300;
	--kls-subtitle-spacing: normal;
	--kls-subtitle-spacing-mobile: normal;
	--kls-subtitle-transform: none;
	--kls-motif-size: auto 100%;
	--kls-motif-size-mobile: auto 100%;
	--kls-motif-position: right top;
	--kls-motif-position-mobile: right top;

	--kls-ink: #222222;
	--kls-ink-2: #444444;
	--kls-ink-3: #6b6b6b;
	--kls-line: #dddddd;
	--kls-line-strong: #c4c4c4;
	--kls-surface: #ffffff;
	--kls-surface-2: #f4f4f4;
	--kls-page: #ffffff;
	--kls-heading: #000000;
	--kls-footer-bg: #070a09;
	--kls-footer-text: #c9cfcc;
	--kls-footer-link: #9acb69;
	--kls-footer-link-hover: #c8ef9f;

	--kls-err: #a3302c;

	/* Measured from the reference layout at a 1280px viewport:
	   container 1080, main 865, sidebar 205, 10px between them. */
	--kls-container: 1080px;
	--kls-sidebar: 205px;
	--kls-gap: 10px;

	--kls-header-h: 96px; /* re-measured by theme.js on load/resize */
}

/* ==========================================================================
   2. Base and typography
   ========================================================================== */

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

body {
	font-family: var(--kls-font-body);
	font-size: 14px;
	line-height: 1.6;
	color: var(--kls-ink);
	background: var(--kls-page);
	-webkit-font-smoothing: antialiased;
}

/* Guard against long labels or assets creating sideways mobile scrolling. */
@media (max-width: 991px) {
	html,
	body {
		overflow-x: clip;
	}
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--kls-font-display);
	color: var(--kls-heading);
	font-weight: 700;
	line-height: 1.3;
}

/* The parent ships `.pkp_structure_main h1 { font-family: "Noto Sans" }` and
   friends at specificity (0,1,1); a bare `h1` (0,0,1) loses to it. */
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.pkp_structure_main h4,
.pkp_structure_main h5,
.pkp_structure_main h6,
.pkp_structure_sidebar h1,
.pkp_structure_sidebar h2,
.pkp_structure_sidebar h3,
.pkp_structure_footer h1,
.pkp_structure_footer h2,
.pkp_structure_footer h3 {
	font-family: var(--kls-font-display);
	line-height: 1.3;
}

p, li {
	overflow-wrap: break-word;
}

a {
	color: var(--kls-link);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--kls-link-hover);
	text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--kls-link);
	outline-offset: 2px;
}

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

/* ==========================================================================
   3. Masthead band and menu strip
   ========================================================================== */

.pkp_structure_head {
	/* Trimmed to the container rather than run edge to edge, at the owner's
	   request — the page reads as a banner sitting on white instead of a
	   colour field. The reference site is full-bleed; this is a deliberate
	   departure.
	   The top margin matters as much as the side ones: flush against the
	   viewport the band still reads as a full-width header that merely got
	   narrower, rather than as a banner sitting on the page. */
	width: 100%;
	max-width: var(--kls-container);
	margin: 0 auto;
	/* Vertical, lighter at the top so the menu strip sits on the grounded
	   end. Both stops are derived from the band and clamped by the plugin so
	   the ink stays at 4.5:1 across the whole sweep — `background-color` is
	   the flat fallback wherever gradients are unavailable or printed. */
	background-color: var(--kls-band);
	background-image:
		var(--kls-header-artwork, var(--kls-motif, none)),
		linear-gradient(
			to bottom,
			var(--kls-band-light) 0%,
			var(--kls-band) 62%,
			var(--kls-band-deep) 100%
		);
	background-repeat: no-repeat, no-repeat;
	background-position: var(--kls-motif-position), center;
	background-size: var(--kls-motif-size), 100% 100%;
	border: 0;
	box-shadow: none;
	/* `relative` normally, `sticky` from the "header menempel" option.
	   Pinning the whole 252px band would swallow a laptop viewport, so a
	   sticky band is offset upward until only the 40px menu strip stays in
	   view. That offset needs the band's REAL height — it grows with the
	   subtitle and the ISSN line — which theme.js measures into
	   --kls-header-h. */
	position: var(--kls-head-position, relative);
	top: var(--kls-head-top, auto);
	z-index: 60;
}

/* Never sticky on a phone: the band is a third of the viewport, and a
   sticky ancestor would drag the drawer's fixed positioning with it. */
@media (max-width: 991px) {
	.pkp_structure_head {
		position: relative;
		top: auto;
		background-position: var(--kls-motif-position-mobile), center;
		background-size: var(--kls-motif-size-mobile), 100% 100%;
	}
}

.pkp_head_wrapper {
	max-width: var(--kls-container);
	margin: 0 auto;
	padding: 0;
	background: transparent;
}

/* Between the desktop breakpoint and the container width there is no room
   left over, so give the band a gutter of its own there. */
@media (min-width: 992px) and (max-width: 1103px) {
	.pkp_head_wrapper {
		padding: 0 12px;
	}
}

/* Trimming the bands turned the page into two surfaces, so they are coloured
   to say so: a tinted canvas behind everything, and a white sheet carrying the
   content between the two green bands. The outer wrapper has to be cleared to
   transparent or it would paint over the canvas.

   The 1080px band, sheet and footer all share the same width and centring, so
   they stack into a single card. */
html,
body {
	background-color: var(--kls-canvas);
}

.pkp_structure_page {
	background-color: transparent;
	/* The gap around the card is padding here, not margin on the band. A top
	   margin on the band collapses straight out through the wrapper and the
	   body, so the strip it opens up is painted by <html> rather than by the
	   canvas — the tint appeared beside the card but not above it. */
	padding-top: 14px;
	padding-bottom: 14px;
}

@media (min-width: 1104px) {
	.pkp_structure_page {
		padding-top: 22px;
		padding-bottom: 22px;
	}
}

.pkp_structure_content {
	background-color: var(--kls-surface);
}

/* Once the viewport is wide enough for real side gutters, match them with a
   little more air above so the banner is not crowded from one side only. */


/* The parent sizes header parts to its own fixed container widths and pins
   the brand block to a 40px bar — reset at EVERY width, or the 768–991px
   band keeps the parent's 728px cage. */
.pkp_site_name_wrapper,
.pkp_navigation_user_wrapper,
.pkp_navigation_search_wrapper,
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper,
.pkp_head_wrapper ul.pkp_navigation_primary,
.pkp_head_wrapper ul.pkp_navigation_user {
	width: auto;
	min-width: 0;
	max-width: none;
	float: none;
}

.pkp_site_name_wrapper {
	padding: 0 0 var(--kls-brand-bottom-space);
	position: static;
	height: auto;
	aspect-ratio: var(--kls-brand-wrapper-aspect);
	margin: 0;
}

.pkp_site_name_wrapper::before {
	content: "";
	display: var(--kls-brand-emblem-display, none);
	position: absolute;
	top: 0;
	left: 17%;
	width: 7.5%;
	margin-top: 2.2%;
	aspect-ratio: 200 / 250;
	background: url("../images/sjp-hygieia-emblem.svg") center / contain no-repeat;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
	pointer-events: none;
	z-index: 1;
}

/* --- Journal title block ------------------------------------------------ */

/* Measured band: title line 135px tall, subtitle 38px, then 39px of air
   before the 40px menu strip — 252px of masthead in total. */
.pkp_site_name {
	display: var(--kls-brand-content-display);
	background: transparent;
	position: static;
	width: auto;
	margin: 0;
	padding: 0;
	text-align: center;
}

.pkp_site_name .is_img img {
	max-height: 135px;
	width: auto;
	margin: 0 auto;
	display: block;
	padding: 12px 0;
}

.pkp_site_name .is_text {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	font-family: var(--kls-font-masthead);
	font-size: var(--kls-brand-original-size);
	line-height: 1.15;
	min-height: var(--kls-brand-min-height);
	font-weight: var(--kls-masthead-weight);
	color: var(--kls-on-band);
	text-decoration: none;
	letter-spacing: var(--kls-masthead-spacing);
	white-space: nowrap;
	/* The parent pads this link by 0.714rem, which would deepen the band. */
	padding: 0;
	margin: 0;
}

.pkp_site_name .is_text::before {
	content: "";
	display: var(--kls-brand-logo-display);
	flex: 0 0 82px;
	width: 82px;
	height: 82px;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.52);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94) url("../images/logo-mark.png") center / 88% no-repeat;
	box-shadow: 0 8px 22px rgba(0, 32, 22, 0.2);
}

.pkp_site_name .is_text::after {
	content: var(--kls-brand-short-title);
	font-size: var(--kls-brand-short-size);
	line-height: 1;
}

.pkp_site_name .is_text:hover,
.pkp_site_name .is_text:focus {
	color: var(--kls-on-band);
	text-decoration: none;
}

/* Subtitle and ISSN under the title, both content-driven. */
.pkp_site_name:has(.is_text)::after {
	content: var(--kls-subtitle, "");
	display: var(--kls-subtitle-display, block);
	/* Only the gap to the ISSN line. The space below the whole title block
	   lives on the wrapper's padding, so the band looks the same whether an
	   ISSN is set or not. */
	margin: 0 0 14px;
	font-size: var(--kls-subtitle-size);
	font-weight: var(--kls-subtitle-weight);
	line-height: 1.5;
	letter-spacing: var(--kls-subtitle-spacing);
	text-transform: var(--kls-subtitle-transform);
	color: var(--kls-on-band);
}

.pkp_site_name_wrapper::after {
	content: var(--kls-issn, "");
	display: var(--kls-issn-display, block);
	margin: 0;
	text-align: center;
	font-size: 11.5px;
	font-weight: 700;
	/* Full-strength ink, with the hierarchy carried by size and tracking
	   instead. Dimming to 70% composites to rgb(179,214,193) on the band —
	   3.66:1, below AA. The contrast budget here has no room for a tint. */
	letter-spacing: 0.12em;
	color: var(--kls-on-band);
}

/* --- User links, top-right of the band ---------------------------------- */

.pkp_navigation_user_wrapper {
	background: transparent;
}

.pkp_navigation_user.pkp_nav_list > li > a {
	font-family: var(--kls-font-body);
	font-size: 13px;
	font-weight: 700;
	color: var(--kls-on-band);
	text-decoration: none;
	padding: 6px 10px;
	display: inline-block;
}

.pkp_navigation_user.pkp_nav_list > li > a:hover,
.pkp_navigation_user.pkp_nav_list > li > a:focus {
	text-decoration: underline;
	color: var(--kls-on-band);
}

@media (min-width: 992px) {
	.pkp_head_wrapper {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"brand user"
			"nav   nav";
		align-items: center;
	}

	/* OJS nests the user links and search inside the nav element at
	   different depths; flattening the wrappers lets the real controls be
	   placed straight into this grid. */
	.pkp_head_wrapper > nav.pkp_site_nav_menu,
	.pkp_head_wrapper .pkp_navigation_primary_row,
	.pkp_head_wrapper .pkp_navigation_primary_wrapper {
		display: contents;
	}

	/* The parent floats these, gives them width:100%, and absolutely centres
	   the user links — all of which breaks the grid. */
	.pkp_head_wrapper .pkp_site_name_wrapper,
	.pkp_head_wrapper .pkp_navigation_user_wrapper,
	.pkp_head_wrapper .pkp_navigation_search_wrapper,
	.pkp_head_wrapper ul.pkp_navigation_primary {
		position: static;
		top: auto;
		left: auto;
		right: auto;
		transform: none;
		float: none;
		width: auto;
		min-width: 0;
		max-width: none;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
	}

	.pkp_head_wrapper .pkp_navigation_user_wrapper ul.pkp_navigation_user {
		width: auto;
		min-width: 0;
		max-width: none;
		margin: 0;
		padding: 0;
		border: 0;
		float: none;
		display: flex;
		align-items: center;
		gap: 2px;
	}

	.pkp_head_wrapper .pkp_navigation_user_wrapper ul.pkp_navigation_user > li {
		float: none;
		display: block;
	}

	/* The brand spans both columns so the title stays optically centred in
	   the band; the user links overlay its top-right corner. */
	.pkp_site_name_wrapper {
		grid-area: brand;
		grid-column: 1 / -1;
	}

	.pkp_navigation_user_wrapper {
		grid-area: user;
		grid-row: 1;
		grid-column: 2;
		justify-self: end;
		align-self: start;
		padding-top: 10px;
		z-index: 2;
	}

	.pkp_head_wrapper ul.pkp_navigation_primary { grid-area: nav; }

	.pkp_navigation_search_wrapper {
		grid-area: nav;
		justify-self: end;
		align-self: center;
		z-index: 1;
	}

	.pkp_head_wrapper > nav.pkp_site_nav_menu > a:empty {
		grid-area: brand;
		width: 0;
		height: 0;
		overflow: hidden;
	}
}

/* --- Menu strip --------------------------------------------------------- */

.pkp_site_nav_menu,
.pkp_navigation_primary_row {
	background: transparent;
}

@media (min-width: 992px) {
	/* The menu bar. A hard colour stop rather than a background on the <ul>,
	   so the bar runs the full width of the viewport like the band above it
	   instead of stopping at the 1080px container. */
	.pkp_structure_head {
		/* Motif first (topmost layer), gradient underneath. The motif is
		   sized to stop at the menu bar and anchored right, the way its own
		   `xMaxYMid slice` expects. */
		background-image:
			var(--kls-header-artwork, var(--kls-motif, none)),
			linear-gradient(
				to bottom,
				var(--kls-band-light) 0%,
				var(--kls-band) 62%,
				var(--kls-band-deep) calc(100% - 40px),
				var(--kls-strip-bg) calc(100% - 40px),
				var(--kls-strip-bg) 100%
			);
		background-repeat: no-repeat, no-repeat;
		background-position: right top, center;
		background-size: auto calc(100% - 40px), 100% 100%;
	}

	.pkp_head_wrapper ul.pkp_navigation_primary {
		display: flex;
		align-items: stretch;
		justify-content: center; /* the reference centres the strip */
		align-items: center;     /* stretch would deepen the strip past 40px */
		flex-wrap: wrap;
		gap: 0;
		min-height: 40px;
		padding: 0;
		margin: 0;
	}

	.pkp_head_wrapper ul.pkp_navigation_primary > li {
		float: none;
		display: flex;
		align-items: center;
		margin: 0;
		padding: 0;
	}

	/* Divider between menu items.
	 *
	 * It lives on the <li>, not inside the <a>, so the item's hover fill
	 * stops at the label and never swallows the bar. `li + li` puts one in
	 * every gap and none before Home or after the last item.
	 *
	 * Opacity rather than a fourth on-band token: the bar should read as
	 * punctuation, not as a label competing with the menu. */
	.pkp_head_wrapper ul.pkp_navigation_primary > li + li::before {
		content: "|";
		align-self: center;
		color: var(--kls-on-strip);
		opacity: 0.45;
		font-size: 13px;
		font-weight: 400;
		line-height: 1;
		pointer-events: none;
	}

	/* The strip wraps at narrow desktop widths; a bar that lands first on a
	   wrapped line reads as a stray character. */
	.pkp_head_wrapper ul.pkp_navigation_primary > li:first-child::before {
		content: none;
	}

	ul.pkp_navigation_primary > li > a {
		display: flex;
		align-items: center;
		font-family: var(--kls-font-body);
		font-size: 14px;
		font-weight: 400;
		color: var(--kls-on-strip);
		text-decoration: none;
		padding: 0 13px;
		/* The parent gives these `margin: 0.357rem 0.5rem 0 -0.5rem`, whose
		   5px top pushes the strip to 45px and breaks the measured band. */
		margin: 0;
		min-height: 40px;
		transition: background-color 0.15s ease;
	}

	ul.pkp_navigation_primary > li > a:hover,
	ul.pkp_navigation_primary > li > a:focus {
		/* Measured against the bar, not the band — see --kls-strip-emphasis. */
		background: var(--kls-strip-emphasis);
		color: var(--kls-on-strip);
		text-decoration: none;
	}

	ul.pkp_navigation_primary > li.current > a,
	ul.pkp_navigation_primary > li.active > a,
	ul.pkp_navigation_primary > li[aria-current] > a,
	/* The Home item is a custom remote-URL entry OJS never marks .current. */
	body.pkp_page_index ul.pkp_navigation_primary > li:first-child > a {
		background: var(--kls-strip-emphasis);
		color: var(--kls-on-strip);
		box-shadow: inset 0 -3px 0 var(--kls-accent);
	}

	/* Dropdowns. The parent parks the closed submenu far off-screen and
	   recalls it only on :hover with a hard-coded translate3d, so keyboard
	   focus lands at -9400px and the open panel sits adrift. */
	ul.pkp_navigation_primary li ul {
		background: var(--kls-surface);
		border: 1px solid var(--kls-line-strong);
		border-radius: 0;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
		padding: 4px 0;
		min-width: 220px;
	}

	ul.pkp_navigation_primary > li:hover > ul,
	ul.pkp_navigation_primary > li:focus-within > ul {
		display: block;
		visibility: visible;
		opacity: 1;
		top: 100%;
		left: 0;
		right: auto;
		transform: none;
	}

	ul.pkp_navigation_primary li ul > li > a {
		display: block;
		padding: 8px 14px;
		font-size: 13.5px;
		font-weight: 400;
		color: var(--kls-ink-2);
		text-decoration: none;
	}

	ul.pkp_navigation_primary li ul > li > a:hover,
	ul.pkp_navigation_primary li ul > li > a:focus {
		background: var(--kls-link-tint);
		color: var(--kls-link);
	}

	/* The reference strip carries a plain "Search" menu item and no search
	   control of its own; the primary menu now has that item, so OJS's extra
	   search affordance would be a second, differently-styled entry. Hidden
	   rather than removed, so it comes back if the menu item is ever dropped. */
	.pkp_navigation_search_wrapper {
		display: none;
	}
}

/* The reference menu carries no icons — keep the strip plain. */
@media (min-width: 992px) {
	ul.pkp_navigation_primary > li > a::before {
		content: none;
	}

	ul.pkp_navigation_primary > li > a[aria-haspopup="true"]::after {
		font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 6 Free";
		font-weight: 900;
		content: "\f107";
		font-size: 11px;
		margin-left: 6px;
		opacity: 0.7;
	}
}

/* ==========================================================================
   4. Navigation — mobile dropdown
   ========================================================================== */

.pkp_site_nav_toggle {
	position: absolute;
	top: 14px;
	right: 16px;
	left: auto;
	transform: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--kls-on-band-25);
	border-radius: 3px;
	background: transparent;
	box-shadow: none;
	z-index: 70;
	cursor: pointer;
}

.pkp_site_nav_toggle > span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 14px;
	border-bottom: 2px solid var(--kls-on-band);
	text-indent: -9999px;
	overflow: hidden;
}

.pkp_site_nav_toggle > span::before,
.pkp_site_nav_toggle > span::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background: var(--kls-on-band);
}

.pkp_site_nav_toggle > span::before { top: 0; }
.pkp_site_nav_toggle > span::after { top: 6px; }

/* The parent's `.pkp_site_nav_toggle:focus { outline: 1px dotted #fff }` is
   (0,2,0) and beats a generic button:focus-visible; match it. */
.pkp_site_nav_toggle:focus,
.pkp_site_nav_toggle:focus-visible {
	outline: 2px solid var(--kls-on-band);
	outline-offset: 2px;
	box-shadow: none;
}

@media (max-width: 991px) {
	.pkp_site_name_wrapper {
		position: relative;
		display: flex;
		flex-direction: column;
		aspect-ratio: var(--kls-brand-wrapper-aspect-mobile);
		padding: var(--kls-brand-banner-space-mobile) 0 0;
	}

	.pkp_head_wrapper {
		padding: var(--kls-head-wrapper-padding-mobile);
	}

	.pkp_site_name {
		order: 1;
		width: 100%;
		padding: 20px 12px 12px;
		text-align: center;
	}

	.pkp_site_name .is_text {
		justify-content: center;
		gap: 8px;
		font-size: var(--kls-brand-original-size-mobile);
		line-height: 1.25;
		min-height: 48px;
		white-space: normal;
	}

	.pkp_site_name .is_text::after {
		font-size: var(--kls-brand-short-size-mobile);
	}

	.pkp_site_name .is_text::before {
		flex-basis: 48px;
		width: 48px;
		height: 48px;
	}

	.pkp_site_name:has(.is_text)::after {
		max-width: 100%;
		padding-left: 4px;
		padding-right: 4px;
		font-size: var(--kls-subtitle-size-mobile);
		letter-spacing: var(--kls-subtitle-spacing-mobile);
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.pkp_site_name_wrapper::after {
		order: 2;
		padding: 0 12px 14px;
		text-align: center;
		margin: 0;
		font-size: 11px;
	}

	/* A full-width control below the identity leaves the title truly centred
	   and keeps the menu trigger immediately before the page content. */
	.pkp_site_nav_toggle {
		order: 3;
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		transform: none;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 9px;
		width: var(--kls-mobile-edge-width);
		height: 44px;
		margin: var(--kls-mobile-edge-margin);
		padding: 0 16px;
		border: 0;
		border-top: 2px solid var(--kls-accent);
		border-radius: 0;
		background: var(--kls-strip-bg);
		color: var(--kls-on-strip);
		font-family: var(--kls-font-body);
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.pkp_site_nav_toggle::after {
		content: "Menu";
	}

	.pkp_site_nav_toggle[aria-expanded="true"]::after {
		content: "Close Menu";
	}

	.pkp_site_nav_toggle > span {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		flex: 0 0 20px;
	}

	.pkp_site_nav_toggle:hover,
	.pkp_site_nav_toggle:focus-visible {
		background: var(--kls-band-dark);
		color: var(--kls-on-strip);
		text-decoration: none;
	}

	/* The navigation expands below the journal identity and remains in the
	   page flow, keeping the title and hamburger visible. */
	.pkp_structure_head nav.pkp_site_nav_menu {
		display: block;
		position: static;
		width: auto;
		max-width: none;
		height: auto;
		max-height: 0;
		margin: var(--kls-mobile-edge-margin);
		padding: 0 16px;
		box-sizing: border-box;
		background: var(--kls-strip-bg);
		border-top: 0 solid rgba(255, 255, 255, 0.2);
		box-shadow: none;
		overflow: hidden;
		z-index: auto;
		transform: none;
		opacity: 0;
		visibility: hidden;
		transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.2s ease, visibility 0s linear 0.3s, border-width 0.3s ease;
	}

	.pkp_structure_head nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen {
		max-height: 1100px;
		padding-top: 10px;
		padding-bottom: 14px;
		border-top-width: 1px;
		opacity: 1;
		visibility: visible;
		transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.2s ease, visibility 0s linear 0s, border-width 0.3s ease;
	}

	/* Older cached drawer chrome must never cover the inline menu. */
	.kls-nav-backdrop,
	.kls-nav-close {
		display: none !important;
	}

	.pkp_structure_head nav.pkp_site_nav_menu ul {
		list-style: none;
		margin: 0;
		padding: 0;
		float: none;
		width: auto;
	}

	.pkp_structure_head nav.pkp_site_nav_menu li {
		float: none;
		display: block;
		width: auto;
	}

	.pkp_structure_head nav.pkp_site_nav_menu .pkp_navigation_primary_row,
	.pkp_structure_head nav.pkp_site_nav_menu .pkp_navigation_primary_wrapper {
		width: auto;
		min-width: 0;
		max-width: none;
		margin: 0;
		padding: 0;
	}

	.pkp_structure_head nav.pkp_site_nav_menu ul.pkp_navigation_primary > li > a {
		display: block;
		padding: 10px 8px;
		min-height: 42px;
		font-size: 14.5px;
		font-weight: 600;
		color: var(--kls-on-strip);
		text-decoration: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	}

	.pkp_structure_head nav.pkp_site_nav_menu ul.pkp_navigation_primary > li > a:hover,
	.pkp_structure_head nav.pkp_site_nav_menu ul.pkp_navigation_primary > li > a:focus {
		background: rgba(255, 255, 255, 0.1);
		color: var(--kls-on-strip);
	}

	.pkp_structure_head nav.pkp_site_nav_menu ul.pkp_navigation_primary > li.current > a,
	.pkp_structure_head nav.pkp_site_nav_menu ul.pkp_navigation_primary > li.active > a,
	body.pkp_page_index .pkp_structure_head nav.pkp_site_nav_menu ul.pkp_navigation_primary > li:first-child > a {
		background: var(--kls-strip-emphasis);
		box-shadow: inset 3px 0 0 var(--kls-accent);
	}

	.pkp_structure_head nav.pkp_site_nav_menu ul.pkp_navigation_primary li ul {
		margin: 0 0 0 14px;
		padding-left: 10px;
		border-left: 2px solid rgba(255, 255, 255, 0.24);
		box-shadow: none;
		background: none;
	}

	.pkp_structure_head nav.pkp_site_nav_menu ul.pkp_navigation_primary li ul > li > a {
		display: block;
		padding: 10px;
		min-height: 42px;
		font-size: 14px;
		font-weight: 400;
		color: var(--kls-on-strip);
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	}

	.pkp_structure_head nav.pkp_site_nav_menu .pkp_navigation_search_wrapper {
		margin-top: 16px;
		padding-top: 16px;
		border-top: 1px solid rgba(255, 255, 255, 0.2);
	}

	.pkp_structure_head nav.pkp_site_nav_menu .pkp_search {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 46px;
		padding: 12px 14px;
		background: rgba(255, 255, 255, 0.1);
		border: 1px solid rgba(255, 255, 255, 0.28);
		color: var(--kls-on-strip);
		font-size: 14.5px;
		text-decoration: none;
	}

	.pkp_structure_head nav.pkp_site_nav_menu .pkp_navigation_user_wrapper {
		margin-top: 16px;
		padding-top: 16px;
		border-top: 1px solid rgba(255, 255, 255, 0.2);
	}

	.pkp_structure_head nav.pkp_site_nav_menu ul.pkp_navigation_user {
		display: grid;
		gap: 8px;
	}

	.pkp_structure_head nav.pkp_site_nav_menu ul.pkp_navigation_user > li > a {
		display: block;
		min-height: 46px;
		padding: 13px 14px;
		text-align: left;
		font-size: 14.5px;
		font-weight: 700;
		text-decoration: none;
		border: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.16);
		color: var(--kls-on-strip);
		background: transparent;
	}

	.pkp_structure_head nav.pkp_site_nav_menu ul.pkp_navigation_user > li > a[href*="/register"] {
		background: rgba(255, 255, 255, 0.1);
		border-color: transparent;
		color: var(--kls-on-band);
	}
}

@media (min-width: 992px) {
	.pkp_site_nav_toggle,
	.kls-nav-backdrop,
	.kls-nav-close {
		display: none !important;
	}
}

/* ==========================================================================
   5. Page scaffold — two columns, sidebar RIGHT
   ========================================================================== */

.pkp_structure_page {
	max-width: none;
	/* Transparent, not white: the tinted canvas lives on <body> and this
	   wrapper spans the whole viewport, so painting it would hide the canvas
	   entirely. (It did — this rule sits later in the file than the canvas
	   block and was quietly winning.) */
	background: transparent;
}

.pkp_structure_content {
	/* The parent sets an explicit width (1160px), which beats max-width. */
	width: 100%;
	max-width: var(--kls-container);
	margin: 0 auto;
	/* No outer gutter at desktop: the reference pads inside each column
	   instead, which is what makes main measure 865 and the sidebar 205. */
	padding: 0 0 40px;
	display: block;
	min-width: 0;
}

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

	/* OJS emits the sidebar after main; both are placed explicitly so source
	   order does not decide the layout. The sidebar sits RIGHT, as in the
	   reference. */
	.pkp_structure_content.has_sidebar .pkp_structure_main {
		grid-column: 1;
	}

	.pkp_structure_content.has_sidebar .pkp_structure_sidebar {
		grid-column: 2;
	}
}

/* Flat content column — no card, matching the reference. */
.pkp_structure_main {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 7px 12px 0;
	min-width: 0;
	width: auto;
	float: none;
}

/* The parent draws two 1px #ddd column rules down every page with these. */
.pkp_structure_main::before,
.pkp_structure_main::after {
	content: none;
}

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

.pkp_structure_sidebar {
	width: auto;
	float: none;
	min-width: 0;
	padding: 12px;
}

@media (max-width: 991px) {
	.pkp_structure_content {
		padding: 0 4px 36px;
	}

	.pkp_structure_sidebar {
		margin-top: 30px;
		padding-top: 24px;
		border-top: 2px solid var(--kls-line);
	}
}

/* ==========================================================================
   6. Breadcrumb and headings
   ========================================================================== */

.cmp_breadcrumbs {
	display: block;
	width: auto;
	font-size: 12.5px;
	color: var(--kls-ink-3);
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid var(--kls-line);
}

.cmp_breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	align-items: center;
}

.cmp_breadcrumbs a {
	color: var(--kls-link);
	text-decoration: none;
}

.cmp_breadcrumbs a:hover {
	text-decoration: underline;
}

.cmp_breadcrumbs .current {
	color: var(--kls-ink-2);
}

/* Page title: 28px, regular weight, left — the reference sets its headings
   in the body face at a light weight rather than bolding them. */
.page > h1,
.page .main_entry > h1,
.pkp_page_index > h1,
h1.page_title {
	font-size: 28px;
	font-weight: 400;
	line-height: 1.5;
	color: #000000;
	margin: 0 0 14px;
	padding: 14px 0 0;
	border: 0;
}

.page > h1::after,
.page .main_entry > h1::after,
.pkp_page_index > h1::after,
h1.page_title::after {
	content: none;
}

/* ==========================================================================
   7. Homepage, issues, article summaries
   ========================================================================== */

.homepage_about,
.additional_content {
	font-size: 14px;
	line-height: 1.7;
	color: var(--kls-ink-2);
	margin: 18px 0 24px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

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

/* Second-level headings in the content column — "About the Journal",
   "Announcements", "Current Issue". Measured: 25.2px, regular, centred. */
.homepage_about h2,
.pkp_page_index .current_issue > h2,
.page_index_journal .cmp_announcements > h2,
.page_index_journal .cmp_announcements > h3 {
	font-family: var(--kls-font-display);
	font-size: 25px;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	color: var(--kls-heading);
	margin: 0 0 6px;
	padding: 19px 0 0;
	border: 0;
	position: static;
	width: auto;
	height: auto;
	clip: auto;
	overflow: visible;
	white-space: normal;
}

.homepage_about p {
	margin: 0 0 12px;
	max-width: none;
}

/* Description and homepage image sit side by side, both floated — the
   description left at about two thirds, the image right at its measured
   252px. Announcements below clear them. */
@media (min-width: 768px) {
	.page_index_journal .homepage_about {
		float: left;
		width: 68%;
		margin: 0;
		padding-top: 0;
	}

	/* Align the About heading with the top edge of the journal cover. */
	.page_index_journal .homepage_about h2 {
		margin-top: 0;
		padding-top: 0;
	}

	.page_index_journal .homepage_image {
		float: right;
		width: 252px;
		max-width: 40%;
		margin: 0 0 25px 12px;
	}

	.page_index_journal .cmp_announcements,
	.page_index_journal .current_issue,
	.page_index_journal .additional_content {
		clear: both;
	}
}

/* The parent bleeds this box past the column with negative side margins,
   which shows up below the float breakpoint as an image wider than its
   own gutter. */
.page_index_journal .homepage_image {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

.pkp_page_index .homepage_image img {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
}

@media (max-width: 767px) {
	.page_index_journal .homepage_image {
		max-width: 300px;
		margin: 0 auto 20px;
	}
}

/* Section headings and issue titles */
/* Issue identification line ("Vol 1, No 1 (2026)") and the archive's issue
   headings: same 25.2px regular, centred treatment as the h2s above. */
.current_issue_title,
.obj_issue_toc > h2,
.issues h2 {
	font-family: var(--kls-font-display);
	font-size: 25px;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	color: #000000;
	margin: 0 0 6px;
	padding: 19px 0 0;
	border: 0;
	display: block;
}

.current_issue_title::before,
.issues h2::before {
	content: none;
}

/* OJS emits section headings as h3 on the homepage and h2 on the issue
   page — match both. Measured at 21px regular, left. */
.sections .section > h2,
.sections .section > h3 {
	font-family: var(--kls-font-display);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: #000000;
	margin: 16px 0 5px;
	padding: 0;
	border: 0;
	display: block;
	/* The parent nudges these headings with `position: relative; left: -15px`
	   to line up with an indent this theme does not use. */
	position: static;
	left: auto;
}

.pkp_structure_main .sections {
	margin-top: 16px;
}

.sections .section > h2::before,
.sections .section > h3::before {
	content: none;
}

/* Issue heading: cover floats left, text wraps beside it. */
.obj_issue_toc .heading {
	display: block;
	margin-bottom: 18px;
}

@media (min-width: 700px) {
	.obj_issue_toc .heading .cover {
		float: left;
		width: 180px;
		margin: 0 22px 14px 0;
	}

	.obj_issue_toc .heading::after {
		content: "";
		display: table;
		clear: both;
	}
}

@media (max-width: 699px) {
	.obj_issue_toc .heading .cover {
		float: none;
		width: 150px;
		margin: 0 0 16px;
	}
}

.obj_issue_toc .heading .description {
	font-size: 14px;
	line-height: 1.7;
	color: var(--kls-ink-2);
	margin-bottom: 8px;
}

.obj_issue_toc .heading .published {
	font-size: 12.5px;
	color: var(--kls-ink-3);
}

.obj_issue_toc .cover img,
.issue-cover img,
.obj_issue_summary .cover img {
	border: 1px solid var(--kls-line-strong);
	display: block;
	width: 100%;
	height: auto;
	/* The parent caps these at max-height:250px, shrinking a tall cover. */
	max-height: none;
	box-shadow: none;
}

.obj_issue_summary .cover {
	width: 110px;
	max-width: 100%;
	margin: 0 0 12px;
	float: none;
}

@media (min-width: 700px) {
	.obj_issue_summary .cover {
		float: left;
		margin: 0 18px 12px 0;
	}

	.obj_issue_summary::after {
		content: "";
		display: table;
		clear: both;
	}
}

.obj_issue_summary {
	padding: 14px 0;
	border-bottom: 1px dotted var(--kls-line-strong);
}

.obj_issue_summary .title {
	font-size: 16px;
	font-weight: 700;
}

.obj_issue_summary .title a {
	color: var(--kls-link);
}

/* --- Article rows: plain, dotted separators ----------------------------- */

/* Table-of-contents rows.
 *
 * Measured from the reference, which builds each row as a three-column table:
 * an empty cover cell, a 673px title/authors cell, and a 168px galley cell on
 * the right, with the whole <tr> tinted and the tint alternating row to row.
 * OJS 3.5 emits a flat <div> instead, so the columns are rebuilt with grid and
 * the stripe is driven off the wrapping <li>.
 *
 * The reference alternates a neutral grey with a pale blue. The grey is kept;
 * the blue is replaced by a wash derived from the band colour, so the stripe
 * follows the journal's own palette (and keeps following it if the owner
 * changes the band from the panel).
 */
.obj_article_summary {
	position: static;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 168px;
	align-items: start;
	padding: 5px 0;
	margin: 0;
	/* The tint carries the row separation, so the dotted rule goes. */
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transform: none;
	background-color: var(--kls-surface-2);
	transition: background-color 0.16s ease;
}

.pkp_structure_main li:nth-child(even) > .obj_article_summary {
	background-color: var(--kls-row-alt);
}

.obj_article_summary:hover,
.obj_article_summary:focus-within {
	transform: none;
	box-shadow: none;
	background-color: var(--kls-hover-wash);
}

/* The stripe rule above is (0,3,1) and a bare `.obj_article_summary:hover`
   is only (0,2,0), so without this the even rows never showed a hover state
   at all — the zebra simply outranked it. */
.pkp_structure_main li:nth-child(even) > .obj_article_summary:hover,
.pkp_structure_main li:nth-child(even) > .obj_article_summary:focus-within {
	background-color: var(--kls-hover-wash);
}

.obj_article_summary::before {
	content: none;
}

/* Cell padding matches the reference's `5px 10px`. */
.obj_article_summary > .title {
	grid-column: 1;
	padding: 5px 10px;
}

.obj_article_summary .meta {
	grid-column: 1;
	padding: 0 10px 5px;
}

/* The galley cell spans the row and sits in the right-hand column, the way
   the reference's third <td> does. */
.obj_article_summary .galleys_links {
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: start;
	padding: 5px 10px;
}

/* Below the reference's own breakpoint the 168px column has nowhere to go. */
@media (max-width: 700px) {
	.obj_article_summary {
		grid-template-columns: minmax(0, 1fr);
	}

	.obj_article_summary .galleys_links {
		grid-column: 1;
		grid-row: auto;
		padding: 0 10px 6px;
	}
}

.obj_article_summary > .title {
	font-family: var(--kls-font-display);
	font-size: 14px;
	line-height: 1.5;
	font-weight: 700;
	margin: 0;
	border-bottom: none;
	letter-spacing: 0;
}

.obj_article_summary > .title a {
	color: var(--kls-link-row);
	text-decoration: none;
}

.obj_article_summary > .title a:hover,
.obj_article_summary > .title a:focus {
	color: var(--kls-link-row-hover);
	text-decoration: underline;
}

.obj_article_summary .subtitle {
	display: block;
	font-weight: 400;
	color: var(--kls-ink-2);
	font-size: 14px;
}

.obj_article_summary .meta {
	position: static;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.6;
	color: var(--kls-ink-3);
}

.obj_article_summary .authors {
	position: relative;
	font-size: 14px;
	font-style: italic;
	line-height: 1.6;
	color: var(--kls-ink);
	margin: 4px 0 0;
	/* The reference reserves 30px here for its author icon. Same budget,
	   drawn as a glyph rather than a copied image asset. */
	padding: 0 0 4px 30px;
}

.obj_article_summary .authors::before {
	font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 6 Free";
	font-weight: 900;
	font-style: normal;
	content: "\f0c0";
	position: absolute;
	left: 6px;
	top: 3px;
	font-size: 13px;
	color: var(--kls-link-row);
}

.obj_article_summary .published,
.obj_article_summary .pages {
	position: relative;
	display: inline-block;
	/* One step darker than the sidebar's muted grey — the lighter grey lands
	   under 4.5:1 on the khaki stripe. */
	color: var(--kls-ink-2);
	margin-right: 16px;
	padding-left: 30px;
	line-height: 1.6;
}

.obj_article_summary .published::before,
.obj_article_summary .pages::before {
	font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 6 Free";
	font-weight: 900;
	font-style: normal;
	position: absolute;
	left: 6px;
	top: 1px;
	font-size: 12px;
	color: var(--kls-link-row);
}

/* Page range, and the publication date the homepage listing adds. */
.obj_article_summary .pages::before { content: "\f0f6"; }
.obj_article_summary .published::before { content: "\f133"; }

/* A DOI, when the article has one. Nothing here invents a value — the rule
   only styles what OJS actually renders. */
.obj_article_summary .doi {
	position: relative;
	display: block;
	padding-left: 30px;
	font-size: 13px;
	font-style: italic;
	line-height: 1.6;
	word-break: break-all;
}

.obj_article_summary .doi::before {
	font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 6 Free";
	font-weight: 900;
	font-style: normal;
	content: "\f0c1";
	position: absolute;
	left: 6px;
	top: 2px;
	font-size: 12px;
	color: var(--kls-link-row);
}

/* Galley links stack in the right-hand cell, as the reference's do. */
.obj_article_summary .galleys_links {
	margin: 0;
	list-style: none;
	display: block;
}

.obj_article_summary .galleys_links li {
	display: block;
	margin: 0 0 4px;
}

.obj_galley_link,
.obj_article_summary .galleys_links a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--kls-link-row);
	font-family: var(--kls-font-body);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: none;
	transition: color 0.16s ease;
}

/* The parent draws a background image here; this replaces it with a glyph in
   the theme's own colour rather than borrowing the reference's icon file. */
.obj_galley_link::before,
.obj_article_summary .galleys_links a::before {
	font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f016";
	font-size: 15px;
	line-height: 1;
	color: var(--kls-link-row);
	transition: color 0.16s ease;
}

.obj_galley_link.pdf::before,
.obj_article_summary .galleys_links a.pdf::before { content: "\f1c1"; }

.obj_galley_link.html::before,
.obj_article_summary .galleys_links a.html::before { content: "\f13b"; }

.obj_galley_link:hover::before,
.obj_galley_link:focus::before,
.obj_article_summary .galleys_links a:hover::before,
.obj_article_summary .galleys_links a:focus::before {
	color: var(--kls-link-row-hover);
}

.obj_galley_link:hover,
.obj_galley_link:focus,
.obj_article_summary .galleys_links a:hover,
.obj_article_summary .galleys_links a:focus {
	background: none;
	color: var(--kls-link-row-hover);
	text-decoration: underline;
}

/* The parent bleeds this section 30px past the content column on each side. */
.pkp_structure_main .cmp_announcements {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	border: 0;
}

/* Announcements. OJS emits <article class="obj_announcement_summary"> with
   the heading as an h3 (h2 on the announcements page), so both are matched. */
.obj_announcement_summary {
	padding: 5px 0 12px;
	border-bottom: 1px dotted var(--kls-line-strong);
}

.obj_announcement_summary:last-child {
	border-bottom: none;
}

.obj_announcement_summary .title,
.obj_announcement_summary > h2,
.obj_announcement_summary h3,
.obj_announcement_summary_details > h2,
.obj_announcement_summary_details > h3 {
	font-family: var(--kls-font-display);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	text-align: left;
	color: #000000;
	margin: 0 0 2px;
	padding: 0;
	border: 0;
}

.obj_announcement_summary .summary {
	font-size: 14px;
	line-height: 1.6;
	color: var(--kls-ink-2);
}

.obj_announcement_summary .summary p {
	margin: 0 0 6px;
}

.cmp_announcements > .more,
.cmp_announcements .more a {
	font-size: 13px;
	color: var(--kls-link);
	text-decoration: none;
}

.cmp_announcements .more a:hover,
.cmp_announcements .more a:focus {
	text-decoration: underline;
}

.obj_announcement_summary .title a,
.obj_announcement_summary h3 a,
.obj_announcement_summary h2 a {
	color: var(--kls-link);
	text-decoration: none;
}

.obj_announcement_summary .date {
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kls-ink-3);
}

/* ==========================================================================
   8. Article landing and galley pages
   ========================================================================== */

.obj_article_details .page_title {
	font-size: 22px;
	line-height: 1.3;
	margin-bottom: 10px;
	color: #000000;
}

.obj_article_details .subtitle {
	font-family: var(--kls-font-body);
	font-size: 16px;
	font-weight: 400;
	color: var(--kls-ink-2);
	margin-bottom: 14px;
	display: block;
}

/* The parent bleeds this row 30px past the column on each side. */
.obj_article_details .row {
	margin: 24px 0 0;
	padding: 0;
}

@media (min-width: 768px) {
	.obj_article_details .row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 240px;
		gap: 26px;
		align-items: start;
	}

	/* Placed explicitly, not by source order: the parent gives .entry_details
	   an `order` so its flex layout can float the details up on mobile, and
	   `order` applies to grid items too — auto-placement would put the
	   abstract in the narrow track. */
	.obj_article_details .main_entry {
		grid-column: 1;
		order: 0;
	}

	.obj_article_details .entry_details {
		grid-column: 2;
		order: 0;
	}

	.obj_article_details .main_entry,
	.obj_article_details .entry_details {
		float: none;
		width: auto;
		min-width: 0;
		margin-left: 0;
		margin-right: 0;
	}
}

.obj_article_details .authors {
	margin: 0 0 16px;
	padding: 10px 0;
	list-style: none;
}

.obj_article_details ul.authors {
	border-top: 1px dotted var(--kls-line-strong);
	border-bottom: 1px dotted var(--kls-line-strong);
}

.obj_article_details .authors .name {
	font-weight: 700;
	color: var(--kls-ink);
}

.obj_article_details .authors .affiliation,
.obj_article_details .authors .orcid {
	display: block;
	font-size: 13px;
	color: var(--kls-ink-3);
}

.obj_article_details .abstract {
	font-size: 14px;
	line-height: 1.75;
	color: var(--kls-ink-2);
	margin-bottom: 20px;
	/* The parent pads the abstract 2.143rem all round. */
	padding: 0;
	background: none;
	border: 0;
}

.obj_article_details .abstract h2,
.obj_article_details .main_entry h2,
.obj_article_details .entry_details h2 {
	font-family: var(--kls-font-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: #000000;
	margin: 0 0 8px;
	padding-bottom: 5px;
	border-bottom: 1px dotted var(--kls-line-strong);
	display: block;
}

.obj_article_details .abstract h2::before,
.obj_article_details .entry_details h2::before {
	content: none;
}

.obj_article_details .entry_details {
	/* The parent bleeds this box 20px past the column on each side. The grid
	   rule below zeroes it too, but only from 768px up — without this the
	   phone layout spills. */
	margin-left: 0;
	margin-right: 0;
	background: var(--kls-surface-2);
	border: 1px solid var(--kls-line);
	border-radius: 0;
	padding: 14px;
	box-shadow: none;
}

.obj_article_details .entry_details > div {
	padding: 8px 0;
	margin: 0;
	border-bottom: 1px dotted var(--kls-line-strong);
	font-size: 13.5px;
}

/* The article cover renders at its natural size here and can run to several
   hundred pixels; the details column is 240px wide. */
.obj_article_details .entry_details .cover_image img {
	display: block;
	width: 100%;
	max-width: 100%;
	max-height: none;
	height: auto;
	border: 1px solid var(--kls-line-strong);
}

.obj_article_details .entry_details > div:last-child {
	border-bottom: none;
}

.obj_article_details .item.doi .value,
.obj_article_details .doi_link {
	font-size: 13px;
	word-break: break-all;
}

.obj_article_details .download a {
	display: inline-block;
	min-height: 0;
	padding: 8px 16px;
	background: var(--kls-band);
	border: 1px solid var(--kls-band-dark);
	border-radius: 0;
	color: var(--kls-on-band);
	font-weight: 700;
	font-size: 13.5px;
	text-decoration: none;
	box-shadow: none;
}

.obj_article_details .download a:hover,
.obj_article_details .download a:focus {
	background: var(--kls-band-dark);
	color: var(--kls-on-band);
}

/* --- Galley (PDF reader) page ------------------------------------------
   This page shares body.pkp_page_article.pkp_op_view with the article
   LANDING page, so the body class cannot tell them apart. The reader is a
   bare document — header.header_view + div.galley_view > iframe, with no
   .pkp_structure_main at all — so reader-only rules are scoped with
   :has(.galley_view).

   The three controls are anchors carrying the classes themselves; the
   parent absolutely positions .return and .download as small white squares. */

.header_view {
	background-color: var(--kls-band);
	background-image: linear-gradient(
		to bottom,
		var(--kls-band-light) 0%,
		var(--kls-band-deep) 100%
	);
	border: 0;
	color: var(--kls-on-band);
	padding: 8px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 14px;
	position: relative;
	z-index: 2;
}

.header_view a {
	color: var(--kls-on-band);
	text-decoration: none;
}

.header_view a:focus-visible {
	outline: 2px solid var(--kls-on-band);
	outline-offset: 2px;
}

.header_view a.return,
.header_view a.download {
	white-space: nowrap;
}

.header_view a.return {
	position: static;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	height: auto;
	min-height: 38px;
	padding: 7px 13px;
	background: transparent;
	border: 1px solid var(--kls-on-band-25);
	border-radius: 0;
	color: var(--kls-on-band);
	font-weight: 700;
	text-indent: 0;
	overflow: visible;
}

.header_view a.return:hover,
.header_view a.return:focus {
	background: var(--kls-band-emphasis);
}

/* The parent draws this control's arrow as a background image and puts its
   only text in a screen-reader span. This theme paints no such background,
   so without these two rules the button renders as an empty 40px box. */
.header_view a.return::before {
	font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 6 Free";
	font-weight: 900;
	content: "053";
	font-size: 12px;
	line-height: 1;
}

.header_view a.return > .pkp_screen_reader {
	/* The parent parks screen-reader text at left:-2000px with
	   `position: absolute !important`, so nothing but !important brings it
	   back into the flow. */
	position: static !important;
	left: auto;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	clip: auto;
	clip-path: none;
	overflow: visible;
	white-space: nowrap;
	font-size: 13.5px;
	font-weight: 700;
}

/* Below this width the title needs the room more than the label does. */
@media (max-width: 700px) {
	.header_view a.return > .pkp_screen_reader {
		position: absolute !important;
		left: -2000px;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		white-space: nowrap;
	}
}

.header_view a.title {
	flex: 1 1 240px;
	min-width: 0;
	font-family: var(--kls-font-display);
	font-size: 14.5px;
	font-weight: 700;
	color: var(--kls-on-band);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.header_view a.download {
	position: static;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	width: auto;
	height: auto;
	min-height: 40px;
	padding: 9px 18px;
	margin-left: auto;
	background: var(--kls-surface);
	border: 1px solid var(--kls-band-dark);
	border-radius: 0;
	color: var(--kls-link);
	font-weight: 700;
}

.header_view a.download:hover,
.header_view a.download:focus {
	background: var(--kls-surface-2);
	color: var(--kls-link-hover);
}

/* The parent pins the viewer with `position: absolute; inset: 0`, covering
   the header. A flex column lets it take the remaining height instead; the
   iframe gets flex:1 because a percentage height would collapse to its
   inline min-height. */
body:has(.galley_view) {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	background: var(--kls-band);
}

body:has(.galley_view) .header_view {
	flex: 0 0 auto;
}

body:has(.galley_view) .galley_view {
	position: static;
	inset: auto;
	flex: 1 1 auto;
	display: flex;
	min-height: 0;
	height: auto;
	background: var(--kls-surface-2);
	overflow: hidden;
}

body:has(.galley_view) .galley_view iframe {
	display: block;
	flex: 1 1 auto;
	width: 100%;
	height: auto;
	min-height: 0;
	border: 0;
}

@media (max-width: 700px) {
	.header_view a.title {
		flex-basis: 100%;
		order: 3;
		font-size: 13.5px;
	}
}

/* ==========================================================================
   9. Sidebar blocks — plain, uppercase titles, dotted rules
   ========================================================================== */

/* Measured: 180px wide, no card, no border, 12px of padding below the
   content and 12px of margin below that. */
/* Boxed blocks.
 *
 * The reference layout leaves these completely plain — no card, no border.
 * The journal owner asked for real boxes and a hover response, so this is a
 * deliberate departure from it, kept in the same register: a hairline frame,
 * a header strip washed in the band colour, square corners, no drop shadow.
 *
 * Width budget: the sidebar column is 205px with 12px of padding, so a block
 * is 181px. The frame spends 2px on borders and 18px on padding, leaving
 * 161px of measure — enough for the longest label in the menu block
 * ("Publication Frequency" sets to about 128px at 13px Lato).
 */
.pkp_block {
	background: var(--kls-surface);
	border: 1px solid var(--kls-line-strong);
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin: 0 0 14px;
	/* Clips the header strip's corners to the frame. */
	overflow: hidden;
	font-size: 14px;
	line-height: 1.5;
	transition: border-color 0.18s ease;
}

.pkp_block:hover {
	border-color: var(--kls-band-dark);
}

.pkp_block .title,
.pkp_block h2.title {
	display: block;
	position: relative;
	margin: 0;
	padding: 7px 9px;
	background: var(--kls-band);
	border: 0;
	border-bottom: 3px solid var(--kls-accent);
	font-family: var(--kls-font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #ffffff;
	text-align: center;
	min-height: 0;
	transition: background-color 0.18s ease;
}

.pkp_block:hover .title,
.pkp_block:hover h2.title {
	background: var(--kls-band-dark);
	color: #ffffff;
}

/* Collapsed on a phone the body is gone, so the header's own bottom rule
   would sit right on top of the frame's — one line, not two. */
.kls-block--collapsed .title,
.kls-block--collapsed h2.title {
	border-bottom: 0;
}

.pkp_block .title::before,
.pkp_block h2.title::before {
	content: none;
}

.kls-block-body {
	padding: 8px 9px;
	font-size: 14px;
	line-height: 1.5;
}

/* theme.js wraps everything below the title into .kls-block-body; this is
   the fallback for anything that escapes it, so it still sits inside the
   card's gutter rather than against the frame. */
.pkp_block > :not(.title):not(.kls-block-body) {
	padding-left: 9px;
	padding-right: 9px;
}

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

.pkp_block li {
	padding: 3px 0;
	border-bottom: 0;
}

.pkp_block a {
	color: var(--kls-link);
	text-decoration: none;
}

.pkp_block a:hover,
.pkp_block a:focus {
	color: var(--kls-link-hover);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Block widgets — the custom blocks carry `.st-*` classes in their saved
   HTML. Restated here in this theme's plain idiom.
   -------------------------------------------------------------------------- */

.pkp_block .st-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pkp_block .st-links li {
	padding: 0;
	border-bottom: 0;
}

/* Link rows.
 *
 * Negative side margins pull each row out to the card's inner edges so the
 * hover fill reaches the frame instead of stopping short inside the body
 * padding; the padding is added back on the same axis, so nothing moves.
 */
.pkp_block .st-links a {
	display: block;
	position: relative;
	margin: 0 -9px;
	padding: 5px 9px 5px 21px;
	font-size: 13px;
	color: var(--kls-link);
	text-decoration: none;
	background-color: transparent;
	transition: background-color 0.16s ease, color 0.16s ease;
}

/* The guillemet marker. It shifts on hover — `transform` rather than `left`
   so it never triggers layout. */
.pkp_block .st-links a::before {
	content: "»";
	position: absolute;
	left: 9px;
	color: var(--kls-ink-3);
	transition: transform 0.16s ease, color 0.16s ease;
}

.pkp_block .st-document-card {
	display: grid;
	gap: 12px;
	justify-items: center;
	padding: 14px 10px 0;
	text-decoration: none;
}

.pkp_block .st-document-icon {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	background: var(--kls-surface-2);
	border: 1px solid var(--kls-line);
	border-radius: 6px;
	color: var(--kls-link);
}

.pkp_block .st-document-icon::before {
	content: "\f1c2";
	font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 6 Free";
	font-size: 38px;
	font-weight: 900;
	line-height: 1;
}

.pkp_block .st-document-download {
	display: block;
	width: 100%;
	padding: 10px 8px;
	background: var(--kls-band);
	border: 1px solid var(--kls-band-dark);
	color: var(--kls-on-band);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
}

.pkp_block .st-document-card:hover,
.pkp_block .st-document-card:focus {
	text-decoration: none;
}

.pkp_block .st-document-card:hover .st-document-download,
.pkp_block .st-document-card:focus .st-document-download {
	background: var(--kls-band-dark);
}

.pkp_block .st-card-note {
	margin: 12px 10px 14px;
	color: var(--kls-ink-3);
	font-size: 11px;
	line-height: 1.45;
	text-align: center;
}

/* The accent rail. Grows from the vertical centre outward, which reads as a
   deliberate reveal rather than a bar sliding in from nowhere. */
.pkp_block .st-links a::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--kls-accent);
	transform: scaleY(0);
	transform-origin: center;
	transition: transform 0.16s ease;
}

.pkp_block .st-links a:hover,
.pkp_block .st-links a:focus {
	background-color: var(--kls-hover-wash);
	color: var(--kls-link-hover);
	text-decoration: none;
}

.pkp_block .st-links a:hover::before,
.pkp_block .st-links a:focus::before {
	transform: translateX(3px);
	color: var(--kls-link-hover);
}

.pkp_block .st-links a:hover::after,
.pkp_block .st-links a:focus::after {
	transform: scaleY(1);
}

/* Labelled placeholder standing in for a logo the journal does not own. */
.pkp_block .st-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 6px 4px;
	background: var(--kls-surface-2);
	border: 1px dashed var(--kls-line-strong);
	color: var(--kls-ink-3);
	font-size: 10px;
	line-height: 1.25;
	transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.pkp_block .st-grid:hover .st-slot,
.pkp_block .st-slot:hover {
	border-color: var(--kls-band-dark);
	background: var(--kls-link-tint);
	color: var(--kls-ink-2);
}

.pkp_block .st-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	margin-bottom: 8px;
}

/* Separate logo links supplied by the journal owner. A two-column grid keeps
   the narrow sidebar compact while giving every tool its own click target. */
.pkp_block .st-tools-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 7px;
}

.pkp_block .st-tool-link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 66px;
	padding: 6px;
	box-sizing: border-box;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid var(--kls-line);
	text-decoration: none;
	transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.pkp_block .st-tool-link img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 52px;
	object-fit: contain;
}

.pkp_block .st-tool-link:hover,
.pkp_block .st-tool-link:focus-visible {
	border-color: var(--kls-band-dark);
	background: var(--kls-link-tint);
	transform: translateY(-1px);
}

.pkp_block .st-tool-link:focus-visible {
	outline: 2px solid var(--kls-link);
	outline-offset: 2px;
}

/* Indexing services use landscape marks that become illegible in the
   writing-tools two-column grid. Stack them as compact full-width rows. */
.pkp_block .st-index-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 7px;
}

.pkp_block .st-index-link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 7px 8px;
	box-sizing: border-box;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid var(--kls-line);
	text-decoration: none;
	transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.pkp_block .st-index-link img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 44px;
	object-fit: contain;
}

/* The supplied GARUDA artwork is a square canvas around a landscape mark.
   Crop that empty canvas at display time so the wordmark stays legible. */
.pkp_block .st-index-link img.st-index-logo--garuda {
	width: 100%;
	height: 44px;
	max-height: none;
	object-fit: cover;
	object-position: center;
}

.pkp_block .st-index-link:hover,
.pkp_block .st-index-link:focus-visible {
	border-color: var(--kls-band-dark);
	background: var(--kls-link-tint);
	transform: translateY(-1px);
}

.pkp_block .st-index-link:focus-visible {
	outline: 2px solid var(--kls-link);
	outline-offset: 2px;
}

.pkp_block .st-visitor-counter,
.pkp_block .st-visitor-counter img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* A single wide slot, the shape the reference uses for template/tool links. */
.pkp_block .st-slot-wide {
	display: block;
	width: 100%;
	padding: 26px 8px;
	margin-bottom: 8px;
	background: var(--kls-surface-2);
	border: 1px dashed var(--kls-line-strong);
	text-align: center;
	color: var(--kls-ink-3);
	font-size: 11px;
	line-height: 1.4;
	transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.pkp_block .st-slot-wide:hover,
.pkp_block .st-slot-wide:focus {
	border-style: solid;
	border-color: var(--kls-band-dark);
	background: var(--kls-link-tint);
	color: var(--kls-link-hover);
	text-decoration: none;
}

.pkp_block .st-more {
	margin: 6px 0 0;
	font-size: 12.5px;
}

.pkp_block .st-accred {
	display: block;
	padding: 10px;
	background: var(--kls-surface-2);
	border: 1px dashed var(--kls-line-strong);
	text-align: center;
}

.pkp_block .st-accred-rank {
	display: inline-block;
	font-family: var(--kls-font-display);
	font-size: 17px;
	font-weight: 900;
	color: var(--kls-on-band);
	background: var(--kls-band);
	padding: 5px 16px;
	margin-bottom: 6px;
}

.pkp_block .st-accred-note {
	display: block;
	font-size: 11px;
	line-height: 1.4;
	color: var(--kls-ink-3);
}

.pkp_block .st-issn {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pkp_block .st-issn li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 3px 0;
	border-bottom: 0;
}

.pkp_block .st-issn span {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--kls-ink-3);
}

.pkp_block .st-issn b {
	font-size: 13px;
	color: var(--kls-ink);
}

.pkp_block .st-people {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.pkp_block .st-people li {
	padding: 5px 0;
	border-bottom: 1px dotted var(--kls-line);
}

.pkp_block .st-people li:last-child {
	border-bottom: none;
}

.pkp_block .st-people b {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--kls-ink);
}

.pkp_block .st-people span {
	font-size: 11.5px;
	color: var(--kls-ink-3);
}

.pkp_block .st-stat {
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pkp_block .st-stat li {
	flex: 1;
	text-align: center;
	padding: 8px 4px;
	background: var(--kls-surface-2);
	border: 1px solid var(--kls-line);
	transition: border-color 0.16s ease, background-color 0.16s ease;
}

.pkp_block .st-stat:hover li {
	border-color: var(--kls-band-dark);
	background: var(--kls-link-tint);
}

.pkp_block .st-stat b {
	display: block;
	font-family: var(--kls-font-display);
	font-size: 17px;
	font-weight: 900;
	line-height: 1.15;
	color: var(--kls-link);
}

.pkp_block .st-stat span {
	font-size: 10.5px;
	color: var(--kls-ink-3);
}

/* Keyword cloud: mixed sizes, inline — the OJS 2 convention. */
.pkp_block .st-tags {
	display: block;
	line-height: 1.9;
}

.pkp_block .st-tags a {
	display: inline-block;
	padding: 1px 4px;
	background: transparent;
	border: 0;
	border-radius: 2px;
	color: var(--kls-link);
	text-decoration: none;
	transition: background-color 0.16s ease, color 0.16s ease;
}

/* Padding and radius are on the resting state too, so hovering only changes
   colour — the cloud never reflows under the pointer. */
.pkp_block .st-tags a:hover,
.pkp_block .st-tags a:focus {
	background: var(--kls-band-soft);
	color: var(--kls-link-hover);
	text-decoration: none;
}

/* Search form in the Journal Content block.
 *
 * This is a real GET form against OJS's search endpoint, not decoration. It
 * never had styles of its own, so the input fell back to the browser's
 * default intrinsic width (178px) and was clipped by the card frame. Stacked
 * layout, because 161px of measure cannot hold a field and a button side by
 * side.
 */
.pkp_block .st-search {
	margin: 0 0 10px;
}

.pkp_block .st-search label {
	display: block;
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kls-ink-3);
}

.pkp_block .st-search input[type="search"] {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-height: 34px;
	margin: 0 0 6px;
	padding: 6px 8px;
	font-family: var(--kls-font-body);
	/* 16px keeps iOS from zooming the page when the field takes focus. */
	font-size: 16px;
	color: var(--kls-ink);
	background: var(--kls-surface);
	border: 1px solid var(--kls-line-strong);
	border-radius: 0;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.pkp_block .st-search input[type="search"]:focus {
	outline: none;
	border-color: var(--kls-band-dark);
	box-shadow: 0 0 0 2px var(--kls-link-tint);
}

.pkp_block .st-search button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 32px;
	padding: 7px 10px;
	font-family: var(--kls-font-body);
	font-size: 13px;
	font-weight: 700;
	color: var(--kls-on-band-soft);
	background: var(--kls-band-soft);
	border: 1px solid var(--kls-line-strong);
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.pkp_block .st-search button:hover,
.pkp_block .st-search button:focus {
	background: var(--kls-band);
	border-color: var(--kls-band-dark);
	/* The fill becomes the band on hover, so the ink has to follow it. */
	color: var(--kls-on-band);
}

/* "Browse" — the sub-heading above the second link list. */
.pkp_block .st-sub {
	margin: 10px 0 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kls-ink-3);
}

.pkp_block .st-badge {
	display: inline-block;
	margin-top: 6px;
	padding: 4px 10px;
	background: var(--kls-surface-2);
	border: 1px solid var(--kls-line-strong);
	border-radius: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kls-ink-2);
}

.pkp_block .st-badge::before {
	content: none;
}

/* Accordion control, added by theme.js — mobile only. */
.kls-block-toggle {
	display: none;
	margin-left: auto;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
}

.kls-block-toggle-icon {
	display: block;
	width: 9px;
	height: 9px;
	margin: 0 auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.2s ease;
}

/* The collapse is scoped to the breakpoint that shows the control; unscoped,
   a block folded on a phone stays folded on desktop with the toggle hidden
   and no way to reopen it. */
@media (max-width: 991px) {
	.kls-block--collapsed .kls-block-body {
		display: none;
	}

	/* `h2.title` must be carried here too: the base rule in this section
	   matches `.pkp_block h2.title` at (0,2,1), which outranks a bare
	   `.pkp_block .title` — a media query adds no specificity of its own. */
	.pkp_block .title,
	.pkp_block h2.title {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		/* Equal side space keeps the title optically centred while the right
		   side still reserves room for the collapse chevron. */
		padding: 7px 46px;
	}

	.kls-block-toggle {
		display: block;
		position: absolute;
		/* Stretched 1px past the bottom so the tap target also covers the
		   header strip's rule; `inset: 0` stops at the padding box and would
		   leave a 43px target. */
		inset: 0 0 -1px;
		width: 100%;
		height: auto;
		margin: 0;
	}

	.kls-block-toggle .kls-block-toggle-icon {
		position: absolute;
		top: 50%;
		right: 16px;
		margin: 0;
		transform-origin: center;
		transform: translateY(-50%) rotate(45deg);
	}

	.kls-block--collapsed .kls-block-toggle-icon {
		transform: translateY(-25%) rotate(-135deg);
	}
}

/* ==========================================================================
   10. Forms
   ========================================================================== */

.cmp_form fieldset,
.pkp_form fieldset {
	border: 0;
	margin: 0 0 18px;
	padding: 0;
}

.cmp_form legend,
.pkp_form legend {
	font-family: var(--kls-font-display);
	font-size: 17px;
	font-weight: 700;
	color: #000000;
	margin-bottom: 10px;
}

.cmp_form label,
.pkp_form label {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--kls-ink);
	margin-bottom: 4px;
}

.cmp_form input[type="text"],
.cmp_form input[type="email"],
.cmp_form input[type="password"],
.cmp_form input[type="url"],
.cmp_form input[type="search"],
.cmp_form input[type="number"],
.cmp_form select,
.cmp_form textarea,
.pkp_form input[type="text"],
.pkp_form input[type="email"],
.pkp_form input[type="password"],
.pkp_form select,
.pkp_form textarea,
#search input[type="text"],
input.search_query {
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	padding: 9px 11px;
	font-family: var(--kls-font-body);
	font-size: 16px; /* >=16px stops iOS zooming on focus */
	color: var(--kls-ink);
	background: var(--kls-surface);
	border: 1px solid var(--kls-line-strong);
	border-radius: 0;
	box-shadow: none;
}

.cmp_form textarea,
.pkp_form textarea {
	min-height: 120px;
	line-height: 1.6;
}

.cmp_form input:focus,
.cmp_form select:focus,
.cmp_form textarea:focus,
.pkp_form input:focus,
.pkp_form select:focus,
.pkp_form textarea:focus {
	border-color: var(--kls-link);
	box-shadow: 0 0 0 2px var(--kls-link-tint);
	outline: none;
}

@media (min-width: 700px) {
	.cmp_form input[type="text"],
	.cmp_form input[type="email"],
	.cmp_form input[type="password"],
	.cmp_form select {
		max-width: 30rem;
	}

	.cmp_form textarea {
		max-width: 44rem;
	}
}

.cmp_form .description,
.pkp_form .description {
	font-size: 12.5px;
	color: var(--kls-ink-3);
	margin-top: 4px;
}

.cmp_form .error,
.pkp_form .error,
.pkp_form_error {
	color: var(--kls-err);
	font-size: 12.5px;
}

.cmp_form .optin label,
.cmp_form .consent label,
.cmp_form .checkbox label,
.cmp_form label input[type="checkbox"] + span {
	font-size: 13.5px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--kls-ink-2);
	line-height: 1.55;
}

/* Buttons: flat, squared, band-coloured. */
.cmp_button,
.pkp_button,
button.submitFormButton,
input[type="submit"],
.cmp_form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 10px 20px;
	font-family: var(--kls-font-body);
	font-size: 14px;
	font-weight: 700;
	color: var(--kls-on-band);
	background: var(--kls-band);
	border: 1px solid var(--kls-band-dark);
	border-radius: 0;
	cursor: pointer;
	text-decoration: none;
	box-shadow: none;
	line-height: 1.2;
	text-shadow: none;
}

.cmp_button:hover,
.cmp_button:focus,
.pkp_button:hover,
.pkp_button:focus,
button.submitFormButton:hover,
input[type="submit"]:hover {
	background: var(--kls-band-dark);
	color: var(--kls-on-band);
	box-shadow: none;
}

.cmp_button_secondary,
.pkp_button_secondary,
.cmp_form .cancel {
	background: var(--kls-surface);
	border-color: var(--kls-line-strong);
	color: var(--kls-ink);
}

.cmp_form .buttons a,
.cmp_form .buttons .cancel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	font-family: var(--kls-font-body);
	font-size: 14px;
	font-weight: 700;
	color: var(--kls-ink);
	background: var(--kls-surface);
	border: 1px solid var(--kls-line-strong);
	border-radius: 0;
	text-decoration: none;
}

.cmp_form .buttons,
.pkp_form .buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

@media (min-width: 600px) {
	.pkp_page_search .search_input {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 10px;
		align-items: end;
	}
}

.page_search .submit button::after,
.cmp_form button[type="submit"]::after {
	content: none;
}

/* ==========================================================================
   11. Tables, pagination, notices
   ========================================================================== */

.pkp_structure_main table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
	margin-bottom: 16px;
}

.pkp_structure_main table th,
.pkp_structure_main table td {
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px dotted var(--kls-line-strong);
	vertical-align: top;
}

.pkp_structure_main table th {
	font-family: var(--kls-font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: #000000;
	background: var(--kls-surface-2);
}

.kls-scroll-x,
.pkp_structure_main .table_wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.cmp_pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px dotted var(--kls-line-strong);
	font-size: 13px;
	color: var(--kls-ink-3);
}

.cmp_pagination a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 8px 13px;
	border: 1px solid var(--kls-line-strong);
	border-radius: 0;
	color: var(--kls-link);
	text-decoration: none;
}

.cmp_pagination a:hover,
.cmp_pagination a:focus {
	background: var(--kls-surface-2);
	color: var(--kls-link-hover);
}

.pkp_notification,
.cmp_notification {
	padding: 12px 14px;
	border: 1px solid var(--kls-line-strong);
	border-left: 3px solid var(--kls-band);
	border-radius: 0;
	background: var(--kls-surface-2);
	font-size: 13.5px;
	margin-bottom: 14px;
	box-shadow: none;
}

/* ==========================================================================
   12. Footer
   ========================================================================== */

/* Compact dark institutional footer: identity, publisher, and contact. */
.pkp_structure_footer_wrapper {
	/* Trimmed to match the masthead: a banner header above a full-bleed
	   footer reads as an accident. */
	width: 100%;
	max-width: var(--kls-container);
	margin-left: auto;
	margin-right: auto;
	/* Vertical, lighter at the top so the menu strip sits on the grounded
	   end. Both stops are derived from the band and clamped by the plugin so
	   the ink stays at 4.5:1 across the whole sweep — `background-color` is
	   the flat fallback wherever gradients are unavailable or printed. */
	background: var(--kls-footer-bg);
	color: var(--kls-footer-text);
	border-top: 4px solid var(--kls-accent);
	/* Butts the white sheet above it — a gap here would show canvas through
	   the middle of the card. The sheet's own bottom padding does the
	   spacing. */
	margin-top: 0;
	margin-bottom: 0;
	box-shadow: none;
}

.pkp_structure_footer {
	width: 100%;
	max-width: var(--kls-container);
	margin: 0 auto;
	padding: 0 30px;
	text-align: left;
}

.pkp_footer_content {
	font-size: 14px;
	line-height: 1.55;
	/* The parent pads this 2.143rem top and bottom. */
	padding: 0;
	color: var(--kls-footer-text);
}

.pkp_footer_content .st-footer,
.pkp_footer_content .kls-footer {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px 44px;
	padding: 28px 0 20px;
	align-items: start;
}

@media (min-width: 700px) {
	.pkp_footer_content .st-footer,
	.pkp_footer_content .kls-footer {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.pkp_footer_content .st-footer,
	.pkp_footer_content .kls-footer {
		grid-template-columns: 1.05fr 1.45fr 1fr;
	}
}

.pkp_footer_content .kls-footer-identity {
	display: flex;
	align-items: center;
	gap: 14px;
}

.pkp_footer_content .kls-footer-logo {
	display: block;
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	padding: 4px;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.pkp_footer_content .kls-footer-logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* The SJP mark is supplied as a square identity lockup, so it gets a compact
   white card instead of being forced into the circular emblem treatment. */
.pkp_footer_content .kls-footer-logo--sjp {
	flex-basis: 88px;
	width: 88px;
	height: 88px;
	padding: 4px;
	border-radius: 10px;
	overflow: hidden;
}

.pkp_footer_content .kls-footer-identity strong,
.pkp_footer_content .kls-footer-identity span {
	display: block;
}

.pkp_footer_content .kls-footer-identity strong {
	font-family: var(--kls-font-display);
	font-size: 17px;
	line-height: 1.35;
	font-weight: 700;
	color: #ffffff;
}

.pkp_footer_content .kls-footer-identity span {
	margin-top: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kls-footer-link);
}

.pkp_footer_content h4,
.pkp_structure_footer h4 {
	font-family: var(--kls-font-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: none;
	color: #ffffff;
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	position: static;
}

.pkp_footer_content h4::after,
.pkp_structure_footer h4::after {
	content: none;
}

.pkp_footer_content p {
	margin: 0 0 6px;
}

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

.pkp_footer_content li {
	padding: 0;
}

.pkp_footer_content a {
	color: var(--kls-footer-link);
	text-decoration: none;
	border: 0;
	transition: color 0.16s ease;
}

.pkp_footer_content a:hover,
.pkp_footer_content a:focus {
	color: var(--kls-footer-link-hover);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Plain link lists get the same guillemet-and-slide as the sidebar, so the
   two lists read as one family. Lists that carry their own icons (.st-ico)
   are excluded — they already have a marker. */
.pkp_footer_content li:not(.st-ico) > a {
	display: inline-block;
	position: relative;
	padding: 3px 0 3px 14px;
}

.pkp_footer_content li:not(.st-ico) > a::before {
	content: "»";
	position: absolute;
	left: 0;
	color: var(--kls-on-band-70);
	transition: transform 0.16s ease, color 0.16s ease;
}

.pkp_footer_content li:not(.st-ico) > a:hover::before,
.pkp_footer_content li:not(.st-ico) > a:focus::before {
	transform: translateX(3px);
	color: var(--kls-on-band);
}

.pkp_footer_content li.st-ico {
	position: relative;
	padding: 3px 0 3px 22px;
}

.pkp_footer_content li.st-ico::before {
	font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 7px;
	font-size: 13px;
	color: var(--kls-on-band-70);
}

.pkp_footer_content li.st-phone::before { content: "\f095"; }
.pkp_footer_content li.st-mail::before { content: "\f0e0"; }
.pkp_footer_content li.st-web::before { content: "\f0ac"; }
.pkp_footer_content li.st-map::before { content: "\f041"; }

.pkp_footer_content .st-badge {
	display: inline-block;
	margin: 4px 6px 0 0;
	padding: 5px 11px;
	background: transparent;
	border: 1px solid var(--kls-on-band-25);
	border-radius: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kls-on-band);
}

/* ISSN pair in the contact column: muted label, emphatic value. */
.pkp_footer_content .kls-footer-contact > p > span {
	font-weight: 700;
	color: #ffffff;
}

.pkp_footer_content .kls-footer-issn {
	margin-top: 7px;
	font-size: 13px;
	line-height: 1.6;
	color: #aeb6b2;
}

.pkp_footer_content .kls-footer-issn span {
	display: inline-block;
	min-width: 52px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #ffffff;
}

.pkp_footer_content .kls-footer-issn b {
	color: var(--kls-on-band);
}

.pkp_footer_content .st-badge::before {
	content: none;
}

.pkp_brand_footer {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 0 14px;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	text-align: left;
}

.pkp_brand_footer::before {
	content: var(--kls-copyright, "");
	display: var(--kls-copyright-display, inline);
	margin-right: auto;
	font-size: 12px;
	line-height: 1.5;
	color: #9da6a1;
}

.pkp_brand_footer a {
	display: inline-block;
	line-height: 0;
}

.pkp_brand_footer img {
	display: block;
	height: 44px;
	max-height: none;
	width: auto;
	opacity: 0.9;
	filter: invert(1);
	transition: opacity 0.16s ease;
}

.pkp_brand_footer a:hover img,
.pkp_brand_footer a:focus img {
	opacity: 1;
}

@media (max-width: 991px) {
	.pkp_structure_footer {
		padding: 0 22px;
	}
}

@media (max-width: 600px) {
	.pkp_footer_content .kls-footer {
		gap: 0;
		padding: 24px 0 18px;
	}

	.pkp_footer_content .kls-footer-publisher,
	.pkp_footer_content .kls-footer-contact {
		margin-top: 18px;
		padding-top: 18px;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	.pkp_brand_footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.pkp_brand_footer::before {
		margin-right: 0;
	}
}

/* ==========================================================================
   13. Parent-theme corrections

   Rules that exist only to out-rank the parent stylesheet; kept at the end
   so source order settles any specificity tie in this theme's favour.
   ========================================================================== */

.pkp_page_index .current_issue .read_more,
.obj_issue_toc .read_more,
.obj_announcement_summary .read_more,
.current_issue .read_more {
	display: inline-block;
	font-family: var(--kls-font-body);
	font-size: 13px;
	font-weight: 700;
	color: var(--kls-link);
	text-decoration: none;
	padding: 0;
}

.pkp_page_index .current_issue .read_more::after,
.obj_issue_toc .read_more::after,
.current_issue .read_more::after {
	content: " »";
}

.pkp_page_index .current_issue .read_more:hover,
.obj_issue_toc .read_more:hover,
.current_issue .read_more:hover {
	color: var(--kls-link-hover);
	text-decoration: underline;
}

/* The parent theme positions a 30px FontAwesome chevron over the final
   letters of announcement "Read More" links. Keep the compact text-link
   treatment, but let a normal arrow participate in the inline layout. */
.obj_announcement_summary .read_more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	position: relative;
	margin-top: 3px;
	line-height: 1.4;
}

.obj_announcement_summary .read_more::after {
	content: "\2192";
	position: static;
	display: inline-block;
	width: auto;
	height: auto;
	margin: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--kls-accent);
	line-height: 1;
	transform: translateX(0);
	transition: transform 150ms ease;
}

.obj_announcement_summary .read_more:hover::after,
.obj_announcement_summary .read_more:focus-visible::after {
	transform: translateX(3px);
}

/* The article page's author list matches two parent rules and would draw
   doubled horizontal rules. */
.obj_article_details .item.authors {
	border-top: 0;
	border-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* The issue archive keeps the parent's negative-margin bleed and #ddd
   dividers. */
.page_issue_archive .issues_archive,
.issues_archive {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

/* The parent pads each archive row 2.143rem all round, indenting the whole
   list; scoped one level deeper here so this wins. */
.pkp_structure_main .issues_archive > li,
.issues_archive > li {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

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

/* The parent wraps each TOC section in `margin: 30px -30px; padding: 30px`,
   bleeding the box past the column and pushing the section heading 15px
   left of every other line on the page. */
.pkp_structure_main .sections .section,
.pkp_structure_main .obj_issue_toc .section {
	margin: 0;
	padding: 0;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.pkp_structure_head nav.pkp_site_nav_menu,
	.pkp_structure_head nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen,
	.kls-nav-backdrop,
	.obj_article_summary,
	.pkp_block,
	.pkp_block .title,
	.pkp_block h2.title,
	.pkp_block .st-links a,
	.pkp_block .st-links a::before,
	.pkp_block .st-links a::after,
	.pkp_block .st-slot,
	.pkp_block .st-slot-wide,
	.pkp_block .st-tags a,
	.pkp_block .st-stat li,
	.obj_article_summary,
	.obj_galley_link,
	.obj_galley_link::before,
	.obj_article_summary .galleys_links a,
	.obj_article_summary .galleys_links a::before,
	.pkp_footer_content a,
	.pkp_footer_content li:not(.st-ico) > a::before,
	.pkp_brand_footer img,
	.kls-block-toggle-icon {
		transition: none !important;
		animation: none !important;
	}

	/* The rail is a transform, so killing the transition alone would leave it
	   permanently collapsed; show it outright instead. */
	.pkp_block .st-links a:hover::after,
	.pkp_block .st-links a:focus::after {
		transform: scaleY(1);
	}

	.pkp_block .st-links a:hover::before,
	.pkp_block .st-links a:focus::before,
	.pkp_footer_content li:not(.st-ico) > a:hover::before,
	.pkp_footer_content li:not(.st-ico) > a:focus::before {
		transform: none;
	}
}

/* ==========================================================================
   15. Touch devices — unlatch the hover states

   A tap on iOS leaves the tapped element matching :hover until something
   else is tapped. Every filled hover in this theme would therefore stay
   latched: a card frozen mid-highlight, a row stuck filled, an accordion
   title still lit after it was opened. On a pointer-less device those
   states are re-set to their resting values.

   Only the FILL states are undone. Focus rings live in their own
   :focus-visible rules and are untouched, so keyboard users on a tablet
   keep every affordance.
   ========================================================================== */

@media (hover: none) {
	.pkp_block:hover {
		border-color: var(--kls-line-strong);
	}

	.pkp_block:hover .title,
	.pkp_block:hover h2.title {
		background: var(--kls-band);
		color: #ffffff;
	}

	.pkp_block .st-links a:hover {
		background-color: transparent;
		color: var(--kls-link);
	}

	.pkp_block .st-links a:hover::before {
		transform: none;
		color: var(--kls-ink-3);
	}

	.pkp_block .st-links a:hover::after {
		transform: scaleY(0);
	}

	.pkp_block .st-grid:hover .st-slot,
	.pkp_block .st-slot:hover {
		border-color: var(--kls-line-strong);
		background: var(--kls-surface-2);
		color: var(--kls-ink-3);
	}

	.pkp_block .st-slot-wide:hover {
		border-style: dashed;
		border-color: var(--kls-line-strong);
		background: var(--kls-surface-2);
		color: var(--kls-ink-3);
	}

	.pkp_block .st-tags a:hover {
		background: transparent;
		color: var(--kls-link);
	}

	.pkp_block .st-stat:hover li {
		border-color: var(--kls-line);
		background: var(--kls-surface-2);
	}

	.pkp_block .st-search button:hover {
		background: var(--kls-band-soft);
		border-color: var(--kls-line-strong);
	}

	/* Both stripes are restated: a single reset would flatten the zebra to
	   whichever value it named. */
	.obj_article_summary:hover {
		background-color: var(--kls-surface-2);
	}

	.pkp_structure_main li:nth-child(even) > .obj_article_summary:hover {
		background-color: var(--kls-row-alt);
	}

	.pkp_footer_content li:not(.st-ico) > a:hover::before {
		transform: none;
		color: var(--kls-on-band-70);
	}

	.pkp_brand_footer a:hover img {
		opacity: 0.9;
	}
}

/* ==========================================================================
   14. Print
   ========================================================================== */

@media print {
	.pkp_structure_head,
	.pkp_structure_footer_wrapper,
	.header_view {
		background-image: none;
	}

	.pkp_structure_head,
	.pkp_structure_sidebar,
	.pkp_structure_footer_wrapper,
	.pkp_site_nav_toggle,
	.kls-nav-backdrop,
	.kls-nav-close,
	.galleys_links {
		display: none !important;
	}

	body {
		background: #fff;
		font-size: 11pt;
	}

	.pkp_structure_main {
		border: 0;
		box-shadow: none;
		padding: 0;
	}

	a {
		text-decoration: underline;
	}
}