/* KUJHSS theme 1.3.2 · 2026-11-02
   Upload in OJS: Settings > Website > Appearance > Advanced > Journal style sheet.
   Built from jhss/redesign/theme/kujhss.css. Every version is kept in jhss-changes/theme/css/ for rollback. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Noto+Serif:ital,wght@0,400;0,600;1,400&family=Noto+Naskh+Arabic:wght@400;600&family=Noto+Kufi+Arabic:wght@400;500;600;700&display=swap");

/* KUJHSS child theme for the OJS 3.3 default theme.
   Loads after the parent stylesheet; everything here targets default-theme markup. */

/* Fonts (Montserrat, Noto Serif, Noto Naskh Arabic, Noto Kufi Arabic) are loaded by the plugin class as their own
   <link>, so they download alongside this file instead of after it. */

/* === S01 Child theme: build, package and install on OJS · task 129 === */
/*
   How this file ships
   - It is the stylesheet of the "KUJHSS Theme" plugin (plugins/themes/kujhss), a child of the Default theme.
     The build packages it as styles/kujhss.css; OJS loads it right after the parent stylesheet.
     Build: python3 -I redesign/build_theme.py. Install: changes/theme/INSTALL.md. New version: changes/theme/DEPLOY.md.
   - The old journal stylesheet (Appearance > Advanced > Journal style sheet, public/journals/1/styleSheet.css)
     is retired. It loaded after this file and justified paragraphs, hid the OJS/PKP credit, let the banner grow
     to 200px and centred the footer. Every rule in it was dead or contradicted by this theme. Leave that
     setting empty and put new rules here.
   - Local preview: site-mirror/serve.py --theme serves this file at /__theme/styles/kujhss.css (the same
     place as in the plugin) and drops the old stylesheet. Add --no-mock to see the theme alone, as the
     live site gets it before the setting and content tasks are done.

   Rules for every later task
   - One block per task, headed  === <row> <name> · task <n> ===  like this one.
   - Names: variables --kj-*, classes .kj_* (snake case, like OJS's own .pkp_* / .obj_* / .cmp_*).
   - Colours, fonts, sizes, spacing and shadows come from the U01 design tokens (--kj-*, documented in that
     block). Never hard-code the navy or the gold.
   - RTL: prefer logical properties (margin-inline-start, inset-inline-start, text-align: start) so one rule
     fits all three languages. Put what is left under [dir="rtl"]; OJS sets dir="rtl" on <body> for ar_IQ and ku_IQ.
   - Gate on the replacement: a rule that hides OJS content only fires when its replacement is on the page,
     e.g. .obj_issue_toc:has(.kj_issue_head) .heading { display: none; }. The live site never loses content
     while a task is half shipped, and browsers without :has() simply show both.
   - Images: theme/img/, referenced as url(../img/name.png). The build packages img/ except img/mock and img/covers.
   - Templates: theme/templates/ under their OJS 3.3 path (see templates/README.md). Screen-reader-only text
     uses OJS's own .pkp_screen_reader.

   Reusable classes
   - .kj_ltr  an LTR run inside RTL text: ISSNs, DOIs, URLs, emails, phone numbers, Latin names.
              Use it in HTML pasted into OJS settings (footer, custom blocks, homepage content).
*/

.kj_ltr { direction: ltr; unicode-bidi: isolate; }

/* The parent theme hard-codes text-align: left in these places, in every language
   (the Arabic and Kurdish site name wrapped from the left). Follow the page direction instead. */
.pkp_site_name, .pkp_navigation_primary, .pkp_navigation_user, .pkp_navigation_user li,
.pkp_footer_content, .cmp_table th, .cmp_table td,
.obj_article_details .citation_display .citation_formats_button,
body[dir="rtl"] .pkp_navigation_user, body[dir="rtl"] .pkp_head_wrapper .pkp_search { text-align: start; }
.pkp_site_name { padding-inline: 0; }

/* The parent theme hard-codes its fonts on these elements (Montserrat with system fallbacks, no Arabic),
   so Arabic and Kurdish text in them fell back to a system font. Point them at the theme's font settings;
   English keeps Montserrat. */
#navigationPrimary a,
.block_make_submission a,
.cmp_announcements .date,
.cmp_announcements .obj_announcement_summary h2,
.cmp_announcements .obj_announcement_summary h3,
.cmp_announcements .obj_announcement_summary h4,
.cmp_announcements .read_more,
.cmp_breadcrumbs,
.cmp_breadcrumbs .current h1,
.cmp_manuscript_button,
.cmp_pagination,
.obj_article_details .authors,
.obj_article_details .citation_display .citation_formats_button,
.obj_article_details .doi,
.obj_article_details .entry_details .item .label,
.obj_article_details .item .label,
.obj_article_details .main_entry .item .label,
.obj_article_summary > .title,
.obj_galley_link,
.obj_issue_summary .series,
.obj_issue_summary .title,
.obj_issue_toc .heading .pub_id,
.obj_issue_toc .heading .published,
.obj_issue_toc .pages,
.page_search .search_advanced > legend,
.pkp_block .title,
.pkp_navigation_search_wrapper a,
.pkp_navigation_user_wrapper a,
.pkp_page_index .current_issue .current_issue_title,
.pkp_page_index .current_issue .read_more,
.pkp_site_name,
.pkp_site_name .is_text,
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3 { font-family: var(--kj-sans); }
.obj_article_details .subtitle, .obj_article_summary .subtitle { font-family: var(--kj-serif); }

/* Motion. One easing and three speeds for every state change, so the site moves as one thing:
   --kj-fast colour, underline, border · --kj-med shadows, small moves, dropdowns · --kj-slow panels.
   Hover, focus and open/close animate; visitors who ask their system for less motion get none. */
