/* ============================================================
   Science Journal Theme — Main Stylesheet
   ============================================================ */

/* --- CSS Custom Properties (Academica / Default) --- */
:root {
	--sj-primary: #1a365d;
	--sj-primary-light: #2b5797;
	--sj-primary-dark: #0f2240;
	--sj-accent: #3182ce;
	--sj-accent-light: #63b3ed;
	--sj-accent-dark: #2563a8;
	--sj-secondary: #4a5568;
	--sj-success: #38a169;
	--sj-warning: #d69e2e;
	--sj-danger: #e53e3e;

	--sj-bg: #ffffff;
	--sj-bg-alt: #f7fafc;
	--sj-bg-muted: #edf2f7;
	--sj-bg-dark: #1a202c;
	--sj-text: #1a202c;
	--sj-text-secondary: #4a5568;
	--sj-text-muted: #718096;
	--sj-text-inverse: #ffffff;
	--sj-border: #e2e8f0;
	--sj-border-dark: #cbd5e0;

	--sj-hero-bg: linear-gradient(135deg, var(--sj-primary-dark) 0%, var(--sj-primary) 50%, var(--sj-primary-light) 100%);

	--sj-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
	--sj-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
	--sj-shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
	--sj-shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
	--sj-shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);

	--sj-radius-sm: 4px;
	--sj-radius: 8px;
	--sj-radius-lg: 12px;
	--sj-radius-xl: 16px;
	--sj-radius-full: 9999px;

	--sj-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--sj-font-serif: Georgia, "Times New Roman", Times, serif;
	--sj-font-mono: "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;

	--sj-container: 1200px;
	--sj-container-narrow: 800px;
	--sj-header-height: 72px;
	--sj-transition: 0.2s ease;
}

/* --- Emerald Color Scheme --- */
.sj-theme-emerald {
	--sj-primary: #1a4d3e;
	--sj-primary-light: #2d7a5f;
	--sj-primary-dark: #0f3028;
	--sj-accent: #38a169;
	--sj-accent-light: #68d391;
	--sj-accent-dark: #2f855a;
	--sj-hero-bg: linear-gradient(135deg, #0f3028 0%, #1a4d3e 50%, #2d7a5f 100%);
}

/* --- Crimson Color Scheme --- */
.sj-theme-crimson {
	--sj-primary: #5a1a2a;
	--sj-primary-light: #8b2e4a;
	--sj-primary-dark: #3d0f1c;
	--sj-accent: #c53030;
	--sj-accent-light: #fc8181;
	--sj-accent-dark: #9b2c2c;
	--sj-hero-bg: linear-gradient(135deg, #3d0f1c 0%, #5a1a2a 50%, #8b2e4a 100%);
}


/* ============================================================
   Base / Reset
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--sj-font-sans);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--sj-text);
	background-color: var(--sj-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: var(--sj-accent);
	text-decoration: none;
	transition: color var(--sj-transition);
}

a:hover {
	color: var(--sj-accent-dark);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	font-weight: 700;
	line-height: 1.25;
	color: var(--sj-text);
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }

p {
	margin: 0 0 1em;
}

ul, ol {
	margin: 0 0 1em;
	padding-left: 1.5em;
}

table {
	width: 100%;
	border-collapse: collapse;
}

input, select, textarea, button {
	font-family: inherit;
	font-size: inherit;
}

/* ============================================================
   Layout
   ============================================================ */
.sj-container {
	width: 100%;
	max-width: var(--sj-container);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.sj-container--narrow {
	max-width: var(--sj-container-narrow);
}

.sj-section {
	padding: 4rem 0;
}

.sj-section--alt {
	background-color: var(--sj-bg-alt);
}

.sj-section--dark {
	background-color: var(--sj-bg-dark);
	color: var(--sj-text-inverse);
}

.sj-grid {
	display: grid;
	gap: 1.5rem;
}

.sj-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.sj-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.sj-grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

.sj-flex {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* ============================================================
   Header / Navigation
   ============================================================ */
.sj-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--sj-bg);
	border-bottom: 1px solid var(--sj-border);
	box-shadow: var(--sj-shadow-sm);
}

.sj-header__top {
	background: var(--sj-primary);
	color: var(--sj-text-inverse);
	font-size: 0.8125rem;
	padding: 0.375rem 0;
}

.sj-header__top-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: var(--sj-container);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.sj-header__top a {
	color: rgba(255,255,255,0.85);
	font-size: 0.8125rem;
}

.sj-header__top a:hover {
	color: #ffffff;
}

.sj-header__top-left {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.sj-header__top-right {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.sj-header__issn {
	font-weight: 600;
	letter-spacing: 0.02em;
}

.sj-header__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	background: rgba(255,255,255,0.15);
	padding: 0.125rem 0.5rem;
	border-radius: var(--sj-radius-full);
	font-size: 0.75rem;
	font-weight: 500;
}

.sj-header__main {
	max-width: var(--sj-container);
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--sj-header-height);
}

.sj-logo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: var(--sj-text);
	flex-shrink: 0;
}

.sj-logo__image {
	width: 44px;
	height: 44px;
	border-radius: var(--sj-radius);
	object-fit: contain;
}

.sj-logo__text {
	display: flex;
	flex-direction: column;
}

.sj-logo__abbr {
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--sj-primary);
	letter-spacing: -0.02em;
}

