/*
Theme Name: Unilag Law Review
Theme URI: https://unilaglaw.example.com
Description: Academic law review journal theme for UNILAG - built on Twenty Twenty-Four
Author: UNILAG Editorial Team
Author URI: https://unilaglaw.example.com
Version: 1.0.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfour
Text Domain: unilaglaw
Domain Path: /languages
Requires at least: 6.4
Requires PHP: 7.4
*/

/* 
 * =====================================================
 * Unilag Law Review - Child Theme Stylesheet
 * =====================================================
 * 
 * This file extends Twenty Twenty-Four with custom
 * styles for academic journal publishing.
 * 
 * Parent theme styles are automatically loaded by
 * functions.php via wp_enqueue_style().
 * 
 * Add custom styles below.
 */
:root {
color-scheme: light;
--unilaglaw-body-bg: #ffffff;
--unilaglaw-panel-bg: #ffffff;
--unilaglaw-border: #d6d3d1;
--unilaglaw-text: #111827;
--unilaglaw-muted: #52525b;
--unilaglaw-accent: #0f172a;
--unilaglaw-accent-soft: #ffffff;
}

body {
background-color: var( --unilaglaw-body-bg );
color: var( --unilaglaw-text );
}

.single-article-page {
max-width: 1040px;
margin: 0 auto;
padding: 2rem 1.25rem 4rem;
}

.article-entry {
background: var( --unilaglaw-panel-bg );
border: 1px solid var( --unilaglaw-border );
box-shadow: 0 16px 40px rgba( 15, 23, 42, 0.07 );
padding: 2rem;
}

.article-header {
margin-bottom: 2rem;
}

.article-context-meta {
font-size: 0.95rem;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var( --unilaglaw-muted );
margin-bottom: 0.75rem;
}

.article-context-meta a {
color: var( --unilaglaw-accent );
text-decoration: none;
}

.article-context-meta a:hover,
.article-context-meta a:focus {
text-decoration: underline;
}

.article-title {
font-size: clamp(2.25rem, 4vw, 3rem);
line-height: 1.05;
letter-spacing: -0.03em;
margin: 0 0 1rem;
}

.article-authors,
.article-publication-date,
.article-citation {
margin: 0.35rem 0;
color: var( --unilaglaw-muted );
}

.article-authors a {
color: inherit;
}

.article-layout {
display: grid;
grid-template-columns: minmax(0, 2.35fr) minmax(18rem, 1fr);
column-gap: 2.5rem;
row-gap: 2rem;
}

.article-main {
min-width: 0;
}

.article-abstract,
.article-details {
background: var( --unilaglaw-accent-soft );
border: 1px solid var( --unilaglaw-border );
padding: 1.5rem;
}

.article-abstract h2,
.article-details h2 {
font-size: 1rem;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 1rem;
color: var( --unilaglaw-accent );
}

.article-abstract-content p {
margin: 0 0 1rem;
line-height: 1.8;
}

.article-content {
margin-top: 1.5rem;
line-height: 1.85;
}

.article-content p,
.article-content ul,
.article-content ol {
margin: 0 0 1.35rem;
}

.article-content blockquote {
border-left: 4px solid var( --unilaglaw-border );
padding-left: 1rem;
color: var( --unilaglaw-muted );
}

.article-download-link {
display: inline-block;
padding: 0.85rem 1.1rem;
background: var( --unilaglaw-accent );
color: #ffffff;
text-decoration: none;
font-weight: 600;
border-radius: 0.35rem;
}

.article-download-link:hover,
.article-download-link:focus {
background: #111827;
}

.article-keywords ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat( auto-fit, minmax(9rem, 1fr) );
gap: 0.75rem;
}

.article-keywords li {
background: #f8fafc;
border: 1px solid var( --unilaglaw-border );
padding: 0.65rem 0.85rem;
font-size: 0.95rem;
color: var( --unilaglaw-accent );
}

.archive-page {
	max-width: 1040px;
	margin: 0 auto;
	padding: 2rem 1.25rem 4rem;
}

.archive-header {
	margin-bottom: 2rem;
}