:root {
	--kj-ease: cubic-bezier(.2, .7, .2, 1);   /* quick start, soft landing */
	--kj-fast: .24s;
	--kj-med: .39s;
	--kj-slow: .57s;
	/* Opening: how every dropdown, pop-up and the phone menu appears.
	   The box unfolds from the top and fades in at the same time, on a curve that starts quick and settles slowly.
	   Its items fade in and drift 4px into place one after another, starting while the box is still opening,
	   so nothing waits for anything else. Closing is shorter and quieter: everything fades and folds together.
	   Floating boxes unfold by clip-path (the look of growing height, without moving the page).
	   Items take their order from --i (set below for menu items and pop-up children). */
	--kj-enter: cubic-bezier(.16, 1, .3, 1);   /* expo out: quick start, long soft landing */
	--kj-exit: cubic-bezier(.4, 0, 1, 1);      /* gentle start, gone at the end */
	--kj-open: .5s;
	--kj-close: .22s;
	--kj-items-delay: 60ms;   /* first item, after the box starts */
	--kj-stagger: 28ms;       /* between items */
}
:is(#navigationPrimary li, .citation_formats_list > *):nth-child(2) { --i: 1; }
:is(#navigationPrimary li, .citation_formats_list > *):nth-child(3) { --i: 2; }
:is(#navigationPrimary li, .citation_formats_list > *):nth-child(4) { --i: 3; }
:is(#navigationPrimary li, .citation_formats_list > *):nth-child(5) { --i: 4; }
:is(#navigationPrimary li, .citation_formats_list > *):nth-child(6) { --i: 5; }
:is(#navigationPrimary li, .citation_formats_list > *):nth-child(7) { --i: 6; }
:is(#navigationPrimary li, .citation_formats_list > *):nth-child(n+8) { --i: 7; }
a, button, input, select, textarea, .cmp_button, .pkp_button {
	transition: color var(--kj-fast) var(--kj-ease), background-color var(--kj-fast) var(--kj-ease),
		border-color var(--kj-fast) var(--kj-ease), text-decoration-color var(--kj-fast) var(--kj-ease),
		box-shadow var(--kj-med) var(--kj-ease), transform var(--kj-med) var(--kj-ease),
		outline-offset var(--kj-fast) var(--kj-ease);
	outline-offset: 6px;   /* the focus ring settles in from 6px to 2px */
}
:focus-visible { outline-offset: 2px; }

/* Underlines fade in instead of popping */
body .pkp_block .content a:not(.block_make_submission_link), body .cmp_breadcrumbs a, body .pkp_navigation_user > li > a, body .kj_footer a,
body .obj_article_summary > .title a, body #navigationPrimary ul a, body .kj_toc a, body .kj_more a {
	text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
}
body .pkp_block .content a:not(.block_make_submission_link):hover, body .cmp_breadcrumbs a:hover, body .pkp_navigation_user > li > a:hover, body .kj_footer a:hover,
body .obj_article_summary > .title a:hover, body #navigationPrimary ul a:hover, body #navigationPrimary ul a:focus, body .kj_toc a:hover, body .kj_more a:hover {
	text-decoration-color: currentColor;
}

/* Buttons lift a little on hover and press down on click */
.block_make_submission .content a.block_make_submission_link:hover,
.obj_article_details .entry_details .galleys .obj_galley_link:hover,
.kj_btn_primary:hover, button.submit:hover, .cmp_button:hover {
	transform: translateY(-1px);
	box-shadow: var(--kj-shadow-lift) !important;
}
.block_make_submission .content a.block_make_submission_link:active, .obj_galley_link:active,
.kj_btn:active, button.submit:active, .cmp_button:active, .pkp_navigation_search_wrapper a:active {
	transform: translateY(1px);
	box-shadow: none !important;
	transition-duration: .09s;
}
.block_make_submission .content a.block_make_submission_link::after { transition: transform var(--kj-med) var(--kj-ease); }
.block_make_submission .content a.block_make_submission_link:hover::after { transform: translateX(3px); }
[dir="rtl"] .block_make_submission .content a.block_make_submission_link:hover::after { transform: translateX(-3px); }

/* Opening for in-page pop-ups that OJS shows and hides with aria-hidden, e.g. "More Citation Formats" on the
   article page. OJS hides them with display: none, which can't animate, so the theme takes the hiding over.
   They sit in the page flow, so the real height animates: exact where the browser can animate to height: auto,
   otherwise through max-height. */
.obj_article_details .citation_display .citation_formats_list[aria-hidden] {
	display: block;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	transition: max-height var(--kj-close) var(--kj-exit), height var(--kj-close) var(--kj-exit),
		opacity var(--kj-close) var(--kj-exit), visibility 0s linear var(--kj-close);
}
.obj_article_details .citation_display .citation_formats_list[aria-hidden="false"] {
	max-height: 32em;
	opacity: 1;
	visibility: visible;
	transition: max-height var(--kj-open) var(--kj-enter), height var(--kj-open) var(--kj-enter),
		opacity calc(var(--kj-open) * .6) var(--kj-enter), visibility 0s;
}
.obj_article_details .citation_display .citation_formats_list[aria-hidden] > * {
	opacity: 0; transform: translateY(-4px);
	transition: opacity var(--kj-close) var(--kj-exit), transform var(--kj-close) var(--kj-exit);
}
.obj_article_details .citation_display .citation_formats_list[aria-hidden="false"] > * {
	opacity: 1; transform: none;
	transition: opacity var(--kj-open) var(--kj-enter) calc(var(--kj-items-delay) + var(--i, 0) * var(--kj-stagger)),
		transform var(--kj-open) var(--kj-enter) calc(var(--kj-items-delay) + var(--i, 0) * var(--kj-stagger));
}
@supports (interpolate-size: allow-keywords) {
	.obj_article_details .citation_display { interpolate-size: allow-keywords; }
	.obj_article_details .citation_display .citation_formats_list[aria-hidden] { max-height: none; height: 0; }
	.obj_article_details .citation_display .citation_formats_list[aria-hidden="false"] { height: auto; }
}

/* Text alignment: Kodo chose option B on 2026-10-31. Long body text (abstracts, About, author guidelines,
   policy and other static pages, announcements) is justified on desktop. Phones, headings, lists, tables and
   narrow columns stay start-aligned (left in English, right in Arabic and Kurdish). English hyphenates to
   keep the word gaps even; browsers can't stretch Arabic letters (kashida), so Arabic-script gaps stay a bit wider. */
@media (min-width: 992px) {
	.page_index_journal .homepage_about p, .page_index_journal .additional_content p,
	.obj_article_details .abstract p, .obj_article_details .author_bios p,
	.pkp_structure_main .page > p, .pkp_structure_main .page .description p, .page_submissions .author_guidelines p,
	.obj_announcement_summary .summary p, .page_announcement .description p, .kj_prose p {
		text-align: justify;
		hyphens: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* === U01 Design tokens (colours, type, spacing) · task 085 === */
/*
   The design system every other block builds on. Rules elsewhere use these tokens, never literal colours,
   font sizes or shadows. If a value is missing, add a token here first, with its role.
   Sizes are in px: the parent theme fixes the root font size at 14px, so rem would mean 14px, not 16px.

   Colour (contrast is against --kj-paper; every text colour also passes WCAG AA on --kj-ground and --kj-navy-wash)
   - Brand     --kj-navy #1A1A54 the primary: links, buttons, headings, menu bar, footer (15.9:1)
               --kj-navy-deep hover and pressed · --kj-navy-wash tinted fills (menu hover, "more" bars)
               --kj-gold #F7BC4A the accent: underlines, focus ring, labels on navy. Never text on white (1.7:1);
               gold-coloured text on light ground is --kj-gold-ink (5.9:1).
               --kj-blue is the older name for the primary; it stays an alias of --kj-navy.
   - Text      --kj-ink body (15.5:1) · --kj-ink-2 secondary (7.8:1) · --kj-ink-3 meta, captions, labels (5.3:1)
   - Surfaces  --kj-ground page · --kj-paper cards · --kj-paper-2 panels inside a card (table heads, contents box)
   - Lines     --kj-rule borders and dividers · --kj-rule-soft hairlines between rows
   - On navy   --kj-on-navy text · --kj-on-navy-2 secondary (9.9:1) · --kj-on-navy-3 muted (7.1:1)
               --kj-on-navy-rule dividers · --kj-on-navy-line outlines · --kj-on-navy-hover hover fill
   - Notes     --kj-note-bg, -line, -mark, -ink, -ink-strong: editor's notes and "EIC to confirm" marks
   - Other     --kj-selection text selection · --kj-orcid ORCID's own green · --kj-viewer the PDF viewer backdrop

   Type
   - Families  --kj-sans Montserrat: UI, headings, labels, meta · --kj-serif Noto Serif: reading text.
               Arabic and Kurdish switch them to Noto Kufi Arabic and Noto Naskh Arabic. This follows the page
               (dir="rtl") and any element marked lang="ar" / "ckb" / "ku", so an Arabic title on an English page
               and an English label on a Kurdish page each get their own script's font.
   - Sizes     --kj-text-xs 12   tags, small print
               --kj-text-sm 13   meta lines, breadcrumbs, captions, caps labels
               --kj-text-ui 14   menus, buttons, sidebar links, tables, form fields
               --kj-text-md 15   secondary reading: authors, affiliations, references, bios
               --kj-text-base 16 default
               --kj-text-read 17 long reading text: abstracts, policies, About, announcements
               --kj-text-lg 19   h3, card and announcement titles, subtitles
               --kj-text-xl 22   lead headings (home intro on phones)
               --kj-text-2xl 26  issue titles, the home intro
               --kj-text-3xl 32  page and article titles (h1)
               xl, 2xl and 3xl shrink smoothly towards phone width, so headings need no phone overrides.
   - Tracking  --kj-tracking-display for xl and up (0 in Arabic script)
   - Leading   --kj-leading-tight display · -snug headings and titles · -ui menus, meta, short text · -read reading
   - Weights   --kj-weight-regular 400 · -medium 500 · -semibold 600 · -bold 700 (the weights the fonts load)
   - Labels    small uppercase labels (sidebar block titles, section labels, table heads, footer headings) take
               --kj-label-size (13) or --kj-label-size-sm (12), --kj-label-case and --kj-label-tracking.
   - RTL       Arabic script has no capitals and needs taller lines, so under dir="rtl" the tokens change:
               labels drop the uppercase and tracking and grow 2px, reading text grows 1px (Naskh reads small),
               line heights grow, display tracking goes to 0, and h1 tops out at 30px (Kufi letters are larger at the same size).
               A rule written with the tokens needs no [dir="rtl"] variant for type.

   Spacing     4px grid, --kj-space-N = N x 4px: 1 (4) 2 (8) 3 (12) 4 (16) 5 (20) 6 (24) 8 (32) 10 (40) 12 (48) 14 (56) 18 (72).
               --kj-flow is the gap between paragraphs, list items and blocks in running text.
               Page width, columns and section spacing are built from these in the U29 block (--kj-page, --kj-gutter ...).

   Shape       --kj-radius-sm 3 covers, small marks · --kj-radius 6 buttons, inputs, boxes · --kj-radius-md 8 inner cards
               --kj-radius-lg 10 page cards · --kj-radius-pill chips and the language switch
   Depth       --kj-shadow-card page cards · --kj-shadow-pop dropdowns · --kj-shadow-panel the phone menu
               --kj-shadow-btn primary buttons · --kj-shadow-lift buttons on hover · --kj-shadow-hover tiles on hover
               --kj-shadow-cover issue covers (-cover-hover on hover) · --kj-ring focus glow on form fields

   Reusable classes (for HTML pasted into OJS settings, custom blocks and pages, and for later tasks)
   - .kj_label   small uppercase label, e.g. <p class="kj_label">Indexed in</p>
   - .kj_meta    meta line: dates, page ranges, counts (sans, small, muted, even-width figures)
   - .kj_lead    an intro paragraph: one size up, secondary ink
   - .kj_prose   long reading text: serif, reading size and leading, 70-character measure, even spacing
   - .kj_num     even-width figures for columns of numbers (ISSNs, page ranges, dates)
   - .kj_ltr     (S01) an LTR run inside RTL text
*/

:root {
	/* colour */
	--kj-navy: #1a1a54;
	--kj-navy-deep: #11113a;
	--kj-navy-wash: #eeeef6;
	--kj-blue: var(--kj-navy);
	--kj-blue-deep: var(--kj-navy-deep);
	--kj-blue-wash: var(--kj-navy-wash);
	--kj-gold: #f7bc4a;
	--kj-gold-ink: #8a5a00;
	--kj-ink: #1f2430;
	--kj-ink-2: #4a5263;
	--kj-ink-3: #646c7c;   /* was #6b7383, which fell to 4.1:1 on the navy wash */
	--kj-ground: #f4f5f8;
	--kj-paper: #ffffff;
	--kj-paper-2: #fafbfc;
	--kj-rule: #dde2ea;
	--kj-rule-soft: #ebeef3;
	--kj-on-navy: #ffffff;
	--kj-on-navy-2: #c9cbe0;
	--kj-on-navy-3: #a9abc6;
	--kj-on-navy-rule: rgba(255, 255, 255, .14);
	--kj-on-navy-line: rgba(255, 255, 255, .35);
	--kj-on-navy-hover: rgba(255, 255, 255, .1);
	--kj-note-bg: #fffaf0;
	--kj-note-line: #f1dcae;
	--kj-note-mark: #fff3d6;
	--kj-note-ink: #6b4a06;
	--kj-note-ink-strong: #4f3604;
	--kj-selection: #fde4b0;
	--kj-orcid: #a6ce39;
	--kj-viewer: #52566a;

	/* type */
	--kj-sans: "Montserrat", "Noto Kufi Arabic", -apple-system, "Segoe UI", sans-serif;
	--kj-serif: "Noto Serif", "Noto Naskh Arabic", Georgia, serif;
	--kj-text-xs: 12px;
	--kj-text-sm: 13px;
	--kj-text-ui: 14px;
	--kj-text-md: 15px;
	--kj-text-base: 16px;
	--kj-text-read: 17px;
	--kj-text-lg: 19px;
	--kj-text-xl: clamp(19px, 17.6px + .4vw, 22px);
	--kj-text-2xl: clamp(22px, 20.2px + .5vw, 26px);
	--kj-text-3xl: clamp(26px, 23.8px + .6vw, 32px);
	--kj-leading-tight: 1.2;
	--kj-leading-snug: 1.35;
	--kj-leading-ui: 1.5;
	--kj-leading-read: 1.75;
	--kj-weight-regular: 400;
	--kj-weight-medium: 500;
	--kj-weight-semibold: 600;
	--kj-weight-bold: 700;
	--kj-label-size: var(--kj-text-sm);
	--kj-label-size-sm: var(--kj-text-xs);
	--kj-label-case: uppercase;
	--kj-label-tracking: .08em;
	--kj-tracking-display: -.015em;   /* large headings sit a little tighter */

	/* spacing */
	--kj-space-1: 4px;
	--kj-space-2: 8px;
	--kj-space-3: 12px;
	--kj-space-4: 16px;
	--kj-space-5: 20px;
	--kj-space-6: 24px;
	--kj-space-8: 32px;
	--kj-space-10: 40px;
	--kj-space-12: 48px;
	--kj-space-14: 56px;
	--kj-space-18: 72px;
	--kj-flow: 1em;

	/* shape and depth */
	--kj-radius-sm: 3px;
	--kj-radius: 6px;
	--kj-radius-md: 8px;
	--kj-radius-lg: 10px;
	--kj-radius-pill: 999px;
	--kj-shadow-card: 0 1px 2px rgba(26, 26, 84, .04), 0 8px 24px -16px rgba(26, 26, 84, .12);
	--kj-shadow-pop: 0 12px 28px -8px rgba(26, 26, 84, .22);
	--kj-shadow-panel: 0 16px 28px -14px rgba(26, 26, 84, .55);
	--kj-shadow-btn: 0 6px 16px -8px rgba(26, 26, 84, .6);
	--kj-shadow-lift: 0 12px 24px -12px rgba(26, 26, 84, .7);
	--kj-shadow-hover: 0 6px 16px -10px rgba(26, 26, 84, .35);
	--kj-shadow-cover: 0 1px 2px rgba(0, 0, 0, .08), 0 14px 28px -14px rgba(26, 26, 84, .45);
	--kj-shadow-cover-hover: 0 1px 2px rgba(0, 0, 0, .08), 0 18px 30px -14px rgba(26, 26, 84, .5);
	--kj-ring: 0 0 0 3px rgba(26, 26, 84, .15);
}

/* Arabic and Kurdish: the page (dir="rtl") and any element marked with an Arabic-script language */
[dir="rtl"], [lang|="ar"], [lang|="ckb"], [lang|="ku"] {
	--kj-sans: "Noto Kufi Arabic", "Montserrat", sans-serif;
	--kj-serif: "Noto Naskh Arabic", "Noto Serif", serif;
}
[dir="rtl"] {
	--kj-text-read: 18px;
	--kj-text-3xl: clamp(24px, 22.2px + .5vw, 30px);
	--kj-leading-tight: 1.55;
	--kj-leading-snug: 1.6;
	--kj-leading-ui: 1.7;
	--kj-leading-read: 1.95;
	--kj-label-size: var(--kj-text-md);
	--kj-label-size-sm: var(--kj-text-ui);
	--kj-label-case: none;
	--kj-label-tracking: 0;
	--kj-tracking-display: 0;   /* never squeeze joined letters */
}
/* English inside an Arabic or Kurdish page (language links, galley tags) keeps the Latin fonts */
[dir="rtl"] [lang|="en"] {
	--kj-sans: "Montserrat", "Noto Kufi Arabic", -apple-system, "Segoe UI", sans-serif;
	--kj-serif: "Noto Serif", "Noto Naskh Arabic", Georgia, serif;
}

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

html { background: var(--kj-ground); }
body {
	background: var(--kj-ground);
	color: var(--kj-ink);
	font-family: var(--kj-serif);
	font-size: var(--kj-text-base);
	line-height: var(--kj-leading-ui);   /* the parent's fixed 20px squeezed 16px text */
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--kj-selection); color: var(--kj-navy); }
a { color: var(--kj-blue); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover, a:focus { color: var(--kj-blue-deep); }
:focus-visible { outline: 2px solid var(--kj-gold); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3, h4, h5, h6 { font-family: var(--kj-sans); color: var(--kj-navy); line-height: var(--kj-leading-snug); text-wrap: pretty; }
b, strong { font-weight: var(--kj-weight-semibold); }   /* the serif loads 400 and 600; 700 would be faked */
small { font-size: var(--kj-text-sm); }
hr { height: 0; margin: var(--kj-space-8) 0; border: 0; border-top: 1px solid var(--kj-rule); }
abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
img { max-width: 100%; }

/* ---------- Reusable type classes ---------- */

.kj_label {
	margin: 0 0 var(--kj-space-3);
	font: var(--kj-weight-bold) var(--kj-label-size)/var(--kj-leading-snug) var(--kj-sans);
	letter-spacing: var(--kj-label-tracking);
	text-transform: var(--kj-label-case);
	color: var(--kj-navy);
}
.kj_meta {
	font: var(--kj-weight-medium) var(--kj-text-sm)/var(--kj-leading-ui) var(--kj-sans);
	color: var(--kj-ink-3);
	font-variant-numeric: tabular-nums;
}
.kj_lead { font-size: var(--kj-text-read); line-height: var(--kj-leading-read); color: var(--kj-ink-2); }
.kj_prose { max-width: 70ch; font-family: var(--kj-serif); font-size: var(--kj-text-read); line-height: var(--kj-leading-read); }
.kj_prose :is(p, ul, ol, blockquote, table) { margin: 0 0 var(--kj-flow); }
.kj_prose li + li { margin-top: calc(var(--kj-flow) / 3); }
.kj_prose :is(h2, h3, h4) { margin-top: calc(var(--kj-flow) * 2); }
.kj_num { font-variant-numeric: tabular-nums; }

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

.pkp_structure_head {
	background: var(--kj-paper);
	border-bottom: 0;
}
.pkp_head_wrapper { position: relative; }   /* width and gutter: U29 */
.pkp_site_name_wrapper {
	height: auto;
	padding: 22px 0 20px;
	background: transparent;
}
.pkp_site_name { position: static; width: auto; height: auto; transform: none; padding: 0; }
.pkp_site_name .is_img { display: inline-block; margin: 0; vertical-align: top; }   /* no line-height gap under the logo */
.pkp_site_name .is_img img { max-height: 64px !important; width: auto; display: block; }
.pkp_site_name .is_text { color: var(--kj-navy); display: block; white-space: normal; line-height: 1.3; }

/* User links and language switcher (header.tpl override adds .kj_lang) */
.pkp_navigation_user_wrapper {
	position: absolute;
	top: 24px;
	right: 24px;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 0;
}
[dir="rtl"] .pkp_navigation_user_wrapper { right: auto; left: 24px; }
.pkp_navigation_user > li > a {
	font: 500 var(--kj-text-sm)/1 var(--kj-sans);
	color: var(--kj-ink-2) !important;
	padding: 6px 0;
}
.pkp_navigation_user > li { margin-inline-start: 18px; }
.pkp_navigation_user > li > a:hover { color: var(--kj-blue) !important; text-decoration: underline; }
.kj_lang {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 3px;
	border: 1px solid var(--kj-rule);
	border-radius: var(--kj-radius-pill);
	order: -1;
}
.kj_lang a {
	display: block;
	padding: 5px 12px;
	border-radius: var(--kj-radius-pill);
	font: 500 var(--kj-text-sm)/1.2 var(--kj-sans);
	color: var(--kj-ink-2);
	text-decoration: none;
}
.kj_lang .current a { background: var(--kj-navy); color: var(--kj-on-navy); }
.kj_lang a:hover { color: var(--kj-blue); }

/* Primary navigation bar */
.pkp_site_nav_menu { background: transparent; }
.pkp_navigation_primary_row {
	position: relative;
	background: var(--kj-blue);
	margin: 0 calc(50% - 50vw);
	padding: 0 calc(50vw - 50%);
}
.pkp_navigation_primary_wrapper::before, .pkp_navigation_primary_wrapper::after,
#navigationUser::before, #navigationUser::after,
.pkp_structure_sidebar::before, .pkp_structure_sidebar::after { display: none !important; }
#navigationUser { display: flex; align-items: center; }
.pkp_navigation_primary_wrapper {
	max-width: var(--kj-max);
	margin: 0 auto;
	padding: 0;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
}
#navigationPrimary { display: flex; flex-wrap: wrap; margin: 0; }
#navigationPrimary > li > a {
	position: relative;
	display: block;
	margin: 0;
	padding: 16px 18px 15px;
	border: 0;
	font: 600 var(--kj-text-ui)/1.2 var(--kj-sans);
	letter-spacing: .01em;
	text-transform: none;
	color: var(--kj-on-navy);
}
#navigationPrimary > li:first-child > a { padding-inline-start: 0; }
#navigationPrimary > li > a::after {
	content: "";
	position: absolute;
	left: 18px; right: 18px; bottom: 0;
	width: auto; height: 3px;
	margin: 0; border: 0;   /* on dropdown items the parent draws its caret here, 8px wide with a border */
	background: var(--kj-gold);
	transform: scaleX(0);
	transition: transform var(--kj-med) var(--kj-ease);
}
#navigationPrimary > li:first-child > a::after { inset-inline-start: 0; }   /* the first item has no start padding, in either direction */
#navigationPrimary > li > a:hover::after,
#navigationPrimary > li > a:focus::after,
#navigationPrimary > li.kj_current > a::after { transform: scaleX(1); }
#navigationPrimary > li > a:hover, #navigationPrimary > li > a:focus { color: var(--kj-on-navy); background: transparent; border: 0; }
#navigationPrimary > li > ul {
	border: 1px solid var(--kj-rule);
	border-radius: 0 0 var(--kj-radius) var(--kj-radius);
	box-shadow: var(--kj-shadow-pop);
	padding: 8px 0;
	min-width: 240px;
}
#navigationPrimary ul a {
	font: 500 var(--kj-text-ui)/1.3 var(--kj-sans);
	text-transform: none;
	letter-spacing: 0;
	color: var(--kj-ink);
	padding: 9px 18px;
	border: 0;
}
#navigationPrimary ul a:hover { background: var(--kj-blue-wash); color: var(--kj-blue-deep); border: 0; }
.pkp_navigation_search_wrapper { margin: 0; padding: 0; float: none; display: flex; align-items: center; }
.pkp_navigation_search_wrapper a {
	margin: 0;   /* the parent's 5px top margin pushed it below the bar's centre */
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--kj-on-navy-line);
	border-radius: var(--kj-radius);
	font: 500 var(--kj-text-sm)/1 var(--kj-sans);
	color: var(--kj-on-navy) !important;
	text-transform: none;
}
.pkp_navigation_search_wrapper a:hover, .pkp_navigation_search_wrapper a:focus { background: var(--kj-on-navy-hover); border-color: var(--kj-on-navy); }

/* Page grid, columns and cards: U29 */

/* Section headings: the default theme's gold underline, refined */
.pkp_structure_main h2,
.page_index_journal section > h2,
.obj_article_details .main_entry .item .label,
.pkp_block .title {
	font: var(--kj-weight-bold) var(--kj-label-size)/1.3 var(--kj-sans);
	letter-spacing: var(--kj-label-tracking);
	text-transform: var(--kj-label-case);
	color: var(--kj-navy);
}
.pkp_structure_main h2::after, .pkp_block .title::after { display: none; }
.pkp_structure_main h2 { padding-bottom: 12px; margin: 0 0 22px; position: relative; }
.pkp_structure_main h2::before {
	content: "";
	position: absolute;
	bottom: 0; inset-inline-start: 0;
	width: 32px; height: 3px;
	background: var(--kj-gold);
	border-radius: 2px;
}
.pkp_structure_main h1,
.page > h1, .page h1.page_title {
	font: var(--kj-weight-bold) var(--kj-text-3xl)/var(--kj-leading-tight) var(--kj-sans);
	letter-spacing: var(--kj-tracking-display);
	color: var(--kj-navy);
	margin: 0 0 24px;
	text-transform: none;
}
.pkp_structure_main h3 { font: var(--kj-weight-semibold) var(--kj-text-lg)/var(--kj-leading-snug) var(--kj-sans); color: var(--kj-navy); margin: 36px 0 12px; }
.pkp_structure_main h4 { font: var(--kj-weight-semibold) var(--kj-text-base)/var(--kj-leading-snug) var(--kj-sans); }
.page p, .page li { font-size: var(--kj-text-read); line-height: var(--kj-leading-read); color: var(--kj-ink); }
.page > p, .page .description, .page .kj_prose { max-width: 70ch; }

/* Breadcrumbs */
.cmp_breadcrumbs { margin: 0 0 20px; }
.cmp_breadcrumbs ol { font: 500 var(--kj-text-sm)/1.5 var(--kj-sans); text-transform: none; color: var(--kj-ink-3); }
.cmp_breadcrumbs a { color: var(--kj-ink-2); text-decoration: none; }
.cmp_breadcrumbs a:hover { color: var(--kj-blue); text-decoration: underline; }
.cmp_breadcrumbs .separator { color: var(--kj-rule); padding: 0 6px; }
.cmp_breadcrumbs .current { color: var(--kj-ink-3); }

/* Buttons */
.cmp_button, .cmp_form .buttons button, .pkp_button, .block_make_submission a,
.obj_issue_summary .read_more, .read_more, a.cmp_button_wire {
	font-family: var(--kj-sans);
}
.cmp_form .buttons button.submit, .cmp_button, button.submit {
	background: var(--kj-blue);
	color: var(--kj-on-navy);
	border: 0;
	border-radius: var(--kj-radius);
	box-shadow: none;
	padding: 0 22px;
	height: 44px;
	font: 600 var(--kj-text-ui)/44px var(--kj-sans);
	text-transform: none;
	letter-spacing: 0;
}
.cmp_form .buttons button.submit:hover, button.submit:hover { background: var(--kj-blue-deep); }

/* ---------- Sidebar ---------- */

.pkp_block { padding: 0; }   /* spacing between blocks: U29 */
.pkp_block .title { margin: 0 0 14px; padding: 0 0 10px; border-bottom: 1px solid var(--kj-rule); }
.pkp_block .content ul li { padding: 0; }
.pkp_block .content a { font: 500 var(--kj-text-ui)/1.5 var(--kj-sans); color: var(--kj-ink); text-decoration: none; }
.pkp_block .content a:hover { color: var(--kj-blue); text-decoration: underline; }
.block_make_submission .content a.block_make_submission_link {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	height: 50px;
	padding: 0 20px;
	background: var(--kj-blue);
	color: var(--kj-on-navy);
	border: 0;
	border-radius: var(--kj-radius);
	font: 600 var(--kj-text-md)/1 var(--kj-sans);
	text-transform: none;
	letter-spacing: 0;
	box-shadow: var(--kj-shadow-btn);
}
.block_make_submission .content a.block_make_submission_link:hover { background: var(--kj-blue-deep); color: var(--kj-on-navy); text-decoration: none; }
.block_make_submission .content a.block_make_submission_link::after { content: "→"; font-weight: 500; }
[dir="rtl"] .block_make_submission .content a.block_make_submission_link::after { content: "←"; }

/* "At a glance" custom block */
.kj_facts { margin: 0; display: grid; gap: 0; }
.kj_facts div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--kj-rule-soft); }
.kj_facts div:last-child { border-bottom: 0; }
.kj_facts dt { font: 500 var(--kj-text-sm)/1.4 var(--kj-sans); color: var(--kj-ink-3); }
.kj_facts dd { margin: 0; font: 600 var(--kj-text-sm)/1.4 var(--kj-sans); color: var(--kj-ink); text-align: end; font-variant-numeric: tabular-nums; }
.kj_facts dd a { font: inherit !important; color: var(--kj-blue) !important; }

/* Link list custom block */
.kj_links { list-style: none; margin: 0; padding: 0; }
.kj_links li { border-bottom: 1px solid var(--kj-rule-soft); }
.kj_links li:last-child { border-bottom: 0; }
.kj_links a { display: flex !important; justify-content: space-between; padding: 10px 0; }
.kj_links a::after { content: "›"; color: var(--kj-ink-3); }
[dir="rtl"] .kj_links a::after { content: "‹"; }

/* Indexed-in logo grid */
.kj_index { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.kj_index li { margin: 0; }
.kj_index a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	height: 64px;
	padding: 6px 10px;
	box-sizing: border-box;
	background: var(--kj-paper);
	border: 1px solid var(--kj-rule-soft);
	border-radius: var(--kj-radius);
	transition: border-color var(--kj-fast) var(--kj-ease), box-shadow var(--kj-med) var(--kj-ease);
}
.kj_index a:hover { border-color: var(--kj-rule); box-shadow: var(--kj-shadow-hover); }
.kj_index img { max-width: 100%; max-height: 48px; width: auto; height: auto; object-fit: contain; }
.kj_index_more { margin: 12px 0 0 !important; }
.kj_index_more a { font-size: var(--kj-text-sm) !important; color: var(--kj-blue) !important; }

.kj_publisher a { display: block !important; padding: 18px 20px; background: var(--kj-paper); border: 1px solid var(--kj-rule-soft); border-radius: var(--kj-radius); }
.kj_publisher img { width: 100%; height: auto; display: block; }
.kj_publisher p { margin: 10px 0 0; font: 400 var(--kj-text-sm)/1.55 var(--kj-sans) !important; color: var(--kj-ink-3) !important; }

/* ---------- Home ---------- */

.kj_intro { overflow: hidden; }   /* a card (U29) that ends in the .kj_strip */
.kj_intro h2.kj_intro_title {
	font: var(--kj-weight-semibold) var(--kj-text-2xl)/var(--kj-leading-snug) var(--kj-sans);
	letter-spacing: var(--kj-tracking-display);
	text-transform: none;
	color: var(--kj-navy);
	max-width: 30ch;
	margin: 0 0 16px;
	padding: 0;
}
.kj_intro h2.kj_intro_title::before { display: none; }
.kj_intro p { font-size: var(--kj-text-read); line-height: var(--kj-leading-read); color: var(--kj-ink-2); max-width: 64ch; margin: 0 0 28px; }
.kj_intro_actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }
.kj_btn {
	display: inline-flex; align-items: center; gap: 8px;
	height: 44px; padding: 0 20px;
	border-radius: var(--kj-radius);
	font: 600 var(--kj-text-ui)/1 var(--kj-sans);
	text-decoration: none;
	transition: background-color var(--kj-fast) var(--kj-ease), border-color var(--kj-fast) var(--kj-ease), color var(--kj-fast) var(--kj-ease), box-shadow var(--kj-med) var(--kj-ease), transform var(--kj-med) var(--kj-ease);
}
.kj_btn_primary { background: var(--kj-blue); color: var(--kj-on-navy) !important; }
.kj_btn_primary:hover { background: var(--kj-blue-deep); }
.kj_btn_ghost { border: 1px solid var(--kj-rule); color: var(--kj-navy) !important; background: var(--kj-paper); }
.kj_btn_ghost:hover { border-color: var(--kj-blue); color: var(--kj-blue) !important; }
.kj_strip {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	margin-inline: calc(-1 * var(--kj-card-pad-x));   /* card edge to card edge */
	border-top: 1px solid var(--kj-rule-soft);
	background: var(--kj-paper-2);
}
.kj_strip div { padding: 18px 24px 20px; border-inline-start: 1px solid var(--kj-rule-soft); }
.kj_strip div:first-child { border-inline-start: 0; padding-inline-start: var(--kj-card-pad-x); }
.kj_strip dt { font: 500 var(--kj-text-xs)/1.4 var(--kj-sans); color: var(--kj-ink-3); margin-bottom: 4px; }
.kj_strip dd { white-space: nowrap; margin: 0; font: 600 var(--kj-text-ui)/1.4 var(--kj-sans); color: var(--kj-navy); font-variant-numeric: tabular-nums; }
.kj_strip dd a { color: var(--kj-blue); text-decoration: none; }