.sj-logo__name {
	font-size: 0.6875rem;
	color: var(--sj-text-muted);
	line-height: 1.2;
	max-width: 160px;
}

.sj-nav {
	display: flex;
	align-items: center;
	gap: 0;
}

.sj-nav__list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}

.sj-nav__item {
	position: relative;
}

.sj-nav__link {
	display: flex;
	align-items: center;
	padding: 0.5rem 0.875rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--sj-text-secondary);
	text-decoration: none;
	border-radius: var(--sj-radius);
	transition: all var(--sj-transition);
	white-space: nowrap;
}

.sj-nav__link:hover,
.sj-nav__link--active {
	color: var(--sj-primary);
	background: var(--sj-bg-muted);
}

.sj-nav__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: 1rem;
}

/* Language switcher */
.sj-lang-switcher {
	position: relative;
	display: inline-flex;
}

.sj-lang-switcher__btn {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.625rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--sj-text-secondary);
	background: var(--sj-bg-muted);
	border: 1px solid var(--sj-border);
	border-radius: var(--sj-radius);
	cursor: pointer;
	transition: all var(--sj-transition);
}

.sj-lang-switcher__btn:hover {
	border-color: var(--sj-accent);
	color: var(--sj-accent);
}

.sj-lang-switcher__dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 0.25rem;
	background: var(--sj-bg);
	border: 1px solid var(--sj-border);
	border-radius: var(--sj-radius);
	box-shadow: var(--sj-shadow-lg);
	min-width: 140px;
	z-index: 100;
	display: none;
	overflow: hidden;
}

.sj-lang-switcher__dropdown.is-open {
	display: block;
}

/* Scoped under .sj-header__top so these beat the bar's white link colour —
   the dropdown sits on a white panel, so inherited white text is invisible. */
.sj-header__top .sj-lang-switcher__option {
	display: block;
	padding: 0.5rem 0.75rem;
	font-size: 0.8125rem;
	color: var(--sj-text);
	text-decoration: none;
	transition: background var(--sj-transition);
}

.sj-header__top .sj-lang-switcher__option:hover {
	background: var(--sj-bg-muted);
	color: var(--sj-text);
}

.sj-header__top .sj-lang-switcher__option--active {
	font-weight: 600;
	color: var(--sj-accent);
}

/* Mobile menu toggle */
.sj-menu-toggle {
	display: none;
	padding: 0.5rem;
	background: none;
	border: 1px solid var(--sj-border);
	border-radius: var(--sj-radius);
	cursor: pointer;
	color: var(--sj-text);
	line-height: 1;
}

.sj-menu-toggle__icon {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	position: relative;
	transition: background var(--sj-transition);
}

.sj-menu-toggle__icon::before,
.sj-menu-toggle__icon::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform var(--sj-transition);
}

.sj-menu-toggle__icon::before { top: -6px; }
.sj-menu-toggle__icon::after { top: 6px; }

.sj-menu-toggle.is-active .sj-menu-toggle__icon {
	background: transparent;
}

.sj-menu-toggle.is-active .sj-menu-toggle__icon::before {
	transform: rotate(45deg);
	top: 0;
}

.sj-menu-toggle.is-active .sj-menu-toggle__icon::after {
	transform: rotate(-45deg);
	top: 0;
}

/* User menu */
.sj-user-menu {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.sj-user-menu__link {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--sj-text-secondary);
	padding: 0.375rem 0.625rem;
	border-radius: var(--sj-radius);
	transition: all var(--sj-transition);
}

.sj-user-menu__link:hover {
	background: var(--sj-bg-muted);
	color: var(--sj-primary);
}

/* ============================================================
   Breadcrumbs
   ============================================================ */
.sj-breadcrumbs {
	padding: 0.875rem 0;
	background: var(--sj-bg-alt);
	border-bottom: 1px solid var(--sj-border);
	font-size: 0.8125rem;
}

.sj-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0.25rem;
}

.sj-breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--sj-text-muted);
}

.sj-breadcrumbs__item + .sj-breadcrumbs__item::before {
	content: '/';
	color: var(--sj-border-dark);
	margin-right: 0.25rem;
}

.sj-breadcrumbs__link {
	color: var(--sj-text-secondary);
}

.sj-breadcrumbs__link:hover {
	color: var(--sj-accent);
}

.sj-breadcrumbs__current {
	color: var(--sj-text);
	font-weight: 500;
}

/* ============================================================
   Buttons
   ============================================================ */
.sj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.625rem 1.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5;
	border: 2px solid transparent;
	border-radius: var(--sj-radius);
	cursor: pointer;
	text-decoration: none;
	transition: all var(--sj-transition);
	white-space: nowrap;
}

.sj-btn--primary {
	background: var(--sj-accent);
	color: #fff;
	border-color: var(--sj-accent);
}