.archive-title {
	font-size: clamp(2.25rem, 4vw, 3rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin: 0 0 1rem;
}

.archive-description {
	margin-top: 0.75rem;
	color: var( --unilaglaw-muted );
	line-height: 1.75;
}

.archive-list {
	display: grid;
	gap: 1.5rem;
}

.archive-entry {
	background: var( --unilaglaw-panel-bg );
	border: 1px solid var( --unilaglaw-border );
	padding: 1.75rem;
}

.archive-item-header {
	margin-bottom: 1rem;
}

.archive-item-title {
	font-size: 1.5rem;
	margin: 0 0 0.5rem;
}

.archive-item-title a {
	color: var( --unilaglaw-accent );
	text-decoration: none;
}

.archive-item-title a:hover,
.archive-item-title a:focus {
	text-decoration: underline;
}

.archive-item-meta {
	font-size: 0.95rem;
	color: var( --unilaglaw-muted );
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.archive-item-context {
	display: inline-flex;
	gap: 0.35rem;
}

.archive-item-body {
	margin-top: 1rem;
	line-height: 1.8;
}

.archive-item-excerpt {
	margin: 0 0 1rem;
}

.archive-item-link {
	display: inline-block;
	font-weight: 600;
	color: var( --unilaglaw-accent );
	text-decoration: none;
}

.archive-item-link:hover,
.archive-item-link:focus {
	text-decoration: underline;
}

.volume-entry {
background: var( --unilaglaw-panel-bg );
border: 1px solid var( --unilaglaw-border );
box-shadow: 0 16px 40px rgba( 15, 23, 42, 0.07 );
padding: 2rem;
}

.issue-header,
.volume-header {
margin-bottom: 2rem;
}

.issue-context,
.volume-context {
font-size: 0.95rem;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var( --unilaglaw-muted );
display: inline-flex;
gap: 0.5rem;
margin-bottom: 0.85rem;
}

.issue-title,
.volume-title {
font-size: clamp(2.25rem, 4vw, 3rem);
line-height: 1.05;
letter-spacing: -0.03em;
margin: 0;
}

.issue-excerpt,
.volume-excerpt,
.issue-description,
.volume-description {
margin-bottom: 2rem;
line-height: 1.8;
}

.issue-section-heading h2,
.volume-section-heading h2 {
font-size: 1rem;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 1rem;
color: var( --unilaglaw-accent );
}

.issue-article-list,
.volume-issue-list {
list-style: none;
margin: 0;
padding: 0;
}

.issue-article-item {
border-top: 1px solid var( --unilaglaw-border );
padding: 1.25rem 0;
}

.issue-article-item:first-child,
.volume-issue-item:first-child {
border-top: none;
}

.issue-article-title,
.volume-issue-title {
margin: 0 0 0.5rem;
}

.issue-article-title a,
.volume-issue-title a {
color: var( --unilaglaw-accent );
text-decoration: none;
}

.issue-article-title a:hover,
.volume-issue-title a:hover,
.issue-article-title a:focus,
.volume-issue-title a:focus {
text-decoration: underline;
}

.issue-article-meta,
.volume-issue-meta {
margin: 0;
color: var( --unilaglaw-muted );
font-size: 0.95rem;
}

.volume-issue-item {
border: 1px solid var( --unilaglaw-border );
border-radius: 0.5rem;
padding: 1.25rem;
margin-bottom: 1rem;
}

.issue-no-articles,
.volume-no-issues {
margin: 0;
color: var( --unilaglaw-muted );
}

@media screen and ( max-width: 880px ) {
.article-layout {
grid-template-columns: 1fr;
}
}

@media screen and ( max-width: 640px ) {
.single-article-page,
.single-issue-page,
.single-volume-page {
padding: 1.5rem 1rem 3rem;
}

.article-entry,
.issue-entry,
.volume-entry {
padding: 1.5rem;
}

.article-title,
.issue-title,
.volume-title {
font-size: 2rem;
}
}
.front-page {
max-width: 1140px;
margin: 0 auto;
padding: 2rem 1.25rem 4rem;
}

.home-hero {
padding: 3rem 2rem;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
border: 1px solid var( --unilaglaw-border );
border-radius: 1.25rem;
margin-bottom: 2rem;
}

.home-eyebrow {
font-size: 0.85rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var( --unilaglaw-accent );
margin: 0 0 1rem;
}

.home-hero-title {
font-size: clamp(2.5rem, 4vw, 3.75rem);
line-height: 1.02;
margin: 0 0 1rem;
}

.home-hero-description {
font-size: 1rem;
max-width: 62rem;
line-height: 1.85;
color: var( --unilaglaw-muted );
}

.home-welcome {
margin-bottom: 2.5rem;
}

.home-welcome-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
}

.home-card {
background: var( --unilaglaw-panel-bg );
border: 1px solid var( --unilaglaw-border );
border-radius: 1rem;
padding: 1.75rem;
}

.home-card-title {
font-size: 1.5rem;
margin: 0.5rem 0 0.75rem;
}

.home-card-meta {
color: var( --unilaglaw-muted );
margin: 0 0 1rem;
}

.home-card-copy {
line-height: 1.7;
color: var( --unilaglaw-text );
}

.home-archive-links {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.75rem;
}

.home-archive-links a {
color: var( --unilaglaw-accent );
text-decoration: none;
}

.home-archive-links a:hover,
.home-archive-links a:focus {
text-decoration: underline;
}

.home-section {
margin-bottom: 2rem;
}

.section-header {
margin-bottom: 1rem;
}

.section-header h2 {
font-size: 1.5rem;
margin: 0;
}

.home-list {
display: grid;
gap: 1rem;
}

.home-list-item {
background: var( --unilaglaw-panel-bg );
border: 1px solid var( --unilaglaw-border );
border-radius: 1rem;
padding: 1.25rem;
}

.home-list-item h3 {
margin: 0 0 0.5rem;
}

.home-list-meta {
font-size: 0.95rem;
color: var( --unilaglaw-muted );
margin: 0;
}

.page-issues-page {
max-width: 1040px;
margin: 0 auto;
padding: 2rem 1.25rem 4rem;
}

.page-issues-header {
margin-bottom: 2rem;
}

.issue-group {
margin-bottom: 2rem;
}

.issue-group-header {
margin-bottom: 1rem;
}

.issue-group-title {
font-size: 1.5rem;
margin: 0;
}

.issue-group-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.75rem;
}