.page_index_journal:has(.kj_intro) .homepage_image, .page_index_journal:has(.kj_intro) .homepage_about { display: none; }
.page_index_journal .homepage_image img { border-radius: var(--kj-radius-lg); aspect-ratio: auto 900 / 308; }   /* reserves the banner's space before it loads (no jump); the real proportions win once loaded */
.page_index_journal .homepage_about { overflow: hidden; }  /* the live text ends in a row of underscores */
.page_index_journal .current_issue:has(.kj_issue_head) .current_issue_title { display: none; }

/* Issue heading block (issue_toc.tpl override: cover + facts) */
.kj_issue_head { display: grid; grid-template-columns: 148px 1fr; gap: 32px; align-items: start; margin: 0 0 36px; padding-bottom: 32px; border-bottom: 1px solid var(--kj-rule); }
.kj_issue_head img { width: 148px; height: auto; display: block; border-radius: var(--kj-radius-sm); box-shadow: var(--kj-shadow-cover); }
.kj_issue_head h3 { font: var(--kj-weight-bold) var(--kj-text-2xl)/var(--kj-leading-tight) var(--kj-sans) !important; letter-spacing: var(--kj-tracking-display); margin: 2px 0 8px !important; color: var(--kj-navy); }
.kj_issue_meta { font: 500 var(--kj-text-ui)/1.6 var(--kj-sans); color: var(--kj-ink-3); margin: 0 0 18px; }
.kj_issue_meta span + span::before { content: "·"; margin: 0 8px; color: var(--kj-rule); }
.kj_issue_head .kj_issue_desc { font-size: var(--kj-text-md); line-height: 1.7; color: var(--kj-ink-2); margin: 0 0 20px; max-width: 60ch; }
.obj_issue_toc:has(.kj_issue_head) .heading { display: none; }
.kj_issue_head + .heading { display: none; }