.sj-btn--primary:hover {
	background: var(--sj-accent-dark);
	border-color: var(--sj-accent-dark);
	color: #fff;
}

.sj-btn--outline {
	background: transparent;
	color: var(--sj-accent);
	border-color: var(--sj-accent);
}

.sj-btn--outline:hover {
	background: var(--sj-accent);
	color: #fff;
}

.sj-btn--white {
	background: #fff;
	color: var(--sj-primary);
	border-color: #fff;
}

.sj-btn--white:hover {
	background: rgba(255,255,255,0.9);
	color: var(--sj-primary-dark);
}

.sj-btn--ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255,255,255,0.4);
}

.sj-btn--ghost:hover {
	background: rgba(255,255,255,0.1);
	border-color: rgba(255,255,255,0.7);
	color: #fff;
}

.sj-btn--sm {
	padding: 0.375rem 1rem;
	font-size: 0.8125rem;
}

.sj-btn--lg {
	padding: 0.875rem 2rem;
	font-size: 1rem;
}

.sj-btn--icon {
	padding: 0.5rem;
	border-radius: var(--sj-radius);
}

/* Row of buttons that centres on wide screens and stacks to equal
   widths on narrow ones, so adjacent buttons keep matching edges. */
.sj-btn-group {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 0.75rem;
}

@media (max-width: 560px) {
	.sj-btn-group {
		flex-direction: column;
		align-items: stretch;
	}

	.sj-btn-group .sj-btn {
		width: 100%;
	}
}

/* ============================================================
   Hero Section
   ============================================================ */
.sj-hero {
	background: var(--sj-hero-bg);
	color: var(--sj-text-inverse);
	padding: 4rem 0 5rem;
	position: relative;
	overflow: hidden;
}

.sj-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	pointer-events: none;
}

.sj-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.sj-hero__badges {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.sj-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.75rem;
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: var(--sj-radius-full);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.sj-hero__badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sj-accent-light);
}

.sj-hero__title {
	font-size: 2.75rem;
	font-weight: 800;
	line-height: 1.15;
	margin-bottom: 1rem;
	color: #fff;
	letter-spacing: -0.02em;
}

.sj-hero__desc {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: rgba(255,255,255,0.8);
	margin-bottom: 2rem;
	max-width: 520px;
}

.sj-hero__actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.sj-hero__sidebar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

.sj-hero__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	width: 100%;
	max-width: 300px;
}

.sj-hero__stat {
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: var(--sj-radius-lg);
	padding: 1rem;
	text-align: center;
}

.sj-hero__stat-value {
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.2;
	display: block;
}

.sj-hero__stat-label {
	font-size: 0.75rem;
	color: rgba(255,255,255,0.6);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-top: 0.25rem;
	display: block;
}

.sj-hero__cover {
	display: flex;
	justify-content: center;
}

.sj-hero__cover-img {
	max-width: 220px;
	border-radius: var(--sj-radius-lg);
	box-shadow: var(--sj-shadow-xl);
	border: 3px solid rgba(255,255,255,0.15);
}

/* ============================================================
   Section Headers
   ============================================================ */
.sj-section-header {
	text-align: center;
	margin-bottom: 2.5rem;
}

.sj-section-header__label {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--sj-accent);
	margin-bottom: 0.5rem;
}

.sj-section-header__title {
	font-size: 1.875rem;
	font-weight: 800;
	color: var(--sj-text);
	margin-bottom: 0.75rem;
}

.sj-section-header__desc {
	font-size: 1rem;
	color: var(--sj-text-muted);
	max-width: 600px;
	margin: 0 auto;
}

/* ============================================================
   Cards
   ============================================================ */
.sj-card {
	background: var(--sj-bg);
	border: 1px solid var(--sj-border);
	border-radius: var(--sj-radius-lg);
	overflow: hidden;
	transition: all var(--sj-transition);
}

.sj-card:hover {
	box-shadow: var(--sj-shadow-md);
	border-color: var(--sj-border-dark);
}

.sj-card__body {
	padding: 1.25rem;
}

.sj-card__image {
	width: 100%;
	aspect-ratio: 3/4;
	object-fit: cover;
}

/* ============================================================
   Article Summary Card
   ============================================================ */
.sj-article-card {
	background: var(--sj-bg);
	border: 1px solid var(--sj-border);
	border-radius: var(--sj-radius-lg);
	padding: 1.5rem;
	transition: all var(--sj-transition);
	display: flex;
	flex-direction: column;
}

.sj-article-card:hover {
	box-shadow: var(--sj-shadow-md);
	border-color: var(--sj-accent);
	transform: translateY(-2px);
}

.sj-article-card__authors {
	font-size: 0.8125rem;
	color: var(--sj-text-muted);
	margin-bottom: 0.5rem;
	font-weight: 500;
}

.sj-article-card__title {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 0.75rem;
	flex-grow: 1;
}

.sj-article-card__title a {
	color: var(--sj-text);
	text-decoration: none;
}

.sj-article-card__title a:hover {
	color: var(--sj-accent);
}

.sj-article-card__meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 0.75rem;
}