.issue-group-item {
border: 1px solid var( --unilaglaw-border );
border-radius: 0.75rem;
}

.issue-group-link {
display: grid;
grid-template-columns: 1fr auto;
gap: 1rem;
padding: 1rem 1.25rem;
text-decoration: none;
color: inherit;
}

.issue-group-link:hover,
.issue-group-link:focus {
background: var( --unilaglaw-accent-soft );
}

.issue-group-name {
font-weight: 600;
}

.issue-group-date {
color: var( --unilaglaw-muted );
}

@media screen and ( max-width: 800px ) {
.home-welcome-grid,
.issue-group-list {
grid-template-columns: 1fr;
}
}

@media screen and ( max-width: 640px ) {
.home-hero {
padding: 2rem 1rem;
}

.home-hero-title {
font-size: 2.25rem;
}
}

/* =================================================================
   Design System v2 — UNILAG Law Review
   Ported from design handoff (index.html / styles.css)
   ================================================================= */

:root {
  --ink:        #14181f;
  --ink-2:      #2a313b;
  --ink-3:      #525a66;
  --ink-4:      #8a8f99;
  --rule:       #d8d4cc;
  --rule-2:     #ebe7df;
  --paper:      #f4f1ea;
  --paper-2:    #ede9df;
  --card:       #ffffff;
  --accent:     #144686;
  --accent-2:   #0f3566;
  --gold:       #b08a3e;
  --serif:      "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:       "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gutter:     clamp(20px, 4vw, 56px);
  --max:        1320px;
}