.obj_issue_toc .sections .section { margin: 0 0 8px; }
.obj_issue_toc .section > h3,
.obj_issue_toc .section > h2 {
	display: flex; align-items: center; gap: 14px;
	font: var(--kj-weight-semibold) var(--kj-label-size)/1.3 var(--kj-sans) !important;
	letter-spacing: var(--kj-label-tracking);
	text-transform: var(--kj-label-case);
	color: var(--kj-ink-3) !important;
	margin: 30px 0 4px !important;
	padding: 0 !important;
}
.obj_issue_toc .section > h3::after, .obj_issue_toc .section > h2::after { content: ""; flex: 1; height: 1px; background: var(--kj-rule); }
.obj_issue_toc .section > h2::before { display: none; }
.obj_issue_toc .section > h3 .kj_count { color: var(--kj-ink-3); font-weight: 500; letter-spacing: 0; }
.obj_issue_toc .section:first-child > h3 { margin-top: 0 !important; }

/* Article summary rows */
.cmp_article_list > li { margin: 0; padding: 0; border-bottom: 1px solid var(--kj-rule-soft); }
.cmp_article_list > li:last-child { border-bottom: 0; }
.obj_article_summary {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 28px;
	padding: 20px 0 20px;
	position: relative;
}
.obj_article_summary > .title { grid-column: 1; font: var(--kj-weight-semibold) var(--kj-text-read)/var(--kj-leading-snug) var(--kj-sans); margin: 0; letter-spacing: -.003em; }
.obj_article_summary > .title a { color: var(--kj-navy); text-decoration: none; }
.obj_article_summary > .title a:hover { color: var(--kj-blue); text-decoration: underline; }
.obj_article_summary .subtitle { display: block; margin-top: 3px; font: 400 var(--kj-text-ui)/1.55 var(--kj-serif); color: var(--kj-ink-3); }
.obj_article_summary .meta { grid-column: 1; margin: 8px 0 0; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.obj_article_summary .authors { font: 400 var(--kj-text-md)/1.5 var(--kj-serif); color: var(--kj-ink-2); padding: 0; min-width: 0; overflow-wrap: anywhere; }
.obj_article_summary .pages {
	flex: none;
	font: 500 var(--kj-text-sm)/1.4 var(--kj-sans); color: var(--kj-ink-3);
	font-variant-numeric: tabular-nums; padding: 0;
}
.obj_article_summary .published, .obj_article_summary .kj_doi { font: 500 var(--kj-text-sm)/1.5 var(--kj-sans); color: var(--kj-ink-3); margin-top: 4px; }
.obj_article_summary .galleys_links { grid-column: 1; margin: 12px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.obj_article_summary .galleys_links li { margin: 0; }

.obj_galley_link {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	height: auto;
	padding: 6px 12px !important;
	border: 1px solid var(--kj-rule) !important;
	border-radius: var(--kj-radius) !important;
	background: var(--kj-paper) !important;
	color: var(--kj-blue) !important;
	font: 600 var(--kj-text-sm)/1.3 var(--kj-sans) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	white-space: normal;
	text-align: center;
	box-shadow: none !important;
}
.obj_galley_link::before { content: none !important; }
.obj_galley_link:hover { border-color: var(--kj-blue) !important; background: var(--kj-blue-wash) !important; }
.kj_pdf_icon { width: 14px; height: 14px; flex: none; }
.kj_lang_tag { font: 500 var(--kj-text-xs)/1 var(--kj-sans); color: var(--kj-ink-3); padding-inline-start: 8px; border-inline-start: 1px solid var(--kj-rule); }

.kj_more {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	margin-top: 20px; padding: 18px 22px;
	background: var(--kj-blue-wash);
	border-radius: var(--kj-radius);
	font: 500 var(--kj-text-ui)/1.4 var(--kj-sans); color: var(--kj-ink-2);
}
.kj_more a { font-weight: 600; color: var(--kj-blue); text-decoration: none; white-space: nowrap; }
.kj_more a:hover { text-decoration: underline; }
.page_index_journal .current_issue:has(.kj_more) a.read_more { display: none; }

/* Announcements */
.cmp_announcements { display: block; }
.cmp_announcements > h2 { width: auto; }
.cmp_announcements .obj_announcement_summary { padding: 0; width: auto; float: none; }
.obj_announcement_summary h2, .obj_announcement_summary h3 { font: 600 var(--kj-text-lg)/1.4 var(--kj-sans) !important; text-transform: none !important; letter-spacing: -.005em !important; margin: 0 0 6px !important; padding: 0 !important; }
.obj_announcement_summary h2::before, .obj_announcement_summary h3::before { display: none; }
.obj_announcement_summary h2 a, .obj_announcement_summary h3 a { color: var(--kj-navy); text-decoration: none; }
.obj_announcement_summary .date { font: 500 var(--kj-text-sm)/1.4 var(--kj-sans); color: var(--kj-ink-3); margin-bottom: 10px; }
.obj_announcement_summary .summary p { margin: 0 0 8px; max-width: 68ch; }
.obj_announcement_summary .read_more { font: 600 var(--kj-text-ui)/1.4 var(--kj-sans); text-transform: none; color: var(--kj-blue); }
.cmp_announcements .more { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--kj-rule-soft); width: auto; float: none; }
.cmp_announcements .more .obj_announcement_summary { padding: 0; border: 0; }
.cmp_announcements .more h3 { font-size: var(--kj-text-md) !important; }
.page_announcements .obj_announcement_summary { padding: 24px 0; border-bottom: 1px solid var(--kj-rule-soft); }

/* ---------- Issue archive ---------- */

.page_issue_archive .issues_archive { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 36px 28px; margin: 8px 0 0; }
.page_issue_archive .issues_archive > li { margin: 0; padding: 0; border: 0; }
.obj_issue_summary { display: flex; flex-direction: column; }
.obj_issue_summary .cover { float: none; width: 100%; margin: 0 0 14px; padding: 0; order: -1; }
.obj_issue_toc .cover img { height: 250px; width: auto; max-width: 100%; aspect-ratio: auto 17 / 22; }   /* issue page, phones: the parent's 250px-tall cover */
@media (min-width: 992px) { .obj_issue_toc .cover img { width: 100%; height: auto; } }
/* Covers: their space is reserved before they load, so pages don't jump. Archive tiles keep one shape (US Letter) for an even grid. */
.obj_issue_summary .cover img { width: 100%; height: auto; max-height: none; aspect-ratio: 17 / 22; object-fit: cover; object-position: top; border-radius: var(--kj-radius-sm); box-shadow: var(--kj-shadow-cover); transition: transform var(--kj-med) var(--kj-ease), box-shadow var(--kj-med) var(--kj-ease); }
.obj_issue_summary .cover:hover img { transform: translateY(-3px); box-shadow: var(--kj-shadow-cover-hover); }
.obj_issue_summary h2 { font: 600 var(--kj-text-md)/1.4 var(--kj-sans) !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important; padding: 0 !important; }
.obj_issue_summary h2::before { display: none; }
.obj_issue_summary h2 a.title { color: var(--kj-navy); text-decoration: none; }
.obj_issue_summary .series { display: block; font: 600 var(--kj-text-md)/1.4 var(--kj-sans); color: var(--kj-navy); }
.obj_issue_summary .title:not(a) { font-weight: 500; color: var(--kj-ink-3); }
.obj_issue_summary .description { display: none; }
.kj_issue_date { font: 500 var(--kj-text-sm)/1.4 var(--kj-sans); color: var(--kj-ink-3); margin-top: 4px; }
.cmp_pagination { font-family: var(--kj-sans); margin-top: 40px; }

/* Issue TOC page */
.page_issue .obj_issue_toc:has(.kj_issue_head) .cover { display: none; }

/* ---------- Article page ---------- */

.obj_article_details .page_title {
	font: var(--kj-weight-bold) var(--kj-text-3xl)/var(--kj-leading-tight) var(--kj-sans) !important;
	letter-spacing: var(--kj-tracking-display) !important;
	color: var(--kj-navy);
	margin: 0 0 10px !important;
	max-width: 34ch;
}
.obj_article_details .subtitle { font: 400 var(--kj-text-lg)/1.5 var(--kj-serif); color: var(--kj-ink-2); margin: 0 0 22px; max-width: 60ch; }
.obj_article_details .row { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 48px; margin: 28px 0 0; }
.obj_article_details .row::before, .obj_article_details .row::after { display: none; }
.obj_article_details .main_entry, .obj_article_details .entry_details { float: none; width: auto; margin: 0; padding: 0; border: 0; }
.obj_article_details .main_entry .item { padding: 0 0 32px; margin: 0 0 32px; border-bottom: 1px solid var(--kj-rule-soft); }
.obj_article_details .main_entry .item:last-child { border-bottom: 0; }
.obj_article_details .main_entry .item .label { position: relative; padding-bottom: 10px; margin: 0 0 18px; }
.obj_article_details .main_entry .item .label::before { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 28px; height: 3px; background: var(--kj-gold); border-radius: 2px; }
.obj_article_details .main_entry .item .label::after { display: none; }

.obj_article_details .authors { margin: 0; padding: 0 0 26px !important; }
.obj_article_details .authors li { margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; }
.obj_article_details .authors .name { font: 600 var(--kj-text-md)/1.4 var(--kj-sans); color: var(--kj-ink); grid-column: 1; }
.obj_article_details .authors .orcid { grid-column: 2; font-size: 0; }
.obj_article_details .authors .orcid a { font-size: 0 !important; }
.obj_article_details .authors .orcid a::before { content: ""; display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--kj-orcid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ctext x='8' y='11.5' font-family='Arial' font-weight='700' font-size='8' fill='white' text-anchor='middle'%3EiD%3C/text%3E%3C/svg%3E") center/16px no-repeat; vertical-align: -2px; }
.obj_article_details .authors .orcid svg, .obj_article_details .authors .orcid img { display: none; }
.obj_article_details .authors .affiliation { grid-column: 1 / -1; font: 400 var(--kj-text-ui)/1.5 var(--kj-serif); color: var(--kj-ink-3); margin-top: 2px; }

.obj_article_details .doi, .obj_article_details .keywords { font-family: var(--kj-sans); font-size: var(--kj-text-ui); line-height: 1.6; }
.obj_article_details .main_entry .doi { padding-bottom: 18px !important; margin-bottom: 18px !important; }
.obj_article_details .doi .label, .obj_article_details .keywords .label {
	display: inline; position: static; padding: 0; margin: 0 8px 0 0; font: var(--kj-weight-semibold) var(--kj-label-size-sm)/1 var(--kj-sans); letter-spacing: var(--kj-label-tracking); text-transform: var(--kj-label-case); color: var(--kj-ink-3);
}
.obj_article_details .doi .label::before, .obj_article_details .keywords .label::before { display: none; }
.obj_article_details .doi .value a { color: var(--kj-blue); }
.obj_article_details .keywords .value { display: inline; }
.kj_kw { display: inline-block; margin: 4px 6px 0 0; padding: 4px 10px; border-radius: var(--kj-radius-pill); background: var(--kj-ground); font: 500 var(--kj-text-sm)/1.3 var(--kj-sans); color: var(--kj-ink-2); }

.obj_article_details .abstract p { font-size: var(--kj-text-read); line-height: var(--kj-leading-read); max-width: 68ch; }
.obj_article_details .item.downloads_chart .value {
	padding: 18px 18px 10px;
	background: var(--kj-paper);
	border: 1px solid var(--kj-rule-soft);
	border-radius: var(--kj-radius-md);
}
.obj_article_details .usageStatsGraph { max-width: 100%; }
.obj_article_details .usageStatsUnavailable { font: 500 var(--kj-text-ui)/1.5 var(--kj-sans); color: var(--kj-ink-3); padding-bottom: 8px; }

/* References: numbered, one per row with a hairline between, each set in its own direction
   (an Arabic reference in an English article reads right to left, and the other way round),
   long DOIs and URLs wrap instead of running off the page, the row under the pointer is lightly marked. */
.obj_article_details .references .value { counter-reset: kj-ref; }
.obj_article_details .references .value p {
	counter-increment: kj-ref;
	position: relative;
	margin: 0;
	padding: 11px 10px 12px;
	padding-inline-start: 3em;
	border-bottom: 1px solid var(--kj-rule-soft);
	border-radius: 6px;
	font: 400 var(--kj-text-md)/1.65 var(--kj-serif);
	color: var(--kj-ink);
	text-indent: 0;
	text-align: start;
	unicode-bidi: plaintext;
	overflow-wrap: anywhere;
	transition: background-color var(--kj-fast) var(--kj-ease);
}
.obj_article_details .references .value p:last-child { border-bottom: 0; }
.obj_article_details .references .value p:hover { background: var(--kj-ground); }
.obj_article_details .references .value p::before {
	content: counter(kj-ref);
	position: absolute;
	inset-inline-start: 0;
	top: 13px;
	width: 2.2em;
	text-align: end;
	font: 600 var(--kj-text-sm)/1.5 var(--kj-sans);
	font-variant-numeric: tabular-nums;
	color: var(--kj-ink-3);
}
.obj_article_details .references .value p a {
	font: 500 var(--kj-text-sm)/1.5 var(--kj-sans);
	color: var(--kj-blue);
	text-decoration: underline;
	text-decoration-color: var(--kj-rule);
	text-underline-offset: 3px;
}
.obj_article_details .references .value p a:hover { text-decoration-color: currentColor; }
@media (max-width: 991px) {
	.obj_article_details .references .value p { padding: 10px 6px 11px; padding-inline-start: 2.4em; font-size: var(--kj-text-ui); }
	.obj_article_details .references .value p::before { top: 12px; width: 1.7em; }
}

.obj_article_details .entry_details { border: 0 !important; }
.obj_article_details .entry_details .item { border: 0; padding: 0 0 22px; margin: 0 0 22px; border-bottom: 1px solid var(--kj-rule-soft); }
.obj_article_details .entry_details .item:last-child { border-bottom: 0; }
.obj_article_details .entry_details .item .label {
	display: block; background: transparent; margin: 0 0 8px; padding: 0;
	font: var(--kj-weight-semibold) var(--kj-label-size-sm)/1.3 var(--kj-sans); letter-spacing: var(--kj-label-tracking); text-transform: var(--kj-label-case); color: var(--kj-ink-3);
}
.obj_article_details .entry_details .item .value, .obj_article_details .entry_details .sub_item .value { font: 500 var(--kj-text-ui)/1.55 var(--kj-sans); color: var(--kj-ink); padding: 0; }
.obj_article_details .entry_details .sub_item { margin: 14px 0 0; padding: 0; }
.obj_article_details .entry_details .galleys_links li { margin: 0 0 8px; }
.obj_article_details .entry_details .item.galleys { padding-bottom: 22px; }
.obj_article_details .entry_details .galleys .obj_galley_link {
	width: 100%; justify-content: center; min-height: 48px; height: auto; font-size: var(--kj-text-ui) !important;
	background: var(--kj-blue) !important; color: var(--kj-on-navy) !important; border-color: var(--kj-blue) !important;
	box-shadow: var(--kj-shadow-btn) !important;
}
.obj_article_details .entry_details .galleys .obj_galley_link:hover { background: var(--kj-blue-deep) !important; }
.obj_article_details .entry_details .galleys .kj_lang_tag { color: var(--kj-on-navy-2); border-color: var(--kj-on-navy-line); }
.obj_article_details .citation_display .value { font: 400 var(--kj-text-sm)/1.6 var(--kj-serif) !important; color: var(--kj-ink-2) !important; }
.citation_formats_button { font: 500 var(--kj-text-sm)/1 var(--kj-sans) !important; border-radius: var(--kj-radius) !important; border: 1px solid var(--kj-rule) !important; background: var(--kj-paper) !important; color: var(--kj-ink-2) !important; padding: 10px 12px !important; margin-top: 12px; text-transform: none !important; }
.obj_article_details .entry_details .license p { font: 400 var(--kj-text-sm)/1.55 var(--kj-sans); color: var(--kj-ink-3); text-align: start !important; }
.obj_article_details .entry_details .license img { margin: 6px 0 8px; }
.obj_article_details .author_bios .sub_item .label { font: 600 var(--kj-text-md)/1.4 var(--kj-sans); color: var(--kj-ink); margin-bottom: 4px; text-transform: none; letter-spacing: 0; }
.obj_article_details .author_bios .sub_item .value p { font-size: var(--kj-text-md); }

/* ---------- Galley (PDF viewer) ---------- */

.header_view { background: var(--kj-navy) !important; height: 56px !important; }
.header_view a { color: var(--kj-on-navy) !important; font: 600 var(--kj-text-ui)/56px var(--kj-sans) !important; }
.header_view .return { background: transparent !important; border-inline-end: 1px solid var(--kj-on-navy-rule) !important; width: 56px !important; }
.header_view .title { padding: 0 20px !important; }
.header_view .download { background: var(--kj-gold) !important; color: var(--kj-navy) !important; padding: 0 22px !important; }
.header_view .download .label { font-family: var(--kj-sans) !important; color: var(--kj-navy) !important; }
.galley_view iframe { top: 56px !important; }

/* ---------- Static pages, forms, tables ---------- */

.page table { border-collapse: collapse; width: 100%; font-family: var(--kj-sans); font-size: var(--kj-text-ui); margin: 16px 0 28px; }
.page th, .page td { text-align: start; padding: 11px 14px; border-bottom: 1px solid var(--kj-rule-soft); vertical-align: top; }
.page th { font-weight: var(--kj-weight-semibold); color: var(--kj-ink-3); font-size: var(--kj-label-size-sm); letter-spacing: var(--kj-label-tracking); text-transform: var(--kj-label-case); background: var(--kj-paper-2); border-bottom-color: var(--kj-rule); }
.page td { color: var(--kj-ink); }
.page td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.kj_toc { margin: 0 0 36px; padding: 18px 22px; background: var(--kj-paper-2); border: 1px solid var(--kj-rule-soft); border-radius: var(--kj-radius); columns: 2; column-gap: 32px; list-style: none; }
.kj_toc li { margin: 0; padding: 4px 0; font: 500 var(--kj-text-ui)/1.5 var(--kj-sans) !important; break-inside: avoid; }
.kj_toc a { text-decoration: none; color: var(--kj-blue); }
.kj_toc a:hover { text-decoration: underline; }
.kj_note { margin: 20px 0; padding: 14px 18px; border: 1px solid var(--kj-note-line); background: var(--kj-note-bg); border-radius: var(--kj-radius); font: 500 var(--kj-text-ui)/1.6 var(--kj-sans); color: var(--kj-note-ink); }
.kj_note strong { color: var(--kj-note-ink-strong); }
.kj_mark { background: var(--kj-note-mark); color: var(--kj-note-ink); padding: 1px 6px; border-radius: 4px; font: 600 .82em/1.4 var(--kj-sans); white-space: nowrap; }

.cmp_form fieldset { border: 0; padding: 0; margin: 0 0 24px; }
.cmp_form legend { font: var(--kj-weight-semibold) var(--kj-label-size)/1.3 var(--kj-sans); letter-spacing: var(--kj-label-tracking); text-transform: var(--kj-label-case); color: var(--kj-navy); margin-bottom: 14px; }
.cmp_form .label, .cmp_form label { font: 600 var(--kj-text-sm)/1.4 var(--kj-sans); color: var(--kj-ink); }
.cmp_form input[type="text"], .cmp_form input[type="email"], .cmp_form input[type="password"], .cmp_form input[type="search"], .cmp_form select, .cmp_form textarea,
.page_search input[type="text"], .page_search select {
	height: 44px; padding: 0 14px; border: 1px solid var(--kj-rule); border-radius: var(--kj-radius); background: var(--kj-paper);
	font: 400 var(--kj-text-md)/44px var(--kj-sans); color: var(--kj-ink); box-shadow: none; box-sizing: border-box; max-width: 100%;
}
.cmp_form input:focus, .page_search input:focus { border-color: var(--kj-blue); box-shadow: var(--kj-ring); outline: 0; }
.page_login { max-width: none; }
.page_login .cmp_form { max-width: 420px; }
.page_login .fields > div { margin-bottom: 18px; }
.page_login .fields input[type="text"], .page_login .fields input[type="password"] { width: 100%; }
.page_login .buttons { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.page_login .buttons a.register { font: 600 var(--kj-text-ui)/1 var(--kj-sans); text-decoration: none; }
.page_search .search_input input { width: 100%; font-size: var(--kj-text-read); height: 52px; }
.page_search .search_advanced { border: 1px solid var(--kj-rule-soft); border-radius: var(--kj-radius); padding: 18px 22px; margin: 18px 0; }
.page_search .search_advanced legend { padding: 0 6px; }
.page_search .search_results { margin-top: 12px; }
.cmp_notification { border: 1px solid var(--kj-rule); border-inline-start-width: 1px; border-radius: var(--kj-radius); background: var(--kj-paper-2); font: 500 var(--kj-text-ui)/1.6 var(--kj-sans); padding: 16px 20px; }

/* Editorial team */
.kj_board_section { margin: 0 0 40px; }
.kj_board { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 32px; list-style: none; margin: 0; padding: 0; }
.kj_board.kj_lead { grid-template-columns: 1fr; }
.kj_board li { padding: 16px 0; border-bottom: 1px solid var(--kj-rule-soft); margin: 0; }
.kj_board .n { display: flex; align-items: center; gap: 8px; font: 600 var(--kj-text-md)/1.4 var(--kj-sans) !important; color: var(--kj-ink); }
.kj_board .r { display: block; font: 600 var(--kj-text-xs)/1.4 var(--kj-sans); color: var(--kj-gold-ink); letter-spacing: .02em; margin: 3px 0 0; }
.kj_board .a { display: block; font: 400 var(--kj-text-ui)/1.55 var(--kj-serif); color: var(--kj-ink-3); margin-top: 3px; }
.kj_board .orc { display: inline-block; width: 15px; height: 15px; border-radius: 50%; background: var(--kj-orcid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ctext x='8' y='11.5' font-family='Arial' font-weight='700' font-size='8' fill='white' text-anchor='middle'%3EiD%3C/text%3E%3C/svg%3E") center/15px no-repeat; }
.kj_board.kj_lead li { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: baseline; }
.kj_board.kj_lead .r { order: -1; margin: 0; font-size: var(--kj-text-sm); }

/* Indexing grid */
.kj_index_page { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; list-style: none; padding: 0; margin: 8px 0 32px; }
.kj_index_page li { margin: 0; border: 1px solid var(--kj-rule-soft); border-radius: var(--kj-radius-md); padding: 18px; display: flex; flex-direction: column; gap: 12px; background: var(--kj-paper); }
.kj_index_page .logo { height: 46px; display: flex; align-items: center; }
.kj_index_page img { max-height: 40px; max-width: 160px; width: auto; height: auto; }
.kj_index_page .nm { font: 600 var(--kj-text-ui)/1.3 var(--kj-sans) !important; color: var(--kj-navy); }
.kj_index_page .ds { font: 400 var(--kj-text-sm)/1.5 var(--kj-sans) !important; color: var(--kj-ink-3) !important; margin: 0; }
.kj_index_page a.go { font: 600 var(--kj-text-sm)/1.3 var(--kj-sans); text-decoration: none; margin-top: auto; }

/* Contact */
.kj_contact { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 4px 0 8px; }
.kj_contact > div { border: 1px solid var(--kj-rule-soft); border-radius: var(--kj-radius-md); padding: 22px 24px; background: var(--kj-paper-2); }
.kj_contact h3 { margin: 0 0 4px !important; font-size: var(--kj-text-base) !important; }
.kj_contact .role { font: 600 var(--kj-text-xs)/1.4 var(--kj-sans); color: var(--kj-gold-ink); margin: 0 0 12px; }
.kj_contact p { font-size: var(--kj-text-md) !important; line-height: 1.7 !important; margin: 0; }
.kj_address { margin-top: 28px; font-size: var(--kj-text-md); line-height: 1.8; }

/* 404 */
.kj_404 { text-align: start; padding: 24px 0; }
.kj_404 .code { font: 700 var(--kj-text-sm)/1 var(--kj-sans); letter-spacing: .1em; color: var(--kj-gold-ink); margin-bottom: 14px; }
.kj_404 ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }

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

.pkp_structure_footer_wrapper { background: var(--kj-navy); color: var(--kj-on-navy-2); border: 0; }
.pkp_structure_footer { display: block; }   /* width and gutter: U29 */
.pkp_footer_content { padding: 56px 0 0; text-align: start; float: none; width: auto; }
.pkp_brand_footer { display: flex !important; align-items: center; justify-content: space-between; gap: 24px; float: none; width: auto; padding: 22px 0 30px; border-top: 1px solid var(--kj-on-navy-rule); margin-top: 44px; }
.pkp_brand_footer a { opacity: .7; }
.pkp_brand_footer img { max-width: 92px; filter: brightness(0) invert(1); }
.kj_footer_legal { font: 400 var(--kj-text-sm)/1.5 var(--kj-sans); color: var(--kj-on-navy-3); }
.kj_footer_legal a { color: var(--kj-on-navy); }
.kj_footer { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 40px; }
.kj_footer h3 { font: var(--kj-weight-semibold) var(--kj-label-size-sm)/1.3 var(--kj-sans); letter-spacing: var(--kj-label-tracking); text-transform: var(--kj-label-case); color: var(--kj-gold); margin: 0 0 16px; }
.kj_footer p, .kj_footer li { font: 400 var(--kj-text-ui)/1.75 var(--kj-sans); color: var(--kj-on-navy-2); margin: 0; }
.kj_footer ul { list-style: none; margin: 0; padding: 0; }
.kj_footer a { color: var(--kj-on-navy); text-decoration: none; }
.kj_footer a:hover { text-decoration: underline; }
.kj_footer .kj_footer_mark { height: 34px; width: auto; filter: brightness(0) invert(1); margin-bottom: 16px; display: block; }
.kj_footer .kj_issn { font-variant-numeric: tabular-nums; }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
	.kj_strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.kj_strip div:nth-child(3) { border-inline-start: 0; padding-inline-start: var(--kj-card-pad-x); }
	.kj_strip div:nth-child(n+3) { border-top: 1px solid var(--kj-rule-soft); }
	.kj_footer { grid-template-columns: 1fr 1fr; }
	.obj_article_details .row { grid-template-columns: 1fr; }
	.obj_article_details .entry_details { order: -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
	.obj_article_details .entry_details .galleys { grid-column: 1 / -1; }
}

@media (max-width: 991px) {
	.pkp_site_name_wrapper { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; }
	.pkp_site_name .is_img img { max-height: 40px !important; }
	.pkp_site_nav_toggle {
		position: static; order: 2; flex: none;
		width: 44px; height: 44px; border-radius: var(--kj-radius);
		background: var(--kj-blue); border: 0;
	}
	.pkp_site_nav_toggle > span { background: var(--kj-on-navy); }
	.pkp_site_nav_toggle > span::before, .pkp_site_nav_toggle > span::after { background: var(--kj-on-navy); }
	.pkp_navigation_user_wrapper { position: static; }
	.pkp_navigation_primary_row { margin: 0; padding: 0; }
	.kj_intro p { font-size: var(--kj-text-base); }
	.kj_strip { grid-template-columns: 1fr 1fr; }
	.kj_strip div, .kj_strip div:first-child, .kj_strip div:nth-child(3) { padding: 14px var(--kj-card-pad-x) 16px; }
	.kj_issue_head { grid-template-columns: 96px 1fr; gap: 18px; }
	.kj_issue_head img { width: 96px; }
	.kj_issue_head .kj_issue_desc { grid-column: 1 / -1; }
	.kj_issue_head .kj_intro_actions { grid-column: 1 / -1; margin-bottom: 0; }
	.obj_article_summary { display: block; }
	.cmp_announcements .more { grid-template-columns: 1fr; }
	.kj_more { flex-direction: column; align-items: flex-start; }
	.obj_article_details .entry_details { grid-template-columns: 1fr; }
	.kj_board, .kj_index_page, .kj_contact { grid-template-columns: 1fr; }
	.kj_board.kj_lead li { grid-template-columns: 1fr; gap: 2px; }
	.kj_toc { columns: 1; }
	.page_issue_archive .issues_archive { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px 18px; }
	.kj_footer { grid-template-columns: 1fr; gap: 32px; }
	.pkp_brand_footer { flex-direction: column; align-items: flex-start; }
}

/* Article page: full width and the sidebar hidden, U29 */
.obj_article_details .entry_details .item,
.obj_article_details .entry_details .sub_item { background: none !important; }
.obj_article_details .entry_details .item .label,
.obj_article_details .entry_details .sub_item .label,
.obj_article_details .main_entry .item .label { background: none !important; border: 0 !important; }
.obj_article_details .entry_details .item .label::after,
.obj_article_details .entry_details .sub_item .label::after,
.obj_article_details .main_entry .item .label::after,
.obj_article_details .author_bios .sub_item .label::after { display: none !important; }
.obj_article_details .author_bios .sub_item .label::before { display: none; }
.obj_article_details .author_bios .sub_item .label { padding: 0; margin: 0 0 6px; }
.obj_article_details .entry_details .item.galleys { padding-top: 0; }
.obj_article_details .entry_details .issue .sub_item:first-child { margin-top: 0; }
.obj_article_details .entry_details .issue .title { font: 600 var(--kj-text-ui)/1.5 var(--kj-sans); color: var(--kj-blue); text-decoration: none; }
.obj_article_details .main_entry .item.doi, .obj_article_details .main_entry .item.keywords { padding-bottom: 18px; margin-bottom: 18px; }
.obj_article_details .authors .orcid { align-self: center; }
.pkp_block .title { display: block; }
.obj_issue_toc .sections .section, .obj_issue_toc .sections { margin-inline: 0 !important; padding-inline: 0 !important; }
.kj_intro h2.kj_intro_title { max-width: 36ch; }
.obj_issue_toc .section > h2, .obj_issue_toc .section > h3 { position: static !important; left: auto !important; background: none !important; }
.obj_issue_toc .section::before { display: none !important; }
.obj_article_details .entry_details .item { box-shadow: none !important; border-radius: 0 !important; margin: 0 0 22px !important; padding: 0 0 22px !important; border-bottom: 1px solid var(--kj-rule-soft) !important; }
.obj_article_details .entry_details .item:last-child { border-bottom: 0 !important; }
.obj_article_details .entry_details .item > .label, .obj_article_details .entry_details .sub_item > .label,
.obj_article_details .entry_details .sub_item:not(:first-child) .label { padding: 0 !important; margin: 0 0 8px !important; border: 0 !important; display: block !important; }
.obj_article_details .entry_details .item > .value, .obj_article_details .entry_details .sub_item .value { padding: 0 !important; }
.obj_article_details .entry_details .label::before, .obj_article_details .entry_details .label::after { display: none !important; }
.cmp_breadcrumbs ol { font-size: var(--kj-text-sm) !important; line-height: 1.5 !important; margin-bottom: 0 !important; padding: 0 !important; }
.obj_article_details .authors li { grid-template-columns: max-content 1fr; }
.obj_article_details .authors .orcid { grid-row: 1; grid-column: 2; justify-self: start; }
.obj_article_details .authors .affiliation { grid-row: 2; }
.obj_article_details .main_entry .item.authors { padding-bottom: 8px !important; }

@media (max-width: 991px) {
	/* Logo: phones show the KUJHSS wordmark part of the same uploaded image */
	.pkp_site_name .is_img { width: 168px; overflow: hidden; }
	.pkp_site_name .is_img img { max-width: none; height: 40px; }
	.pkp_site_nav_toggle { position: relative !important; }
	.pkp_site_nav_toggle > span {
		position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; border: 0; width: 18px; height: 2px; border-radius: 1px;
		background: var(--kj-on-navy); font-size: 0; color: transparent; overflow: visible;
	}
	.pkp_site_nav_toggle > span::before, .pkp_site_nav_toggle > span::after {
		content: ""; position: absolute; left: 0; width: 18px; height: 2px; border-radius: 1px; background: var(--kj-on-navy);
	}
	.pkp_site_nav_toggle > span::before { top: -6px; }
	.pkp_site_nav_toggle > span::after { top: 6px; }
	.kj_issue_head { grid-template-columns: 84px 1fr; gap: 6px 16px; }
	.kj_issue_head > div { display: contents; }
	.kj_issue_head > a { grid-row: 1 / span 2; }
	.kj_issue_head img { width: 84px; }
	.kj_issue_head h3 { grid-column: 2; align-self: end; }
	.kj_issue_head .kj_issue_meta { grid-column: 2; margin: 0; align-self: start; }
	.kj_issue_head .kj_issue_desc { grid-column: 1 / -1; margin-top: 14px; }
	.kj_issue_meta span + span::before { content: none; }
	.kj_issue_meta span { display: block; }
}

/* Phone menu, open state (task 129: the desktop menu rules leaked into it, and the
   submenus came out dark on navy). One navy panel: items, indented submenus, search, user links. */
@media (max-width: 991px) {
	.pkp_site_nav_menu {
		background: var(--kj-navy);
		padding: 6px 20px 22px;
		box-shadow: var(--kj-shadow-panel);
	}
	.pkp_navigation_primary_row { background: transparent; }
	.pkp_navigation_primary_wrapper { display: block; }
	#navigationPrimary { display: block; }
	#navigationPrimary > li { display: block; border-bottom: 1px solid var(--kj-on-navy-rule); }
	#navigationPrimary > li > a, #navigationPrimary > li:first-child > a { padding: 14px 0; font-size: var(--kj-text-md); }
	#navigationPrimary > li > a::after { display: none; }
	#navigationPrimary > li > ul {
		position: static !important; display: block; float: none;
		margin: -4px 0 0; padding: 0 0 10px; min-width: 0;
		background: transparent; border: 0; border-radius: 0; box-shadow: none;
	}
	#navigationPrimary ul li { display: block; }
	#navigationPrimary ul a { padding: 7px 0; padding-inline-start: 14px; font-size: var(--kj-text-ui); color: var(--kj-on-navy-2); background: transparent; text-transform: none; letter-spacing: 0; }
	#navigationPrimary ul a:hover, #navigationPrimary ul a:focus { color: var(--kj-on-navy); background: transparent; text-decoration: underline; }
	.pkp_navigation_search_wrapper { margin: 18px 0 0; padding: 0; border: 0; }
	.pkp_navigation_search_wrapper a { justify-content: center; width: 100%; box-sizing: border-box; padding: 12px 14px; }
	.pkp_navigation_user_wrapper { display: block; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--kj-on-navy-rule); }
	#navigationUser { display: flex; gap: 24px; margin: 0; padding: 0; border: 0; }
	.pkp_navigation_user > li { margin: 0; }
	.pkp_navigation_user > li > a { color: var(--kj-on-navy) !important; font-size: var(--kj-text-ui); padding: 6px 0; }
	/* Opening (see the motion block). The parent hides the closed menu with display: none, which can't animate;
	   it stays displayed here and is hidden by clip-path and visibility instead. The panel is tall, so it opens
	   a little slower than a dropdown. */
	.pkp_site_nav_menu {
		display: block; visibility: hidden; pointer-events: none;
		opacity: 0; clip-path: inset(0 0 100% 0);
		transition: clip-path var(--kj-close) var(--kj-exit), opacity var(--kj-close) var(--kj-exit), visibility 0s linear var(--kj-close);
	}
	.pkp_site_nav_menu--isOpen {
		visibility: visible; pointer-events: auto;
		opacity: 1; clip-path: inset(0 0 -48px 0);
		transition: clip-path calc(var(--kj-open) * 1.3) var(--kj-enter), opacity calc(var(--kj-open) * .6) var(--kj-enter), visibility 0s;
	}
	.pkp_site_nav_menu #navigationPrimary > li, .pkp_site_nav_menu .pkp_navigation_search_wrapper, .pkp_site_nav_menu .pkp_navigation_user_wrapper {
		opacity: 0; transform: translateY(-6px);
		transition: opacity var(--kj-close) var(--kj-exit), transform var(--kj-close) var(--kj-exit);
	}
	.pkp_site_nav_menu .pkp_navigation_search_wrapper { --i: 8; }
	.pkp_site_nav_menu .pkp_navigation_user_wrapper { --i: 9; }
	.pkp_site_nav_menu--isOpen #navigationPrimary > li, .pkp_site_nav_menu--isOpen .pkp_navigation_search_wrapper, .pkp_site_nav_menu--isOpen .pkp_navigation_user_wrapper {
		opacity: 1; transform: none;
		transition: opacity var(--kj-open) var(--kj-enter) calc(var(--kj-items-delay) + var(--i, 0) * var(--kj-stagger)),
			transform var(--kj-open) var(--kj-enter) calc(var(--kj-items-delay) + var(--i, 0) * var(--kj-stagger));
	}
	.pkp_site_nav_toggle { transition: background-color var(--kj-fast) var(--kj-ease), transform var(--kj-fast) var(--kj-ease); }
	.pkp_site_nav_toggle:active { transform: scale(.94); }
	.pkp_site_nav_toggle > span, .pkp_site_nav_toggle > span::before, .pkp_site_nav_toggle > span::after {
		transition: transform var(--kj-med) var(--kj-ease), top var(--kj-med) var(--kj-ease), background-color var(--kj-fast) linear;
	}
	/* toggle turns into a close mark while the menu is open */
	.pkp_site_nav_toggle--transform > span { background: transparent !important; }
	.pkp_site_nav_toggle--transform > span::before { top: 0 !important; transform: rotate(45deg); }
	.pkp_site_nav_toggle--transform > span::after { top: 0 !important; transform: rotate(-45deg); }
}