.sj-article-card__pages {
	font-size: 0.75rem;
	color: var(--sj-text-muted);
	background: var(--sj-bg-muted);
	padding: 0.125rem 0.5rem;
	border-radius: var(--sj-radius-full);
}

.sj-article-card__doi {
	font-size: 0.75rem;
	color: var(--sj-accent);
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.sj-article-card__doi-label {
	font-weight: 700;
	background: var(--sj-accent);
	color: #fff;
	padding: 0.0625rem 0.375rem;
	border-radius: var(--sj-radius-sm);
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.sj-article-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 0.75rem;
	border-top: 1px solid var(--sj-border);
	margin-top: auto;
}

.sj-article-card__galleys {
	display: flex;
	gap: 0.375rem;
}

.sj-article-card__galley {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.625rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--sj-accent);
	background: rgba(49,130,206,0.08);
	border-radius: var(--sj-radius-sm);
	text-decoration: none;
	transition: all var(--sj-transition);
}

.sj-article-card__galley:hover {
	background: var(--sj-accent);
	color: #fff;
}

.sj-article-card__stats {
	display: flex;
	gap: 0.75rem;
	font-size: 0.75rem;
	color: var(--sj-text-muted);
}

.sj-article-card__stat {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.sj-article-card__stat-icon {
	opacity: 0.6;
}

/* ============================================================
   Article Detail Page
   ============================================================ */
.sj-article {
	padding: 2rem 0 4rem;
}

.sj-article__layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 2.5rem;
	align-items: start;
}

.sj-article__header {
	margin-bottom: 2rem;
}

.sj-article__back {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.8125rem;
	color: var(--sj-text-muted);
	margin-bottom: 1.25rem;
}

.sj-article__back:hover {
	color: var(--sj-accent);
}

.sj-article__section-label {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sj-accent);
	background: rgba(49,130,206,0.08);
	padding: 0.25rem 0.75rem;
	border-radius: var(--sj-radius-full);
	margin-bottom: 1rem;
}

.sj-article__title {
	font-size: 1.875rem;
	font-weight: 800;
	line-height: 1.25;
	margin-bottom: 1rem;
	color: var(--sj-text);
}

.sj-article__authors-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.sj-article__author {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	background: var(--sj-bg-alt);
	border: 1px solid var(--sj-border);
	border-radius: var(--sj-radius-full);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--sj-text);
}

.sj-article__author-icon {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--sj-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.625rem;
	font-weight: 700;
}

.sj-article__author-affiliation {
	font-size: 0.75rem;
	color: var(--sj-text-muted);
}

.sj-article__doi {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.875rem;
	background: var(--sj-bg-alt);
	border: 1px solid var(--sj-border);
	border-radius: var(--sj-radius);
	font-size: 0.875rem;
	margin-bottom: 1.5rem;
}

.sj-article__doi-label {
	font-weight: 700;
	color: var(--sj-accent);
}

.sj-article__doi a {
	color: var(--sj-text);
	word-break: break-all;
}

.sj-article__content-section {
	margin-bottom: 2rem;
}

.sj-article__content-section h2 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--sj-text);
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--sj-accent);
	display: inline-block;
	margin-bottom: 1rem;
}

.sj-article__abstract {
	font-size: 0.9375rem;
	line-height: 1.8;
	color: var(--sj-text-secondary);
}

.sj-article__keywords {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.sj-article__keyword {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	background: var(--sj-bg-muted);
	border: 1px solid var(--sj-border);
	border-radius: var(--sj-radius-full);
	font-size: 0.8125rem;
	color: var(--sj-text-secondary);
	transition: all var(--sj-transition);
}

.sj-article__keyword:hover {
	border-color: var(--sj-accent);
	color: var(--sj-accent);
}

.sj-article__references ol {
	counter-reset: ref-counter;
	list-style: none;
	padding: 0;
}

.sj-article__references li {
	counter-increment: ref-counter;
	padding: 0.5rem 0 0.5rem 2.5rem;
	position: relative;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--sj-text-secondary);
	border-bottom: 1px solid var(--sj-border);
}

.sj-article__references li::before {
	content: counter(ref-counter) '.';
	position: absolute;
	left: 0;
	font-weight: 700;
	color: var(--sj-accent);
	width: 2rem;
	text-align: right;
}

/* Article sidebar */
.sj-article__sidebar {
	position: sticky;
	top: calc(var(--sj-header-height) + 2rem);
}

.sj-article__sidebar-card {
	background: var(--sj-bg);
	border: 1px solid var(--sj-border);
	border-radius: var(--sj-radius-lg);
	overflow: hidden;
	margin-bottom: 1.5rem;
}

.sj-article__sidebar-card-header {
	padding: 0.875rem 1.25rem;
	background: var(--sj-bg-alt);
	border-bottom: 1px solid var(--sj-border);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--sj-text-secondary);
}

.sj-article__sidebar-card-body {
	padding: 1.25rem;
}

.sj-article__sidebar-item {
	display: flex;
	justify-content: space-between;
	padding: 0.5rem 0;
	font-size: 0.875rem;
	border-bottom: 1px solid var(--sj-border);
}

.sj-article__sidebar-item:last-child {
	border-bottom: none;
}