body {
  background: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Suppress block-theme header/footer on the front page — our
   template part renders its own masthead, topbar, and footer. */
body.front-page header.wp-block-template-part,
body.front-page footer.wp-block-template-part {
  display: none;
}

/* ---------- Top accent bar ---------- */
.topbar {
  height: 6px;
  background: var(--accent);
}

/* ---------- Centred wrapper ---------- */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Typography ---------- */
.h-serif {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.h-display {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  font-size: clamp(48px, 7vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.h-display em { font-style: italic; font-weight: 500; color: var(--accent); }

.lead {
  font-family: var(--serif);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.45;
  color: var(--ink-2);
}

/* ---------- Section labels & eyebrows ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
.eyebrow .num { color: var(--accent); }

.section-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-label .num { color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 12px 20px;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; text-decoration: none; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #fff; }
.btn.accent { background: var(--accent); border-color: var(--accent); }
.btn.accent:hover { background: var(--accent-2); border-color: var(--accent-2); }

.read-more {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.read-more:hover { color: var(--accent); }

/* ---------- Badge ---------- */
.badge {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--paper);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.badge.solid { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Masthead ---------- */
.mast {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.mast-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.brand-mark {
  width: 44px; height: 44px;
  border: 1.5px solid var(--accent);
  position: relative;
  display: grid; place-items: center;
  background: var(--paper);
  flex-shrink: 0;
}
.brand-mark::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--accent);
  background: transparent;
}
.brand-mark span {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  color: var(--accent);
  font-size: 22px;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.brand-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.01em;
  line-height: 1;
}
.brand-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.mast-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 34px;
}
.mast-nav a {
  font-size: 14px;
  color: var(--ink-2);
  position: relative;
  padding: 6px 0;
  text-decoration: none;
}
.mast-nav a:hover { color: var(--accent); }
.mast-nav a.is-active { color: var(--ink); }
.mast-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--accent);
}
.mast-nav .nav-cta {
  font-weight: 500;
  font-size: 13px;
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.mast-nav .nav-cta:hover { background: var(--accent); color: #fff; }

/* ---------- Hero ---------- */
.hero {
  padding: 64px 0 80px;
  border-bottom: 1px solid var(--rule);
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  margin-bottom: 36px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
}
.hero-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 12px;
}
.hero-cite {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px 18px;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero-cite dt { color: var(--ink-4); }
.hero-cite dd { margin: 0; color: var(--ink-2); }

/* ---------- Jump nav ---------- */
.jump {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.jump-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.jump-item {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: inline-flex;
  gap: 10px;
  align-items: baseline;
  text-decoration: none;
}
.jump-item .n { color: var(--accent); }
.jump-item:hover { color: var(--accent); }

/* ---------- TOC (table of contents) ---------- */
.toc {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule);
}
.toc-row {
  display: grid;
  grid-template-columns: 56px 1fr 1fr 200px 140px;
  gap: 32px;
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  transition: background 0.2s;
  text-decoration: none;
  color: inherit;
}
.toc-row:hover { background: rgba(20, 70, 134, 0.03); }
.toc-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--accent);
  padding-top: 4px;
}
.toc-cat {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-top: 4px;
}
.toc-title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
  margin-top: 8px;
}
.toc-title em { font-style: italic; }
.toc-author {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-2);
}
.toc-author small {
  display: block;
  font-size: 11px;
  color: var(--ink-4);
  margin-top: 4px;
  letter-spacing: 0.02em;
}
.toc-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  padding-top: 6px;
}
.toc-meta .arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.2s;
}
.toc-row:hover .arrow { transform: translateX(4px); color: var(--accent); }

/* ---------- Forum cards ---------- */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.grid-cards .card {
  background: var(--card);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 32px 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 280px;
}
.card .card-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.card .card-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
.card .card-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
}
.card .card-more {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.card:hover .card-more { color: var(--accent); }

/* ---------- Pull quote ---------- */
.pullquote {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.15;
  font-weight: 400;
  color: var(--ink);
  font-style: italic;
  text-wrap: balance;
  margin: 0;
}
.pullquote::before { content: "\201C"; color: var(--accent); margin-right: 0.05em; }
.pullquote::after  { content: "\201D"; color: var(--accent); }

/* ---------- Editorial prose (forewords, welcome letters) ---------- */
.prose-editorial p {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 22px;
}
.prose-editorial p:first-of-type {
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.5;
  color: var(--ink);
}
.prose-editorial p:last-child { margin-bottom: 0; }
.prose-editorial a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule);
  transition: text-decoration-color 0.15s ease;
}
.prose-editorial a:hover,
.prose-editorial a:focus-visible { text-decoration-color: var(--accent); }
.prose-editorial blockquote {
  margin: 32px 0;
  padding-left: 24px;
  border-left: 3px solid var(--accent);
  font-style: italic;
  color: var(--ink);
}