.cmp_breadcrumbs, .cmp_breadcrumbs li, .cmp_breadcrumbs a, .cmp_breadcrumbs span { font-size: var(--kj-text-sm) !important; }
.pkp_structure_main, .obj_article_details .main_entry, .obj_article_details .entry_details { min-width: 0; }
.obj_article_details .doi .value, .obj_article_details .citation_display .value, .obj_article_summary .title { overflow-wrap: anywhere; }
@media (max-width: 1100px) {
	.obj_article_details .entry_details { display: contents !important; }
	.obj_article_details .entry_details .item.galleys { order: -1; margin-bottom: 8px !important; border-bottom: 0 !important; }
	.obj_article_details .entry_details .item { margin: 0 0 18px !important; }
}

/* PDF viewer page */
.header_view { display: flex !important; align-items: center; position: fixed; inset: 0 0 auto 0; height: 60px !important; background: var(--kj-navy) !important; z-index: 2; }
.header_view a { position: static !important; float: none !important; height: 60px !important; line-height: normal !important; display: flex !important; align-items: center; }
.header_view .return { width: 60px !important; justify-content: center; font: 500 var(--kj-text-lg)/1 var(--kj-sans) !important; border-inline-end: 1px solid var(--kj-on-navy-rule) !important; }
.kj_hv_mark { padding: 0 20px !important; border-inline-end: 1px solid var(--kj-on-navy-rule); }
.kj_hv_mark img { height: 18px; width: auto; filter: brightness(0) invert(1); }
.header_view .title { flex: 1; min-width: 0; flex-direction: column; align-items: flex-start !important; justify-content: center; padding: 0 22px !important; max-width: none !important; }
.kj_hv_t { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--kj-text-ui)/1.3 var(--kj-sans); color: var(--kj-on-navy); }
.kj_hv_m { display: block; font: 500 var(--kj-text-xs)/1.4 var(--kj-sans); color: var(--kj-on-navy-3); margin-top: 2px; }
.header_view .download { padding: 0 24px !important; font: 600 var(--kj-text-ui)/1 var(--kj-sans) !important; }
.header_view .download .label { display: inline !important; }
.galley_view { position: fixed !important; inset: 60px 0 0 0 !important; overflow: auto; background: var(--kj-viewer); }
.kj_pdf_stage { padding: 32px 16px 48px; display: flex; justify-content: center; }
.kj_pdf_stage img { width: min(840px, 100%); height: auto; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); background: var(--kj-paper);   /* a sheet of paper on the viewer backdrop */ }
@media (max-width: 700px) { .kj_hv_mark, .kj_hv_m { display: none !important; } .header_view .download { padding: 0 14px !important; } }