.sj-article__sidebar-item-label {
	color: var(--sj-text-muted);
	font-weight: 500;
}

.sj-article__sidebar-item-value {
	color: var(--sj-text);
	font-weight: 600;
	text-align: right;
}

.sj-article__download-btns {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sj-article__download-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	border-radius: var(--sj-radius);
	text-decoration: none;
	transition: all var(--sj-transition);
}

.sj-article__download-btn--pdf {
	background: var(--sj-accent);
	color: #fff;
}

.sj-article__download-btn--pdf:hover {
	background: var(--sj-accent-dark);
	color: #fff;
}

.sj-article__download-btn--other {
	background: var(--sj-bg-muted);
	color: var(--sj-text);
	border: 1px solid var(--sj-border);
}

.sj-article__download-btn--other:hover {
	border-color: var(--sj-accent);
	color: var(--sj-accent);
}

.sj-article__license {
	font-size: 0.8125rem;
	color: var(--sj-text-muted);
	line-height: 1.6;
}

.sj-article__license a {
	font-weight: 600;
}

.sj-article__cite {
	font-size: 0.8125rem;
	color: var(--sj-text-secondary);
	line-height: 1.6;
	background: var(--sj-bg-alt);
	padding: 0.75rem;
	border-radius: var(--sj-radius);
	border-left: 3px solid var(--sj-accent);
}

/* ============================================================
   Issue Page
   ============================================================ */
.sj-issue {
	padding: 2rem 0 4rem;
}

.sj-issue__header {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
	margin-bottom: 2.5rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--sj-border);
}

.sj-issue__cover {
	flex-shrink: 0;
	width: 180px;
}

.sj-issue__cover-img {
	width: 100%;
	border-radius: var(--sj-radius-lg);
	box-shadow: var(--sj-shadow-md);
	border: 1px solid var(--sj-border);
}

.sj-issue__info {
	flex: 1;
}

.sj-issue__label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--sj-accent);
	margin-bottom: 0.5rem;
}

.sj-issue__title {
	font-size: 1.75rem;
	font-weight: 800;
	margin-bottom: 0.5rem;
}

.sj-issue__date {
	font-size: 0.875rem;
	color: var(--sj-text-muted);
	margin-bottom: 1rem;
}

.sj-issue__description {
	font-size: 0.9375rem;
	color: var(--sj-text-secondary);
	line-height: 1.7;
}

.sj-issue__toc-section {
	margin-bottom: 2rem;
}

.sj-issue__toc-section-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--sj-primary);
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--sj-accent);
	display: inline-block;
	margin-bottom: 1.25rem;
}

.sj-issue__articles-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* ============================================================
   Archive Page
   ============================================================ */
.sj-archive {
	padding: 2rem 0 4rem;
}

.sj-archive__header {
	margin-bottom: 2.5rem;
}

.sj-archive__title {
	font-size: 2rem;
	font-weight: 800;
	margin-bottom: 0.5rem;
}

.sj-archive__desc {
	color: var(--sj-text-muted);
	font-size: 1rem;
}

.sj-archive__year-group {
	margin-bottom: 2.5rem;
}

.sj-archive__year-title {
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--sj-primary);
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--sj-border);
}

.sj-archive__issues-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.25rem;
}

/* Issue summary card */
.sj-issue-card {
	background: var(--sj-bg);
	border: 1px solid var(--sj-border);
	border-radius: var(--sj-radius-lg);
	overflow: hidden;
	transition: all var(--sj-transition);
	text-decoration: none;
	color: var(--sj-text);
	display: flex;
	flex-direction: column;
}

.sj-issue-card:hover {
	box-shadow: var(--sj-shadow-md);
	border-color: var(--sj-accent);
	transform: translateY(-2px);
	color: var(--sj-text);
}

.sj-issue-card__cover {
	background: var(--sj-bg-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3/4;
	overflow: hidden;
}

.sj-issue-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sj-issue-card__cover--placeholder {
	padding: 2rem;
}

.sj-issue-card__cover--placeholder svg {
	width: 48px;
	height: 48px;
	opacity: 0.3;
}

.sj-issue-card__body {
	padding: 1rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.sj-issue-card__title {
	font-size: 0.9375rem;
	font-weight: 700;
	margin-bottom: 0.375rem;
	line-height: 1.3;
}

.sj-issue-card__date {
	font-size: 0.8125rem;
	color: var(--sj-text-muted);
	margin-top: auto;
}

/* ============================================================
   About / Static Pages
   ============================================================ */
.sj-page {
	padding: 2rem 0 4rem;
}

.sj-page__header {
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--sj-border);
}

.sj-page__title {
	font-size: 2rem;
	font-weight: 800;
	margin-bottom: 0;
}

.sj-page__content {
	font-size: 0.9375rem;
	line-height: 1.8;
	color: var(--sj-text-secondary);
}

.sj-page__content h2 {
	font-size: 1.375rem;
	margin-top: 2rem;
	margin-bottom: 0.75rem;
}

.sj-page__content h3 {
	font-size: 1.125rem;
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}

.sj-page__content ul,
.sj-page__content ol {
	margin-bottom: 1.25rem;
}

.sj-page__content li {
	margin-bottom: 0.375rem;
}

.sj-page__content a {
	color: var(--sj-accent);
	font-weight: 500;
}

.sj-page__content table {
	margin: 1.5rem 0;
	border: 1px solid var(--sj-border);
	border-radius: var(--sj-radius);
	overflow: hidden;
}

.sj-page__content th,
.sj-page__content td {
	padding: 0.75rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--sj-border);
}