/* ---------- Image placeholder slot ---------- */
.imgslot {
  background:
    repeating-linear-gradient(135deg,
      rgba(20, 70, 134, 0.06) 0,
      rgba(20, 70, 134, 0.06) 1px,
      transparent 1px,
      transparent 10px),
    var(--paper-2);
  border: 1px solid var(--rule);
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  overflow: hidden;
}
.imgslot::after {
  content: attr(data-label);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 6px 10px;
  background: var(--paper);
  border: 1px solid var(--rule);
  position: relative;
  z-index: 1;
}
.imgslot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Site footer (custom) ---------- */
.site-footer {
  background: var(--ink);
  color: #c5c8cf;
}
.site-footer-top {
  max-width: var(--max);
  margin: 0 auto;
  padding: 72px var(--gutter) 48px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 56px;
}
.site-footer .brand-title { color: #fff; }
.site-footer .brand-sub   { color: #7d828c; }
.site-footer .brand-mark  { border-color: #fff; background: transparent; }
.site-footer .brand-mark::before { border-color: #fff; }
.site-footer .brand-mark span { color: #fff; }
.site-footer h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
  font-weight: 500;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer ul a { color: #c5c8cf; font-size: 14px; text-decoration: none; }
.site-footer ul a:hover { color: #fff; }
.site-footer p { font-size: 14px; line-height: 1.6; color: #9aa0a8; margin: 0 0 14px; }
.site-footer-bottom {
  border-top: 1px solid #2c333d;
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7d828c;
}

/* ---------- Entry animation ---------- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise { animation: riseIn 0.7s cubic-bezier(.2,.7,.2,1) both; }
.rise:nth-child(2) { animation-delay: 0.08s; }
.rise:nth-child(3) { animation-delay: 0.16s; }
.rise:nth-child(4) { animation-delay: 0.24s; }

/* ---------- Responsive ---------- */
@media ( max-width: 980px ) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .grid-cards { grid-template-columns: repeat(2, 1fr); }
  .toc-row { grid-template-columns: 40px 1fr; gap: 16px; padding: 22px 0; }
  .toc-cat, .toc-author small { display: none; }
  .toc-author, .toc-meta { grid-column: 2; padding-top: 8px; text-align: left; }
  .toc-title { grid-column: 2; font-size: 22px; }
  .toc-num  { grid-row: span 3; }
  .site-footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .mast-nav { display: none; }
  .jump-inner { gap: 12px; }
}
@media ( max-width: 640px ) {
  .grid-cards { grid-template-columns: 1fr; }
  .site-footer-top { grid-template-columns: 1fr; }
  .site-footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
}

/* =================================================================
   Page-level components (non-home pages)
   ================================================================= */

/* ---------- Page header (pagehead) shared across inner pages ---------- */
.pagehead {
  padding: 72px 0 56px;
  border-bottom: 1px solid var(--rule);
}
.pagehead h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.pagehead h1 em { font-style: italic; color: var(--accent); font-weight: 500; }
.pagehead .lead { max-width: 720px; }

/* ---------- Breadcrumb bar ---------- */
.breadcrumb-bar {
  border-bottom: 1px solid var(--rule);
}
.breadcrumb-bar .wrap {
  padding-top: 16px;
  padding-bottom: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.breadcrumb-bar a { color: var(--ink-3); text-decoration: none; }
.breadcrumb-bar a:hover { color: var(--accent); }

/* ---------- Article reader (3-column layout) ---------- */
.reader {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 64px var(--gutter) 96px;
  gap: 48px;
}
.reader .article { padding: 0; max-width: none; }

.side {
  position: sticky;
  top: 24px;
  align-self: start;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.side h5 { margin: 0 0 14px; font-weight: 500; color: var(--ink-4); }
.side ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.side ol a { color: var(--ink-2); display: flex; gap: 10px; text-decoration: none; }
.side ol a:hover { color: var(--accent); }
.side ol a .n { color: var(--accent); }
.side ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.side ul a { color: var(--ink-2); text-decoration: none; }
.side ul a:hover { color: var(--accent); }
.side .side-block { padding: 18px 0; border-top: 1px solid var(--rule); }
.side .side-block:first-child { border-top: 0; padding-top: 0; }
.side p { font-size: 11px; line-height: 1.55; color: var(--ink-2); letter-spacing: 0; text-transform: none; margin: 0; }

/* ---------- Article body (reading view) ---------- */
.article {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px var(--gutter) 96px;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 32px;
}
.article-meta .key { color: var(--ink-4); margin-right: 8px; }
.article h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 28px;
  color: var(--ink);
  text-wrap: balance;
}
.article h1 em { font-style: italic; color: var(--accent); }
.article .byline {
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  color: var(--ink-2);
  margin: 0 0 12px;
}
.article .byline a { border-bottom: 1px solid var(--accent); padding-bottom: 1px; text-decoration: none; color: inherit; }
.article .affil {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 40px;
}
.article .abstract {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 28px 0;
  margin: 0 0 48px;
}
.article .abstract::before {
  content: "Abstract";
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  font-style: normal;
}
.article h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  margin: 48px 0 16px;
  color: var(--ink);
  display: flex;
  gap: 16px;
  align-items: baseline;
}
.article h2 .secnum {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--accent);
  flex-shrink: 0;
  padding-top: 4px;
}
.article h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  margin: 32px 0 12px;
  color: var(--ink-2);
}
.article p {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 22px;
}
.article p:first-of-type::first-letter {
  font-size: 5.2em;
  float: left;
  line-height: 0.85;
  margin: 6px 10px 0 0;
  font-weight: 500;
  color: var(--accent);
  font-family: var(--serif);
}
.article blockquote {
  border-left: 3px solid var(--accent);
  margin: 32px 0;
  padding: 8px 0 8px 24px;
  font-style: italic;
  color: var(--ink-2);
}
.article .footnotes {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.article .footnotes h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
}
.article .footnotes ol {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-3);
  padding-left: 18px;
}
.article .footnotes li { margin-bottom: 10px; }

/* ---------- Archive: filter chips ---------- */
.filterbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
.chip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  background: var(--paper);
  cursor: pointer;
  appearance: none;
}
.chip.active,
.chip:focus { background: var(--ink); color: #fff; border-color: var(--ink); outline: none; }
.chip:hover  { border-color: var(--accent); }

/* ---------- Archive: decade rows ---------- */
.decade-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 64px;
  padding: 64px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.decade-label { position: sticky; top: 24px; }
.decade-label .num {
  font-family: var(--serif);
  font-size: 72px;
  line-height: 1;
  color: var(--accent);
}
.decade-label .lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 12px;
}
.decade-label .count {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-2);
  margin-top: 16px;
  font-size: 18px;
}

/* ---------- About: editorial board grid ---------- */
.ed-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.ed-card {
  background: var(--card);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ed-card .av {
  aspect-ratio: 4/5;
  background:
    repeating-linear-gradient(135deg,
      rgba(20, 70, 134, 0.06) 0,
      rgba(20, 70, 134, 0.06) 1px,
      transparent 1px,
      transparent 10px),
    var(--paper-2);
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ed-card .av img { width: 100%; height: 100%; object-fit: cover; }
.ed-card .av span { font-family: var(--serif); font-style: italic; color: var(--accent); font-size: 36px; }
.ed-card .role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
.ed-card h4 { font-family: var(--serif); font-size: 20px; font-weight: 500; margin: 0; line-height: 1.2; }
.ed-card .affil { font-family: var(--sans); font-size: 13px; color: var(--ink-3); margin: 0; }

/* ---------- Submissions: process steps ---------- */
.step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
}
.step-num {
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1;
  color: var(--accent);
  font-weight: 500;
}
.step h3 { font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1.15; margin: 0 0 12px; }
.step p  { font-family: var(--serif); font-size: 18px; line-height: 1.55; color: var(--ink-2); margin: 0 0 12px; max-width: 64ch; }
.step .meta { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); margin-top: 8px; }

/* ---------- Submissions: preflight checklist ---------- */
.checkrow {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--rule-2);
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
}
.checkrow::before {
  content: "—";
  color: var(--accent);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .2em;
  flex-shrink: 0;
  padding-top: 2px;
}

/* ---------- Forms ---------- */
.form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.form-field label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.form-field input,
.form-field textarea,
.form-field select {
  font-family: var(--sans);
  font-size: 15px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--rule);
  color: var(--ink);
  border-radius: 0;
  appearance: none;
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus { outline: none; border-color: var(--accent); }

/* ---------- Responsive additions ---------- */
@media ( max-width: 1100px ) {
  .reader { grid-template-columns: 1fr; gap: 0; }
  .side { display: none; }
}
@media ( max-width: 900px ) {
  .decade-row { grid-template-columns: 1fr; gap: 24px; }
  .ed-grid { grid-template-columns: repeat(2, 1fr); }
  .pagehead .wrap { grid-template-columns: 1fr !important; }
}
@media ( max-width: 640px ) {
  .step { grid-template-columns: 1fr; }
}