/* Dropdowns: real show/hide instead of the parent theme's off-screen offset (which overflows in RTL) */
.pkp_structure_page { overflow-x: clip; }
@media (min-width: 992px) {
	#navigationPrimary > li { position: relative; }
	/* Dropdowns: open and close in 300 ms with no delay (Kodo, 2026-11-02), box and items together, so moving
	   from one menu item to the next feels immediate. A click opens them too (the parent's dropdown script adds
	   .show); its inline positioning (a 47px translate) is overridden so the box stays right under the bar. */
	#navigationPrimary > li > ul {
		display: block; position: absolute; top: 100% !important; left: 0 !important; right: auto !important;
		transform: none !important;
		background: var(--kj-paper); z-index: 100; margin: 0;
		visibility: hidden; pointer-events: none;
		opacity: 0; clip-path: inset(0 -40px 100% -40px);
		transition: clip-path .3s var(--kj-ease), opacity .3s var(--kj-ease), visibility 0s linear .3s;
	}
	[dir="rtl"] #navigationPrimary > li > ul { left: auto !important; right: 0 !important; }
	#navigationPrimary > li:hover > ul, #navigationPrimary > li:focus-within > ul, #navigationPrimary > li > ul.show {
		visibility: visible; pointer-events: auto;
		opacity: 1; clip-path: inset(0 -40px -48px -40px);   /* room for the shadow */
		transition: clip-path .3s var(--kj-ease), opacity .3s var(--kj-ease), visibility 0s;
	}
	#navigationPrimary > li > ul > li { opacity: 0; transition: opacity .3s var(--kj-ease); }
	#navigationPrimary > li:hover > ul > li, #navigationPrimary > li:focus-within > ul > li, #navigationPrimary > li > ul.show > li { opacity: 1; }
	#navigationPrimary > li > ul a { transition: background-color .3s var(--kj-ease), color .3s var(--kj-ease), text-decoration-color .3s var(--kj-ease); }
	#navigationPrimary > li:hover > a::after, #navigationPrimary > li:focus-within > a::after { transform: scaleX(1); }
	#navigationPrimary ul li { display: block; float: none; }
}
[dir="rtl"] #navigationPrimary > li:first-child > a { padding-inline-start: 0; }
.pkp_navigation_user > li > a { white-space: nowrap; }
.kj_board.kj_lead li { grid-template-columns: 180px 1fr; row-gap: 2px; }
.kj_board.kj_lead .r { grid-row: 1 / span 2; }
.kj_board.kj_lead .n, .kj_board.kj_lead .a { grid-column: 2; }
.kj_board.kj_lead .a { margin-top: 0; }
[dir="rtl"] .pkp_site_name .is_img { direction: ltr; }
.cmp_breadcrumbs .separator { font-size: 0 !important; }
.cmp_breadcrumbs .separator::before { content: "/"; font-size: var(--kj-text-sm); font-weight: 500; color: var(--kj-ink-3); }