.sj-page__content th {
	background: var(--sj-bg-alt);
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--sj-text-secondary);
}

/* ============================================================
   Editorial Team
   ============================================================ */
.sj-editorial-team__group {
	margin-bottom: 2.5rem;
}

.sj-editorial-team__group-title {
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--sj-primary);
	margin-bottom: 1.25rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--sj-accent);
	display: inline-block;
}

.sj-editorial-team__members {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
}

.sj-editorial-team__member {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background: var(--sj-bg);
	border: 1px solid var(--sj-border);
	border-radius: var(--sj-radius-lg);
	transition: all var(--sj-transition);
}

.sj-editorial-team__member:hover {
	box-shadow: var(--sj-shadow-sm);
	border-color: var(--sj-border-dark);
}

.sj-editorial-team__member-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--sj-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1rem;
	flex-shrink: 0;
}

.sj-editorial-team__member-info {
	flex: 1;
	min-width: 0;
}

.sj-editorial-team__member-name {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--sj-text);
}

.sj-editorial-team__member-role {
	font-size: 0.8125rem;
	color: var(--sj-text-muted);
}

.sj-editorial-team__member-affiliation {
	font-size: 0.75rem;
	color: var(--sj-text-muted);
	font-style: italic;
}

/* OJS ships the ORCID mark as an SVG with a viewBox but no intrinsic size,
   so without this it expands to fill the whole row. */
.sj-editorial-team__member .orcid_icon,
.sj-article__author .orcid_icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	margin-left: 0.25rem;
	flex-shrink: 0;
}

/* ============================================================
   Search Page
   ============================================================ */
.sj-search__form {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 2rem;
}

.sj-search__input {
	flex: 1;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	border: 2px solid var(--sj-border);
	border-radius: var(--sj-radius);
	background: var(--sj-bg);
	color: var(--sj-text);
	outline: none;
	transition: border-color var(--sj-transition);
}

.sj-search__input:focus {
	border-color: var(--sj-accent);
}

.sj-search__results {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sj-search__no-results {
	text-align: center;
	padding: 3rem 0;
	color: var(--sj-text-muted);
	font-size: 1.0625rem;
}

/* ============================================================
   Auth Pages (Login/Register)
   ============================================================ */
.sj-auth {
	display: flex;
	justify-content: center;
	padding: 3rem 0 4rem;
}

.sj-auth__card {
	width: 100%;
	max-width: 440px;
	background: var(--sj-bg);
	border: 1px solid var(--sj-border);
	border-radius: var(--sj-radius-xl);
	padding: 2.5rem;
	box-shadow: var(--sj-shadow-md);
}

.sj-auth__title {
	font-size: 1.5rem;
	font-weight: 800;
	text-align: center;
	margin-bottom: 1.5rem;
}

/* Form styles */
.sj-form__group {
	margin-bottom: 1.25rem;
}

.sj-form__label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sj-text);
	margin-bottom: 0.375rem;
}

.sj-form__input {
	width: 100%;
	padding: 0.625rem 0.875rem;
	font-size: 0.9375rem;
	border: 1.5px solid var(--sj-border);
	border-radius: var(--sj-radius);
	background: var(--sj-bg);
	color: var(--sj-text);
	outline: none;
	transition: border-color var(--sj-transition), box-shadow var(--sj-transition);
}

.sj-form__input:focus {
	border-color: var(--sj-accent);
	box-shadow: 0 0 0 3px rgba(49,130,206,0.15);
}

.sj-form__help {
	font-size: 0.75rem;
	color: var(--sj-text-muted);
	margin-top: 0.25rem;
}

.sj-form__error {
	font-size: 0.75rem;
	color: var(--sj-danger);
	margin-top: 0.25rem;
}

.sj-form__actions {
	margin-top: 1.5rem;
}

.sj-form__actions .sj-btn {
	width: 100%;
}

.sj-form__footer {
	text-align: center;
	margin-top: 1.25rem;
	font-size: 0.875rem;
	color: var(--sj-text-muted);
}

.sj-form__footer a {
	font-weight: 600;
}

.sj-form__link {
	text-align: right;
	margin-top: -0.5rem;
	margin-bottom: 1rem;
}

.sj-form__link a {
	font-size: 0.8125rem;
	color: var(--sj-accent);
}

/* ============================================================
   Footer
   ============================================================ */
.sj-footer-cta {
	background: var(--sj-primary);
	color: var(--sj-text-inverse);
	padding: 3.5rem 0;
	text-align: center;
}

.sj-footer-cta__title {
	font-size: 1.75rem;
	font-weight: 800;
	color: #fff;
	margin-bottom: 0.75rem;
}