/* Search */
.page_search .search_input { margin-bottom: 14px; }
.page_search .search_advanced { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end; }
.page_search .search_advanced legend { width: 100%; }
.page_search .search_advanced select { height: 40px; padding: 0 10px; border: 1px solid var(--kj-rule); border-radius: var(--kj-radius); font: 500 var(--kj-text-ui)/1 var(--kj-sans); background: var(--kj-paper); color: var(--kj-ink); margin-inline-end: 4px; }
.page_search .search_advanced .label { display: block; font: 600 var(--kj-text-sm)/1.4 var(--kj-sans); color: var(--kj-ink-3); margin-bottom: 6px; text-transform: none; letter-spacing: 0; }
.page_search .search_advanced input[type="text"] { width: 260px; }
.page_search .submit { display: inline-flex !important; align-items: center; gap: 8px; }
.page_search .submit .fa { font-size: var(--kj-text-sm); }
.page_search .search_results { border-top: 1px solid var(--kj-rule); margin-top: 28px; padding-top: 4px; }
.page_search .cmp_pagination { display: flex; justify-content: space-between; align-items: center; font: 500 var(--kj-text-ui)/1.4 var(--kj-sans); color: var(--kj-ink-3); border-top: 1px solid var(--kj-rule); padding-top: 18px; }
.page_search .cmp_pagination a { font-weight: 600; }
.obj_article_summary .published { display: none; }
.page_search button.submit { background: var(--kj-blue) !important; color: var(--kj-on-navy) !important; border: 0 !important; border-radius: var(--kj-radius) !important; height: 44px; padding: 0 22px !important; font: 600 var(--kj-text-ui)/44px var(--kj-sans) !important; box-shadow: none !important; text-transform: none !important; }
.page_search button.submit .fa { background: none !important; border: 0 !important; color: var(--kj-on-navy) !important; padding: 0 !important; position: static !important; }
.page_search .search_advanced legend { margin-bottom: 4px; }
.page_search .search_advanced .date_range { display: flex; gap: 24px; flex-wrap: wrap; }
.page_search .search_advanced .date_range .label { text-transform: none !important; font-size: var(--kj-text-sm) !important; }

/* === U29 Global layout (page width, columns, spacing) · task 128 === */
/*
   The grid every page sits on. Header, content and footer share one width and one gutter, so their edges
   line up on every page and screen; columns, cards and the gaps between sections all come from the tokens
   below. Values slide smoothly between phone and desktop (clamp), so the layout needs few breakpoints.
   Later tasks: size and space page parts with these tokens, never with new literal widths or margins.

   Tokens                                 desktop 1440   phone 390
   - --kj-page     content width             1152           -       edge to edge of the cards
   - --kj-gutter   side margin of the page     24          16       header, content and footer alike
   - --kj-max      page box (page + gutters)  1200           -       the old token, now derived
   - --kj-side     sidebar column             300           -       240 at 992 (tablets)
   - --kj-gap      main-to-sidebar gap         56           -       40 at 992
   - --kj-page-top / --kj-page-bottom  space above and below the content: 48 / 72 desktop, 24 / 48 phone
   - --kj-section  between cards and sections in the main column    40          24
   - --kj-stack    between sidebar blocks                           40          40
   - --kj-card-pad-y / --kj-card-pad-x  padding inside a card    44 / 48     28 / 20
   - --kj-card-radius  corner of a page card                       10           8
   - --kj-measure  longest comfortable line of reading text: 70ch

   Columns
   - Two columns from 992px up (the parent theme's breakpoint): main, then sidebar. Under 992px one column,
     the sidebar after the main content. Breakpoints can't use variables: 992px is written out where needed.
   - RTL: the grid follows dir="rtl", so in Arabic and Kurdish the sidebar is on the left and the main
     column on the right, with no extra rules. Use logical properties (inline-start/-end) in new rules.
   - Pages without sidebar blocks get one full-width column.
   - Article pages (article/view) hide the sidebar and give the article the full width. The sidebar's language
     links are the only ones on the live site (the header switcher, U05, needs a template), so they stay as a
     small switch above the article; once a header switcher (.kj_lang) is on the page, it goes too.

   Reusable classes (for HTML pasted into OJS settings, custom blocks and pages, and for later tasks)
   - .kj_card   a paper card with the standard padding, corner, shadow and space below
   - .kj_bleed  inside a card: runs to the card's edges (a strip, a table, an image), content keeps the padding
   - .kj_stack  children spaced by --kj-section (set --kj-stack-gap on it for another step)
   - .kj_grid   responsive columns: as many as fit at --kj-col (default 240px) wide, one on phones
*/

:root {
	--kj-page: 1152px;
	--kj-gutter: clamp(16px, 2.5vw, 24px);
	--kj-max: calc(var(--kj-page) + 2 * var(--kj-gutter));
	--kj-side: clamp(240px, 21vw, 300px);
	--kj-gap: clamp(32px, 4vw, 56px);
	--kj-page-top: clamp(24px, 2.5vw + 12px, 48px);
	--kj-page-bottom: clamp(48px, 5vw, 72px);
	--kj-section: clamp(24px, 1.6vw + 17px, 40px);
	--kj-stack: var(--kj-space-10);
	--kj-card-pad-y: clamp(28px, 1.6vw + 21px, 44px);
	--kj-card-pad-x: clamp(20px, 2.8vw + 8px, 48px);
	--kj-card-radius: var(--kj-radius-lg);
	--kj-measure: 70ch;
}
@media (max-width: 991px) {
	:root { --kj-card-radius: var(--kj-radius-md); }
}

/* Page frame: full width; the header, content and footer each centre their own box */
.pkp_structure_page { width: 100%; max-width: none; margin: 0; background: transparent; box-shadow: none; }
.pkp_head_wrapper, .pkp_structure_content, .pkp_structure_footer {
	box-sizing: border-box;
	width: auto !important;   /* the parent theme fixes widths per breakpoint */
	max-width: var(--kj-max);
	margin-inline: auto;
	padding-inline: var(--kj-gutter);
}

/* Columns */
.pkp_structure_content {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--kj-section) var(--kj-gap);
	padding-block: var(--kj-page-top) var(--kj-page-bottom);
	background: transparent;
}
@media (min-width: 992px) {
	.pkp_structure_content.has_sidebar { grid-template-columns: minmax(0, 1fr) var(--kj-side); }
}
.pkp_structure_content::before, .pkp_structure_content::after,
.pkp_structure_main::before, .pkp_structure_main::after { display: none !important; }
.pkp_structure_main, .pkp_structure_sidebar { float: none; width: auto; min-width: 0; margin: 0; padding: 0; background: transparent; }
.pkp_structure_sidebar { overflow-wrap: anywhere; }
.pkp_structure_sidebar > .pkp_block { margin: 0 0 var(--kj-stack); }
.pkp_structure_sidebar > .pkp_block:last-child { margin-bottom: 0; }