.sj-footer-cta__desc {
	color: rgba(255,255,255,0.75);
	margin-bottom: 1.5rem;
	font-size: 1rem;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

.sj-footer-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

.sj-footer {
	background: var(--sj-bg-dark);
	color: rgba(255,255,255,0.7);
	padding: 3rem 0 0;
}

.sj-footer a {
	color: rgba(255,255,255,0.7);
	transition: color var(--sj-transition);
}

.sj-footer a:hover {
	color: #fff;
}

.sj-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 2rem;
	padding-bottom: 2.5rem;
}

.sj-footer__brand {
	display: flex;
	flex-direction: column;
}

.sj-footer__logo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
	text-decoration: none;
}

.sj-footer__logo-img {
	width: 40px;
	height: 40px;
	border-radius: var(--sj-radius);
}

.sj-footer__logo-text {
	display: flex;
	flex-direction: column;
}

.sj-footer__logo-abbr {
	font-size: 1rem;
	font-weight: 800;
	color: #fff;
	line-height: 1.1;
}

.sj-footer__logo-name {
	font-size: 0.6875rem;
	color: rgba(255,255,255,0.5);
	line-height: 1.2;
}

.sj-footer__desc {
	font-size: 0.875rem;
	line-height: 1.6;
	margin-bottom: 1rem;
	color: rgba(255,255,255,0.55);
}

.sj-footer__issn {
	font-size: 0.8125rem;
	margin-bottom: 0.25rem;
}

.sj-footer__issn-label {
	color: rgba(255,255,255,0.45);
}

.sj-footer__issn-value {
	color: #fff;
	font-weight: 700;
}

.sj-footer__publisher {
	font-size: 0.8125rem;
	color: rgba(255,255,255,0.45);
}

.sj-footer__column-title {
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #fff;
	margin-bottom: 1rem;
}

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

.sj-footer__links li {
	margin-bottom: 0.5rem;
}

.sj-footer__links a {
	font-size: 0.875rem;
}

.sj-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.1);
	padding: 1.25rem 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.8125rem;
}

.sj-footer__bottom-links {
	display: flex;
	gap: 1.5rem;
}

.sj-footer__bottom-links a {
	font-size: 0.8125rem;
}

/* ============================================================
   Utility Classes
   ============================================================ */
.sj-text-center { text-align: center; }
.sj-text-muted { color: var(--sj-text-muted); }
.sj-mt-0 { margin-top: 0; }
.sj-mb-0 { margin-bottom: 0; }
.sj-mb-1 { margin-bottom: 0.5rem; }
.sj-mb-2 { margin-bottom: 1rem; }
.sj-mb-3 { margin-bottom: 1.5rem; }
.sj-mb-4 { margin-bottom: 2rem; }

.sj-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   Pagination
   ============================================================ */
.sj-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.25rem;
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--sj-border);
}

.sj-pagination__link,
.sj-pagination__current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	border-radius: var(--sj-radius);
	text-decoration: none;
	transition: all var(--sj-transition);
}

.sj-pagination__link {
	color: var(--sj-text-secondary);
	border: 1px solid var(--sj-border);
}

.sj-pagination__link:hover {
	border-color: var(--sj-accent);
	color: var(--sj-accent);
	background: rgba(49,130,206,0.05);
}

.sj-pagination__current {
	background: var(--sj-accent);
	color: #fff;
	border: 1px solid var(--sj-accent);
}

/* ============================================================
   Notification / Alert
   ============================================================ */
.sj-alert {
	padding: 0.875rem 1.25rem;
	border-radius: var(--sj-radius);
	font-size: 0.875rem;
	margin-bottom: 1.25rem;
	border-left: 4px solid;
}

.sj-alert--info {
	background: rgba(49,130,206,0.08);
	border-color: var(--sj-accent);
	color: var(--sj-accent-dark);
}

.sj-alert--success {
	background: rgba(56,161,105,0.08);
	border-color: var(--sj-success);
	color: #276749;
}

.sj-alert--warning {
	background: rgba(214,158,46,0.08);
	border-color: var(--sj-warning);
	color: #744210;
}

.sj-alert--error {
	background: rgba(229,62,62,0.08);
	border-color: var(--sj-danger);
	color: #9b2c2c;
}

/* ============================================================
   OJS Form Overrides
   ============================================================ */
.pkp_form input[type="text"],
.pkp_form input[type="email"],
.pkp_form input[type="password"],
.pkp_form input[type="url"],
.pkp_form textarea,
.pkp_form select {
	border: 1.5px solid var(--sj-border);
	border-radius: var(--sj-radius);
	padding: 0.625rem 0.875rem;
	font-size: 0.9375rem;
	transition: border-color var(--sj-transition);
}

.pkp_form input:focus,
.pkp_form textarea:focus,
.pkp_form select:focus {
	border-color: var(--sj-accent);
	outline: none;
	box-shadow: 0 0 0 3px rgba(49,130,206,0.15);
}

.pkp_form label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sj-text);
	margin-bottom: 0.375rem;
}

.pkp_form .pkp_button,
.pkp_form button[type="submit"] {
	background: var(--sj-accent);
	color: #fff;
	border: none;
	padding: 0.625rem 1.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	border-radius: var(--sj-radius);
	cursor: pointer;
	transition: background var(--sj-transition);
}

.pkp_form .pkp_button:hover,
.pkp_form button[type="submit"]:hover {
	background: var(--sj-accent-dark);
}

/* Hide OJS branded elements */
.pkp_brand_footer,
.pkp_footer_content a[href*="pkp.sfu.ca"],
a[href*="pkp.sfu.ca"],
.pkp_screen_reader,
.pkp_structure_head .pkp_navigation_primary_wrapper .pkp_navigation_primary > li:last-child a[href*="about/aboutThisPublishingSystem"] {
	display: none !important;
}

/* ============================================================
   Responsive Design
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
	.sj-hero__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.sj-hero__desc {
		margin-left: auto;
		margin-right: auto;
	}

	.sj-hero__actions {
		justify-content: center;
	}

	.sj-hero__sidebar {
		order: -1;
	}

	.sj-hero__stats {
		max-width: 400px;
	}

	.sj-article__layout {
		grid-template-columns: 1fr;
	}

	.sj-article__sidebar {
		position: static;
	}

	.sj-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.sj-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.sj-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile */
@media (max-width: 768px) {
	h1 { font-size: 1.75rem; }
	h2 { font-size: 1.375rem; }

	/* Keep the top bar on mobile: it carries the language switcher and the
	   login/register links, which have no other home on a small screen.
	   Only the decorative badges are dropped. */
	.sj-header__top-inner {
		padding: 0 1rem;
		gap: 0.5rem;
	}

	.sj-header__badge {
		display: none;
	}

	.sj-header__top-left {
		flex-shrink: 0;
	}

	.sj-header__issn {
		font-size: 0.75rem;
	}

	.sj-header__top-right {
		gap: 0.5rem;
	}

	.sj-user-menu__link {
		padding: 0.25rem 0.375rem;
		font-size: 0.75rem;
	}

	.sj-menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.sj-nav {
		display: none;
		position: absolute;
		top: var(--sj-header-height);
		left: 0;
		right: 0;
		background: var(--sj-bg);
		border-bottom: 1px solid var(--sj-border);
		box-shadow: var(--sj-shadow-lg);
		padding: 0.75rem;
		z-index: 999;
	}

	.sj-nav.is-open {
		display: block;
	}

	.sj-nav__list {
		flex-direction: column;
	}

	.sj-nav__link {
		padding: 0.625rem 0.875rem;
		font-size: 0.9375rem;
		border-radius: var(--sj-radius);
	}

	.sj-nav__actions {
		margin-left: 0;
		margin-top: 0.5rem;
		padding-top: 0.5rem;
		border-top: 1px solid var(--sj-border);
		justify-content: center;
	}

	.sj-hero {
		padding: 2.5rem 0 3rem;
	}

	.sj-hero__title {
		font-size: 1.875rem;
	}

	/* Keep each badge on one line and let the row wrap instead, so a long
	   ISSN does not split mid-number into a tall pill. */
	.sj-hero__badges {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.375rem;
	}

	.sj-hero__badge {
		white-space: nowrap;
		font-size: 0.6875rem;
		padding: 0.1875rem 0.625rem;
	}

	.sj-hero__stats {
		grid-template-columns: repeat(4, 1fr);
		max-width: 100%;
	}

	.sj-hero__cover-img {
		max-width: 160px;
	}

	.sj-section {
		padding: 2.5rem 0;
	}

	.sj-grid--2,
	.sj-grid--3,
	.sj-grid--4 {
		grid-template-columns: 1fr;
	}

	.sj-issue__header {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.sj-footer__grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.sj-footer__bottom {
		flex-direction: column;
		gap: 0.75rem;
		text-align: center;
	}

	.sj-footer__bottom-links {
		justify-content: center;
	}

	.sj-auth__card {
		padding: 1.5rem;
		border: none;
		box-shadow: none;
	}

	.sj-search__form {
		flex-direction: column;
	}

	.sj-page__title {
		font-size: 1.5rem;
	}

	.sj-article__title {
		font-size: 1.375rem;
	}

	.sj-archive__issues-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sj-editorial-team__members {
		grid-template-columns: 1fr;
	}

	.sj-container {
		padding: 0 1rem;
	}
}

/* Small mobile */
@media (max-width: 480px) {
	.sj-hero__stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.sj-archive__issues-grid {
		grid-template-columns: 1fr;
	}

	.sj-article-card__footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
}

/* ============================================================
   Print Styles
   ============================================================ */
@media print {
	.sj-header,
	.sj-footer,
	.sj-footer-cta,
	.sj-hero,
	.sj-breadcrumbs,
	.sj-menu-toggle,
	.sj-nav__actions,
	.sj-article__sidebar,
	.sj-pagination,
	.sj-btn {
		display: none !important;
	}

	body {
		color: #000;
		background: #fff;
	}

	.sj-article__layout {
		grid-template-columns: 1fr;
	}

	.sj-article__title {
		font-size: 1.5rem;
	}
}