/* Cards: each page's content sits on one; the home page stacks several */
.pkp_structure_main > .page,
.pkp_structure_main > div[class^="page_"],
.pkp_structure_main > div[class*=" page_"],
.page_index_journal .homepage_about,
.page_index_journal .current_issue,
.page_index_journal .cmp_announcements,
.kj_intro, .kj_section_card, .kj_card {
	box-sizing: border-box;
	margin: 0 0 var(--kj-section);
	padding: var(--kj-card-pad-y) var(--kj-card-pad-x);
	background: var(--kj-paper);
	border: 1px solid var(--kj-rule-soft);
	border-radius: var(--kj-card-radius);
	box-shadow: var(--kj-shadow-card);
}
.pkp_structure_main > :last-child, .kj_card:last-child { margin-bottom: 0; }
.pkp_structure_main > div.page_index_journal[class] { padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.pkp_structure_main > .page_index_journal > * { margin: 0 0 var(--kj-section); }   /* the parent pulls the banner out by negative margins */
.pkp_structure_main > .page_index_journal > :last-child { margin-bottom: 0; }
.kj_intro { padding-bottom: 0; }
/* The card's padding is the only space above its first line and below its last: the parent theme adds 30px
   above the breadcrumbs and pulls some headings up by 10px, so cards opened anywhere from 18 to 58px down */
.pkp_structure_main .cmp_breadcrumbs { padding-top: 0; }
:is(.pkp_structure_main > .page, .pkp_structure_main > div[class*="page_"], .page_index_journal > section, .kj_card) > :first-child,
:is(.pkp_structure_main > .page, .pkp_structure_main > div[class*="page_"], .page_index_journal > section, .kj_card) > a:empty:first-child + * { margin-top: 0; }
:is(.pkp_structure_main > .page, .pkp_structure_main > div[class*="page_"], .page_index_journal > section, .kj_card) > :last-child { margin-bottom: 0; }

/* Reusable layout classes */
.kj_bleed { margin-inline: calc(-1 * var(--kj-card-pad-x)); padding-inline: var(--kj-card-pad-x); }
.kj_stack { display: flow-root; }
.kj_stack > * { margin-block: 0; }
.kj_stack > * + * { margin-top: var(--kj-stack-gap, var(--kj-section)); }
.kj_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(var(--kj-col, 240px), 100%), 1fr));
	gap: var(--kj-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Article pages: no sidebar, the article takes the full width (phones too: the sidebar no longer trails
   after the references). Only the language links stay, as the switch above the article. */
.pkp_page_article.pkp_op_view .pkp_structure_content.has_sidebar { grid-template-columns: minmax(0, 1fr); row-gap: var(--kj-space-4); }
.pkp_page_article.pkp_op_view .pkp_structure_sidebar { order: -1; display: flex; justify-content: flex-end; }
.pkp_page_article.pkp_op_view .pkp_structure_sidebar > :not(.block_language) { display: none; }
.pkp_page_article.pkp_op_view .pkp_structure_sidebar:not(:has(.block_language)),
.pkp_page_article.pkp_op_view:has(.kj_lang) .pkp_structure_sidebar { display: none; }
.pkp_page_article.pkp_op_view .block_language { margin: 0; }
.pkp_page_article.pkp_op_view .block_language .title {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Language links (the sidebar's Language block, on every page): one switch, the current language filled navy */
.block_language ul {
	display: inline-flex; flex-wrap: wrap; margin: 0; padding: 3px; list-style: none;
	background: var(--kj-paper); border: 1px solid var(--kj-rule); border-radius: var(--kj-radius-pill);
}
.block_language li, .pkp_block.block_language .content ul li { margin: 0; padding: 0; }
body .pkp_block.block_language .content a {
	display: block; padding: 5px 12px; border-radius: var(--kj-radius-pill);
	font: var(--kj-weight-medium) var(--kj-text-sm)/1.2 var(--kj-sans); color: var(--kj-ink-2); text-decoration: none;
}
body .pkp_block.block_language .content a:hover { color: var(--kj-navy); }
body .pkp_block.block_language .current a { background: var(--kj-navy); color: var(--kj-on-navy); }
@media (min-width: 1101px) {
	.pkp_page_article.pkp_op_view .obj_article_details .row { grid-template-columns: minmax(0, 1fr) var(--kj-side); gap: var(--kj-gap); }
}

/* === U04 User menu: logged-in dropdown · task 119 (Kodo's change request, 2026-11-02) === */
/*
   Signed in, the user link becomes "username [count] ▾" with a dropdown (Dashboard, View Profile, Administration,
   Logout). The parent theme drew it in bold teal (#4b7d92) with a grey hover, a teal side bar and a 10em box, and
   its count badge was white-on-white, dropped 0.3rem and ran into the name in RTL. Here it takes the primary menu's
   dropdown look (box, type, hover, 300 ms open) so the header reads as one system. U04's own UI task builds on this.
   Count badge: .task_count, a small pill. Shown next to the name on desktop and next to Dashboard in the phone menu,
   as the parent theme decides.
*/
.pkp_navigation_user .task_count {
	display: inline-block;
	position: static;
	width: auto; height: auto; min-width: 22px;
	margin: 0; margin-inline-start: 6px;
	padding: 2px 7px;
	box-sizing: border-box;
	border-radius: var(--kj-radius-pill);
	background: var(--kj-navy-wash);
	color: var(--kj-navy);
	font: var(--kj-weight-semibold) var(--kj-text-xs)/1.4 var(--kj-sans);
	font-variant-numeric: tabular-nums;
	text-align: center;
	vertical-align: 1px;
}
.pkp_navigation_user > li > a[aria-haspopup]::after { margin: 0; margin-inline-start: 6px; color: var(--kj-ink-3); }
#navigationUser > li > a:focus { background: transparent; color: var(--kj-blue) !important; }
#navigationUser > li > a:focus .task_count { background: var(--kj-navy-wash); color: var(--kj-navy); }
#navigationUser > li > ul {
	width: auto;
	min-width: 200px;
	padding: 8px 0;
	background: var(--kj-paper);
	border: 1px solid var(--kj-rule);
	border-radius: var(--kj-radius);
	box-shadow: var(--kj-shadow-pop);
}
#navigationUser > li > ul a {
	display: block;
	padding: 9px 18px;
	border: 0;
	border-radius: 0;
	font: var(--kj-weight-medium) var(--kj-text-ui)/1.3 var(--kj-sans);
	color: var(--kj-ink);
	text-align: start;
	white-space: nowrap;
	text-decoration: none;
}
#navigationUser > li > ul a:hover, #navigationUser > li > ul a:focus { background: var(--kj-blue-wash); color: var(--kj-blue-deep); border: 0; }
@media (min-width: 992px) {
	/* Real show/hide instead of the parent's off-screen offset, opening like the primary dropdowns */
	#navigationUser > li > ul {
		display: block; position: absolute; top: 100%; left: auto; right: 0; z-index: 1000;
		visibility: hidden; pointer-events: none;
		opacity: 0; clip-path: inset(0 -40px 100% -40px);
		transition: clip-path .3s var(--kj-ease), opacity .3s var(--kj-ease), visibility 0s linear .3s;
	}
	[dir="rtl"] #navigationUser > li > ul { left: 0; right: auto; }
	#navigationUser > li:hover > ul, #navigationUser > li:focus-within > ul, #navigationUser > li > ul.show {
		visibility: visible; pointer-events: auto;
		opacity: 1; clip-path: inset(0 -40px -48px -40px);   /* room for the shadow */
		transition: clip-path .3s var(--kj-ease), opacity .3s var(--kj-ease), visibility 0s;
	}
}
@media (max-width: 991px) {
	/* Phone menu: the items are listed under the name, like the primary menu's sub-items */
	#navigationUser > li > a[aria-haspopup]::after { display: none; }
	#navigationUser > li > ul {
		position: static; display: block; min-width: 0;
		margin: 4px 0 0; padding: 0;
		background: transparent; border: 0; border-radius: 0; box-shadow: none;
	}
	#navigationUser > li > ul a { padding: 7px 0; padding-inline-start: 14px; color: var(--kj-on-navy-2); background: transparent; }
	#navigationUser > li > ul a:hover, #navigationUser > li > ul a:focus { color: var(--kj-on-navy); background: transparent; text-decoration: underline; }
	.pkp_navigation_user .task_count, #navigationUser > li > a:focus .task_count { background: var(--kj-on-navy-hover); color: var(--kj-on-navy); }
}

/* === U22 Static page typography · task 120 === */
/*
   Long-form pages: the policy pages are Navigation Menu "Custom Pages" (and the Static Pages plugin would render
   the same way). OJS wraps their content in a bare <div class="page"> with no page_* class, so
   .pkp_structure_main > div[class="page"] reaches exactly these pages and no OJS page (those all add a page_* class).
   Later content tasks (Aims & Scope, Peer Review, Fees, AI policy…) get this look by being Custom Pages.

   In the pasted HTML
   - <h2> section heading: large navy, with the gold bar. Inside these pages it is a heading, not the small
     uppercase label h2 is elsewhere, so it is bigger than <h3> again.
   - <h3> sub-heading.
   - <ul class="kj_toc"> at the top: the contents box (mini map), one <li><a href="#id"> per section, matching
     id="…" on the headings. Use the same ids in every language.
   Clicking a contents link scrolls smoothly (instantly for visitors who ask their system for less motion),
   stops a little above the heading, and the heading flashes gold once so the eye finds where it landed.

   Variables: --kj-doc-measure  the line length of text on these pages (default 70ch, as .page > p already had)
*/
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
/* Spacing (Kodo, 2026-11-02): sections clearly apart (a hairline and air above each section heading), headings
   close to their own text, and paragraphs a little tighter than the site's reading default. */
.pkp_structure_main > div[class="page"] {
	--kj-doc-measure: 70ch;
	--kj-doc-leading: 1.6;    /* paragraphs and list items; the site default for reading is 1.75 */
	--kj-doc-gap: 14px;       /* between paragraphs, lists and list blocks */
}
[dir="rtl"] .pkp_structure_main > div[class="page"] { --kj-doc-leading: 1.8; }   /* Arabic script needs more (site default 1.95) */
.pkp_structure_main > div[class="page"] > :is(p, ul:not(.kj_toc, .kj_index_page), ol) { max-width: var(--kj-doc-measure); }
.pkp_structure_main > div[class="page"] > p,
.pkp_structure_main > div[class="page"] > :is(ul, ol):not(.kj_toc, .kj_index_page) > li { line-height: var(--kj-doc-leading); }
.pkp_structure_main > div[class="page"] > p { margin: 0 0 var(--kj-doc-gap); }
.pkp_structure_main > div[class="page"] > h2 {
	font: var(--kj-weight-bold) var(--kj-text-2xl)/var(--kj-leading-tight) var(--kj-sans);
	letter-spacing: var(--kj-tracking-display);
	text-transform: none;
	color: var(--kj-navy);
	margin: 36px 0 14px;
	padding: 30px 0 10px;    /* the gold bar sits in the bottom padding */
	border-top: 1px solid var(--kj-rule);
}
.pkp_structure_main > div[class="page"] > h3 {
	font: var(--kj-weight-semibold) var(--kj-text-lg)/var(--kj-leading-snug) var(--kj-sans);
	color: var(--kj-navy);
	margin: 30px 0 6px;
}
.pkp_structure_main > div[class="page"] > h2 + h3 { margin-top: 14px; }
.pkp_structure_main > div[class="page"] > :is(ul, ol):not(.kj_toc, .kj_index_page) { padding-inline-start: 1.3em; margin: 0 0 var(--kj-doc-gap); }
.pkp_structure_main > div[class="page"] > :is(ul, ol):not(.kj_toc, .kj_index_page) > li { margin-bottom: 4px; }

/* Logo cards (Indexing page): <ul class="kj_index_page"><li><a href="…"><img src="…" alt=""><strong>Name</strong> one-line
   description</a></li></ul>. The whole card is the link, so its text (name + description) says where it goes;
   the logo's alt is empty because the name is right under it. Logos: kujhss-index-*.png, 120px high, framed
   and trimmed, uploaded to public/site/images/. Builds on the mockup's .kj_index_page grid. */
.kj_index_page > li:has(> a:only-child) {
	padding: 0; gap: 0; overflow: hidden;
	transition: border-color var(--kj-fast) var(--kj-ease), box-shadow var(--kj-med) var(--kj-ease), transform var(--kj-med) var(--kj-ease);
}
.kj_index_page > li > a:only-child {
	display: flex; flex-direction: column; gap: 3px; height: 100%; box-sizing: border-box;
	padding: 0 18px 16px;
	font: 400 var(--kj-text-sm)/1.5 var(--kj-sans); color: var(--kj-ink-3);
	text-decoration: none; border-radius: inherit;
}
/* The logo stage: every logo gets the same tinted panel across the top of its card, centred and fitted inside
   the same box, so logos of any shape (square icons, long wordmarks) sit evenly. */
.kj_index_page > li > a:only-child img {
	display: block; align-self: stretch; box-sizing: border-box;
	width: calc(100% + 36px); height: 104px; margin: 0 -18px 14px;
	max-width: none; max-height: none;   /* the mockup's logo rule (40 × 160px) would squeeze the stage */
	padding: 28px 12%;
	object-fit: contain;
	background: var(--kj-paper-2);
	border-bottom: 1px solid var(--kj-rule-soft);
	transition: background-color var(--kj-med) var(--kj-ease);
}
/* Optical sizes: the box treats every logo the same, but square icons look small and dense wordmarks heavy.
   Keyed to the logo file names (kujhss-index-<service>.png), so a new logo gets the default until it's tuned. */
.kj_index_page > li > a:only-child img:is([src*="index-google-scholar"], [src*="index-academia"]) { padding-block: 20px; }
.kj_index_page > li > a:only-child img:is([src*="index-doaj"], [src*="index-ebsco"], [src*="index-worldcat"]) { padding-inline: 19%; }
.kj_index_page > li > a:only-child img:is([src*="index-base"], [src*="index-researchgate"], [src*="index-lockss"]) { padding-inline: 7%; }
.kj_index_page > li > a:only-child strong { font: var(--kj-weight-semibold) var(--kj-text-ui)/1.3 var(--kj-sans); color: var(--kj-navy); }
.kj_index_page > li > a:only-child strong::after {   /* opens another site */
	content: "↗" / ""; display: inline-block; margin-inline-start: 6px;
	font-weight: var(--kj-weight-regular); color: var(--kj-ink-3);
	transition: transform var(--kj-med) var(--kj-ease), color var(--kj-fast) var(--kj-ease);
}
[dir="rtl"] .kj_index_page > li > a:only-child strong::after { content: "↖" / ""; }
.kj_index_page > li:has(> a:only-child:hover) { border-color: var(--kj-rule); box-shadow: var(--kj-shadow-card); transform: translateY(-2px); }
.kj_index_page > li > a:only-child:hover img { background-color: var(--kj-navy-wash); }
.kj_index_page > li > a:only-child:hover strong::after { color: var(--kj-navy); transform: translate(2px, -2px); }
[dir="rtl"] .kj_index_page > li > a:only-child:hover strong::after { transform: translate(-2px, -2px); }
.kj_index_page > li > a:only-child:focus-visible { outline: 2px solid var(--kj-blue); outline-offset: -2px; }
.pkp_structure_main > div[class="page"] > .kj_index_page { margin: 4px 0 var(--kj-doc-gap); }
@media (max-width: 991px) { .kj_index_page { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* two cards a row on tablets and phones */
@media (max-width: 600px) {
	.kj_index_page { gap: 12px; }
	.kj_index_page > li > a:only-child { padding: 0 14px 12px; }
	.kj_index_page > li > a:only-child img { width: calc(100% + 28px); height: 84px; margin: 0 -14px 12px; padding: 22px 10%; }
}
.pkp_structure_main > div[class="page"] > .kj_toc { margin: 4px 0 32px; }
.pkp_structure_main > div[class="page"] [id] { scroll-margin-top: 24px; }
.pkp_structure_main > div[class="page"] > :is(h2, h3):target { animation: kj-landed 1.6s var(--kj-ease); border-radius: var(--kj-radius-sm); }
@keyframes kj-landed {
	0%, 35% { background: var(--kj-note-mark); box-shadow: 0 0 0 6px var(--kj-note-mark); }
	100% { background: transparent; box-shadow: 0 0 0 6px transparent; }
}
@media (max-width: 600px) {
	.kj_toc { columns: 1; }
	.pkp_structure_main > div[class="page"] > h2 { margin-top: 28px; padding-top: 24px; }
}