/* ============================================================
   INTERNATIONAL JOURNAL OF ANATOMY AND RESEARCH (IJAR)
   Core Design System & Responsive Layout Stylesheet (2026 Edition)
   ============================================================ */

/* ============================================================
   DESIGN TOKENS & SYSTEM ARCHITECTURE
   ============================================================ */
:root{
  --navy: #0A2540;
  --navy-ink: #071b30;
  --emerald: #00695C;
  --emerald-ink: #004d43;
  --paper: #FFFFFF;
  --sand: #F8F9FA;
  --line: #E3E7EC;
  --ink: #1B2733;
  --ink-soft: #4A5568;
  --ink-faint: #8592A3;
  --gold: #B08D3E;

  --font-ui: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 12px;
  --shadow-sm: 0 2px 4px rgba(10,37,64,.04), 0 1px 2px rgba(10,37,64,.03);
  --shadow-md: 0 10px 30px rgba(10,37,64,.08);
  --shadow-lg: 0 20px 40px rgba(10,37,64,.12);
  --header-h: 116px;
  --header-h-mobile: 64px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --navy: #0A2540;
    --paper: #0F1720;
    --sand: #16202B;
    --line: #29343F;
    --ink: #E6EAEE;
    --ink-soft: #AEB9C4;
    --ink-faint: #7C8A97;
    --emerald: #2FB6A3;
  }
}
[data-theme="dark"]{
  --navy: #0A2540;
  --paper: #0F1720;
  --sand: #16202B;
  --line: #29343F;
  --ink: #E6EAEE;
  --ink-soft: #AEB9C4;
  --ink-faint: #7C8A97;
  --emerald: #2FB6A3;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 84px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin:0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

img{ max-width:100%; display:block; }
a{ color: inherit; }
.icon{ width:1.1em; height:1.1em; fill:none; stroke:currentColor; vertical-align:-0.18em; flex:none; }
h1,h2,h3,h4,h5{ font-family: var(--font-ui); color: var(--navy); margin: 0 0 .5em; line-height: 1.25; letter-spacing: -0.015em; }
/* Dark-mode heading fix — headings use --navy for their text color on
   purpose (it also doubles as a background color elsewhere, so it's
   never redefined for dark mode), but that leaves near-black text on
   the new near-black dark-mode background: dark navy (#0A2540) on
   near-black paper (#0F1720) is barely legible, which is what "light
   mode / dark mode not working" turned out to be. This one rule was
   already here for h1-h4 (manual toggle only) but missed h5, and had
   no equivalent at all for a visitor whose OS/browser is set to dark
   mode without ever touching the toggle (the prefers-color-scheme
   block above only swaps CSS variables, not this heading color) — so
   OS-dark-mode visitors saw unreadable headings on every page, new
   content included. Both gaps are fixed here; this is a contrast fix
   for the shared base rule above, not a design change, so — unlike
   the other fixes in this file — it isn't scoped to legacy content.

   !important added after inspecting a live legacy page in DevTools:
   the parent theme's own style.css carries its own unscoped
   `h1,h2,h3,h4,h5,h6{...}` heading-color rule. Even though this rule
   is more specific (the [data-theme="dark"] attribute selector beats
   a bare tag list), the parent theme's rule was very likely marked
   !important — old themes commonly do this to guarantee their own
   branding colors always win — which beats specificity outright. */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5{ color:#EAF1F7 !important; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) h1,
  :root:not([data-theme="light"]) h2,
  :root:not([data-theme="light"]) h3,
  :root:not([data-theme="light"]) h4,
  :root:not([data-theme="light"]) h5{ color:#EAF1F7 !important; }
}

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--emerald); color:#fff; padding:.75rem 1.25rem; z-index:200; border-radius:0 0 8px 0;
  font-weight:600; text-decoration:none;
}
.skip-link:focus{ left:0; top:0; }

:focus-visible{ outline: 3px solid var(--emerald); outline-offset: 3px; border-radius: 4px; }

.container{ max-width: 1320px; margin: 0 auto; padding: 0 20px; }
.visually-hidden{ position:absolute; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* ============================================================
   TOP UTILITY BAR + HEADER
   ============================================================ */
.utility-bar{
  background: var(--navy-ink);
  color: #C9D6E3;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
[data-theme="dark"] .utility-bar{ background:#08131F; }
.utility-bar .container{ display:flex; align-items:center; justify-content:space-between; height:36px; }
.utility-bar a{ color:#C9D6E3; text-decoration:none; transition: color .15s ease; }
.utility-bar a:hover{ color:#fff; }
.utility-email{ display:inline-flex; align-items:center; gap:6px; font-weight:500; }
.utility-social{ display:flex; gap:16px; list-style:none; margin:0; padding:0; align-items:center; }
.utility-social a{ font-size:14px; opacity:.85; display:inline-flex; align-items:center; }
.utility-social a:hover{ opacity:1; color: var(--emerald); }

.site-header{
  /* Was rgba(10,37,64,0.98) + a 12px backdrop-filter blur. The
     background was already 98% opaque, so the blur was doing almost
     nothing visually — but backdrop-filter forces the browser to
     recompute that blur every single frame while this sticky header
     stays pinned during scroll, which is a well-known cause of janky
     mouse-wheel scrolling on long pages (a scrollbar drag looks
     "fast" by comparison because it's one big jump, not many small
     repainted frames). Bumped to fully solid and dropped the filter:
     visually identical, no per-frame repaint cost. Site-wide, not
     legacy-only — this is the shared header on every page, and it's
     a performance fix, not a design change. */
  background: var(--navy);
  position: sticky; top:0; z-index: 100;
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
  gap: 20px;
}
.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; color:#fff; min-width:0; }
.brand-mark{
  width:44px; height:44px; border-radius:10px;
  background: linear-gradient(145deg, var(--emerald), #0A2540);
  display:flex; align-items:center; justify-content:center;
  flex:none; overflow:hidden; border: 1px solid rgba(255,255,255,.15);
}
.brand-mark img{ width:100%; height:100%; object-fit:contain; display:block; }
.brand-text{ line-height:1.2; min-width:0; }
.brand-text strong{ display:block; font-size: clamp(14px, 1.7vw, 16.5px); font-weight:700; letter-spacing:.1px; white-space:normal; }
.brand-text span{ display:block; font-size:12px; color:#9FB4C8; letter-spacing:.3px; margin-top:3px; font-weight: 500; }
@media (min-width: 960px){ .brand-text strong{ white-space:nowrap; } }

.primary-nav{ display:none; }
@media (min-width: 960px){
  .primary-nav{ display:flex; align-items:center; gap: 4px; list-style:none; margin:0; padding:0; }
  .primary-nav > li{ position:relative; }
  .primary-nav > li::after{
    content: ""; position: absolute; left:0; right:0; top:100%; height:12px;
  }
  .primary-nav > li > a{
    display:flex; align-items:center; gap:5px;
    padding: 10px 14px; color:#DCE6F0; text-decoration:none; font-size:14px; font-weight:500; border-radius:8px;
    transition: all .15s ease;
  }
  .primary-nav > li > a:hover, .primary-nav > li > a[aria-current="page"]{ background: rgba(255,255,255,.1); color:#fff; }
  .primary-nav .sub{
    display:none; position:absolute; top:calc(100% + 4px); left:0; background:var(--paper); color:var(--ink);
    min-width: 260px; padding:8px; border-radius: 10px; box-shadow: var(--shadow-lg); list-style:none; margin:0;
    border: 1px solid var(--line); z-index: 130;
  }
  [data-theme="dark"] .primary-nav .sub{ background:#182430; }
  .primary-nav > li:hover .sub, .primary-nav > li:focus-within .sub{ display:block; }
  .primary-nav .sub a{ display:block; padding:9px 13px; border-radius:6px; text-decoration:none; color:var(--ink); font-size:13.5px; font-weight: 500; }
  .primary-nav .sub a:hover{ background: var(--sand); color: var(--emerald); }
}

.header-actions{ display:flex; align-items:center; gap:10px; }
.color-picker{ position:relative; }
.palette-panel{
  position:absolute; top:calc(100% + 12px); right:0; z-index:110;
  background: var(--paper); border:1px solid var(--line); border-radius:12px; box-shadow: var(--shadow-lg);
  padding:16px; width:250px;
}
.palette-panel[hidden]{ display:none; }
.palette-title{ font-family: var(--font-ui); font-size:11.5px; font-weight: 700; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-faint); margin:0 0 12px; }
.swatch-row{ display:flex; gap:10px; flex-wrap:wrap; }

/* Enhanced WCAG AAA Compliant Touch Targets (min 44px x 44px) */
.swatch{
  width:44px; height:44px; min-width:44px; min-height:44px;
  border-radius:50%; border:2px solid var(--line); cursor:pointer; padding:0;
  background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%);
  position:relative; transition: transform .15s ease, border-color .15s ease;
  display:inline-flex; align-items:center; justify-content:center;
}
.swatch:hover{ transform: scale(1.1); }
.swatch[aria-checked="true"]{ border-color: var(--ink); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--c2); }
.palette-hint{ margin:12px 0 0; font-size:12px; font-weight:600; color: var(--ink-soft); }

.icon-btn{
  width:42px; height:42px; min-width:42px; min-height:42px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px; background: rgba(255,255,255,.08); color:#fff; border:0; cursor:pointer; font-size:18px; position:relative;
  transition: background .15s ease;
}
.icon-btn:hover{ background: rgba(255,255,255,.18); }
.menu-toggle{ display:flex; }
@media (min-width: 960px){ .menu-toggle{ display:none; } }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb-bar{ background: var(--sand); border-bottom:1px solid var(--line); }
.breadcrumb, .breadcrumbs{
  list-style:none; display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin:0; padding: 12px 0; font-size:13.5px; color: var(--ink-faint); font-weight:500;
}
.breadcrumb a, .breadcrumbs a{ text-decoration:none; color: var(--ink-soft); }
.breadcrumb a:hover, .breadcrumbs a:hover{ color: var(--emerald); }
.breadcrumb li:not(:last-child)::after, .breadcrumbs li:not(:last-child)::after{ content:"/"; margin-left:8px; color: var(--ink-faint); opacity: 0.6; }
.breadcrumb li[aria-current], .breadcrumbs li[aria-current]{ color: var(--navy); font-weight:700; }
[data-theme="dark"] .breadcrumb li[aria-current], [data-theme="dark"] .breadcrumbs li[aria-current]{ color:#EAF1F7; }

/* ============================================================
   ISSUE HERO & COVER LIGHTBOX
   ============================================================ */
.issue-hero{
  padding: 38px 0 26px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(1200px 240px at 15% -40%, rgba(0,105,92,.1), transparent 70%),
    var(--paper);
}
.issue-hero h1{
  font-size: clamp(1.65rem, 1.1rem + 1.8vw, 2.35rem);
  max-width: 880px;
  letter-spacing:-.02em;
  font-weight: 800;
}
.issue-hero .kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color: var(--emerald); background: rgba(0,105,92,.09); border:1px solid rgba(0,105,92,.25);
  padding:5px 12px; border-radius:999px; margin-bottom:16px;
}
.issue-hero p.lede{ color: var(--ink-soft); max-width:72ch; font-size:16px; margin-bottom:20px; line-height: 1.6; }

.hero-top{ display:flex; flex-direction:column; gap:24px; }
.hero-heading{ min-width:0; }

.issue-cover{ width:220px; max-width:100%; margin:0 auto; flex:none; }
.cover-zoom-btn{
  appearance:none; background:none; border:0; padding:0; margin:0; cursor:zoom-in;
  display:block; width:100%; border-radius:10px; outline-offset: 4px;
}
.issue-cover img{
  width:100%; height:auto; display:block;
  border-radius:10px; border:1px solid var(--line); box-shadow: var(--shadow-md); background: var(--sand);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cover-zoom-btn:hover img, .cover-zoom-btn:focus-visible img{
  transform: scale(1.03);
  box-shadow: var(--shadow-lg);
}
.issue-cover figcaption{ text-align:center; font-family: var(--font-mono); font-size:12px; font-weight: 600; color: var(--ink-faint); margin-top:10px; }
@media (min-width: 1080px){
  .hero-top{ display:grid; grid-template-columns: 240px minmax(0,1fr) 240px; gap:32px; align-items:start; }
  .hero-heading{ grid-column: 1 / span 2; }
  .issue-cover{ grid-column: 3; width:240px; margin:0; justify-self:end; }
}

/* Lightbox Modal (In-Page Full View Overlay) */
.lightbox-modal{
  position: fixed; inset: 0; z-index: 250;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
  padding: 20px;
}
.lightbox-modal.is-open{ opacity: 1; pointer-events: auto; }
.lightbox-backdrop{
  position: fixed; inset: 0;
  background: rgba(7, 23, 40, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lightbox-content{
  position: relative; z-index: 251;
  max-width: min(92vw, 680px); max-height: 90vh;
  transform: scale(0.94); transition: transform .25s ease;
  display: flex; flex-direction: column; align-items: center;
}
.lightbox-modal.is-open .lightbox-content{ transform: scale(1); }
.lightbox-content img{
  max-width: 100%; max-height: 84vh; width: auto; height: auto;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 25px 60px rgba(0,0,0,.6); object-fit: contain;
}
.lightbox-close{
  position: absolute; top: -18px; right: -18px; z-index: 252;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--paper); color: var(--navy); border: 1px solid var(--line);
  cursor: pointer; font-size: 24px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg); transition: background .15s ease, transform .15s ease;
}
.lightbox-close:hover{ background: var(--emerald); color: #fff; transform: scale(1.08); }

@media (max-width: 600px){
  .lightbox-modal{ padding: 12px; }
  .lightbox-content{ max-width: 96vw; }
  .lightbox-close{ top: -12px; right: -10px; width: 36px; height: 36px; font-size: 20px; }
}

.issue-meta-row{ display:flex; flex-wrap:wrap; gap:10px; margin:0; }
.meta-pill{
  font-family: var(--font-mono); font-size:12.5px; font-weight: 600; color: var(--ink-soft);
  background: var(--sand); border:1px solid var(--line); border-radius:8px; padding:6px 12px;
}

/* Tab pills for Online First / In Press / Current Issue */
.issue-tabs{ display:flex; gap:8px; margin-top:26px; border-bottom:1px solid var(--line); }
.issue-tabs button{
  appearance:none; background:none; border:0; cursor:pointer;
  font-family: var(--font-ui); font-size:15px; font-weight:600; color: var(--ink-faint);
  padding: 12px 4px; margin-right:24px; border-bottom:3px solid transparent; position:relative; top:1px;
  transition: color .15s ease, border-color .15s ease;
}
.issue-tabs button:hover{ color: var(--navy); }
[data-theme="dark"] .issue-tabs button:hover{ color:#EAF1F7; }
.issue-tabs button[aria-selected="true"]{ color: var(--emerald); border-bottom-color: var(--emerald); font-weight:700; }

/* ============================================================
   3-COLUMN / 2-COLUMN LAYOUT
   ============================================================ */
.layout{
  display:grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 32px 0 12px;
  align-items:start;
}
@media (min-width: 1080px){
  .layout{ grid-template-columns: 258px minmax(0,1fr) 300px; }
  .layout.layout-2col{ grid-template-columns: minmax(0,1fr) 300px; }
}

/* Left: outline / TOC */
.outline{
  background: var(--sand); border:1px solid var(--line); border-radius: var(--radius);
  padding: 20px 18px;
}
@media (min-width: 1080px){ .outline{ position: sticky; top: calc(var(--header-h) + 92px); max-height: calc(100vh - var(--header-h) - 120px); overflow:auto; } }
.outline h2{ font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-faint); margin-bottom:14px; }
.outline ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.outline li a{
  display:flex; gap:10px; align-items:baseline; text-decoration:none; color: var(--ink-soft);
  font-size:13.5px; font-weight:500; padding:8px 10px; border-radius:8px; line-height:1.4; transition: all .15s ease;
}
.outline li a:hover{ background: rgba(0,105,92,.09); color: var(--emerald); }
.toc-num{ font-family: var(--font-mono); color: var(--gold); font-size:12px; font-weight:700; flex:none; }

/* Center: article list */
.issue-panel{ min-width:0; }
.panel-section{ display:none; }
.panel-section.is-active{ display:block; }
.paper-card{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding: 24px 24px 22px; margin-bottom:18px; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.paper-card:hover{
  box-shadow: var(--shadow-md);
  border-color: rgba(0,105,92,.3);
}
.paper-eyebrow{
  font-family: var(--font-mono); font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color: var(--emerald); margin:0 0 10px;
}
.paper-title{ font-size: 18.5px; font-weight:700; line-height:1.35; margin-bottom:10px; }
.paper-title a{ text-decoration:none; color: var(--navy); background-image: linear-gradient(var(--emerald), var(--emerald)); background-repeat:no-repeat; background-size:0% 2px; background-position:0 100%; transition: background-size .2s ease, color .2s ease; padding-bottom:2px; }
.paper-title a:hover, .paper-title a:focus-visible{ color: var(--emerald); background-size:100% 2px; }
[data-theme="dark"] .paper-title a{ color:#EAF1F7; }
.paper-authors{
  font-family: var(--font-serif); font-style:italic; color: var(--ink-soft); margin:0 0 8px; font-size:15px;
}
.paper-citation{ font-family: var(--font-serif); color: var(--ink); font-size:14.5px; margin:0 0 6px; }
.paper-doi{ font-family: var(--font-mono); font-size:12.5px; color: var(--ink-faint); margin:0 0 16px; word-break:break-all; }
.paper-doi a{ color: var(--ink-faint); text-decoration:underline; font-weight:500; }
.paper-actions{ display:flex; flex-wrap:wrap; gap:10px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:13.5px; font-weight:700;
  padding:10px 18px; border-radius:8px; text-decoration:none; border:1px solid transparent; cursor:pointer;
  min-height:42px; transition: all .18s ease; text-align:center; box-sizing:border-box;
}
.btn-block{ display:flex; width:100%; }
.btn-ghost{ background: transparent; border-color: var(--line); color: var(--navy); }
.btn-ghost:hover{ border-color: var(--emerald); color: var(--emerald); background: rgba(0,105,92,.05); }
[data-theme="dark"] .btn-ghost{ color:#EAF1F7; }
.btn-solid, .btn-primary{ background: var(--emerald); color:#FFFFFF !important; box-shadow: 0 2px 6px rgba(0,105,92,.25); }
.btn-solid:hover, .btn-primary:hover{ background: var(--emerald-ink); box-shadow: 0 4px 12px rgba(0,105,92,.35); transform: translateY(-1px); color:#FFFFFF !important; }
.btn-gold{ background: #B08D3E; color:#FFFFFF !important; box-shadow: 0 2px 6px rgba(176,141,62,.3); }
.btn-gold:hover{ background: #96762E; color:#FFFFFF !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(176,141,62,.4); }

/* ============================================================
   SEARCH RESULTS (search.php)
   ============================================================
   The results list reuses .paper-card/.paper-eyebrow/.paper-title
   as-is (same card look used elsewhere for article listings) — only
   what's actually new here is styled below: the big hero search box,
   the per-result date line, the excerpt paragraph, pagination, and
   the "no results" empty state. */
.search-hero-summary{ color: var(--ink-soft); font-size:15.5px; margin: 4px 0 20px; }
.search-hero-form{
  display:flex; align-items:center; gap:10px; max-width:640px;
  background: var(--paper); border:1px solid var(--line); border-radius: 999px;
  padding: 6px 8px 6px 18px; box-shadow: var(--shadow-sm);
}
.search-hero-form .icon{ color: var(--ink-faint); flex:none; }
.search-hero-form input[type="text"]{
  flex:1; min-width:0; border:0; background:transparent; font-size:15px; font-family: var(--font-ui);
  color: var(--ink); height:44px; padding:0;
}
.search-hero-form input[type="text"]:focus{ outline:none; }
.search-hero-form .btn{ flex:none; border-radius:999px; }
[data-theme="dark"] .search-hero-form{ background: var(--sand); }

.search-results-panel{ min-width:0; }
.search-result-meta{
  display:flex; align-items:center; gap:6px;
  font-family: var(--font-mono); font-size:12.5px; color: var(--ink-faint); margin:0 0 12px;
}
.search-result-meta .icon{ width:14px; height:14px; }
.search-result-excerpt{ color: var(--ink-soft); font-size:15px; line-height:1.65; margin-bottom:16px; }
.search-result-excerpt p{ margin:0; }

.search-pagination{
  display:flex; flex-wrap:wrap; gap:8px; margin: 8px 0 0; justify-content:center;
}
.search-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px;
  padding:0 14px; border-radius:8px; border:1px solid var(--line); background: var(--paper);
  color: var(--navy); font-weight:700; font-size:14px; text-decoration:none; transition: all .15s ease;
}
[data-theme="dark"] .search-pagination .page-numbers{ color:#EAF1F7; }
.search-pagination .page-numbers:hover{ border-color: var(--emerald); color: var(--emerald); }
.search-pagination .page-numbers.current{ background: var(--emerald); border-color: var(--emerald); color:#fff !important; }
.search-pagination .page-numbers.dots{ border:0; background:transparent; }

.search-no-results{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding: 48px 32px; text-align:center; box-shadow: var(--shadow-sm);
}
.search-no-results h2{ margin: 14px 0 8px; }
.search-no-results p{ color: var(--ink-soft); max-width:52ch; margin: 0 auto 22px; line-height:1.6; }
.search-no-results-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }

@media (max-width: 600px){
  .search-hero-form{ flex-wrap:wrap; border-radius: var(--radius); padding:12px; }
  .search-hero-form input[type="text"]{ flex:1 1 100%; order:1; height:40px; }
  .search-hero-form .btn{ order:2; flex:1 1 100%; }
}

/* ============================================================
   404 (NOT FOUND) PAGE (404.php)
   ============================================================ */
.notfound-hero{
  padding: 56px 0 48px;
  background:
    radial-gradient(1200px 260px at 85% -30%, rgba(0,105,92,.1), transparent 70%),
    var(--paper);
  border-bottom: 1px solid var(--line);
}
.notfound-hero-inner{
  display:grid; grid-template-columns: 1fr; gap:40px; align-items:center;
}
@media (min-width: 960px){
  .notfound-hero-inner{ grid-template-columns: minmax(0,1fr) 380px; }
}
.notfound-copy{ min-width:0; }
.notfound-hero .kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color: var(--emerald); background: rgba(0,105,92,.09); border:1px solid rgba(0,105,92,.25);
  padding:5px 12px; border-radius:999px; margin-bottom:16px;
}
.notfound-hero h1{
  font-size: clamp(1.65rem, 1.1rem + 1.8vw, 2.35rem);
  letter-spacing:-.02em; font-weight:800; margin: 0 0 14px; color: var(--navy);
}
[data-theme="dark"] .notfound-hero h1{ color:#EAF1F7; }
.notfound-hero .lede{ color: var(--ink-soft); font-size:16px; line-height:1.6; margin: 0 0 26px; max-width:56ch; }
.notfound-hero .search-hero-form{ max-width:480px; margin-bottom:20px; }
.notfound-actions{ display:flex; flex-wrap:wrap; gap:10px; }

.notfound-illustration{ width:100%; max-width:420px; margin:0 auto; }
.bird-motion{ fill:none; stroke: var(--line); stroke-width:3; stroke-linecap:round; opacity:.8; }
.bird-thread{ fill:none; stroke: var(--ink-faint); stroke-width:2; stroke-dasharray:4 5; }
.bird-tail, .bird-body, .bird-head{ fill: var(--navy); }
.bird-wing{ fill: var(--emerald); }
.bird-beak, .bird-star{ fill: var(--gold); }
.bird-eye{ fill: var(--paper); }
.envelope-body{ fill: var(--paper); stroke: var(--navy); stroke-width:2.5; }
.envelope-flap{ fill:none; stroke: var(--navy); stroke-width:2.5; stroke-linejoin:round; }
.envelope-seal{ fill: var(--gold); }

.notfound-contact{ padding: 44px 0 8px; }
.notfound-contact-lede{ text-align:center; color: var(--ink-soft); font-size:15.5px; max-width:56ch; margin: -6px auto 28px; }
.notfound-contact-grid{
  display:grid; grid-template-columns: 1fr; gap:16px; max-width: 900px; margin: 0 auto;
}
@media (min-width: 760px){ .notfound-contact-grid{ grid-template-columns: repeat(3, 1fr); } }
.notfound-contact-card{ text-align:center; }
.notfound-contact-card .icon{ width:26px; height:26px; color: var(--emerald); margin-bottom:10px; }
.notfound-contact-card h3{
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-faint); margin-bottom:8px;
}
.notfound-contact-card p{ margin:0; color: var(--ink); font-size:14.5px; line-height:1.5; }
.notfound-contact-card a{ color: var(--navy); font-weight:600; text-decoration:none; }
.notfound-contact-card a:hover{ color: var(--emerald); text-decoration:underline; }
[data-theme="dark"] .notfound-contact-card a{ color:#EAF1F7; }

@media (max-width: 600px){
  .notfound-hero{ padding: 40px 0 32px; }
  .notfound-illustration{ max-width:280px; }
}

/* Safety net for native Gutenberg "Buttons"/"File" blocks — if an
   ALREADY-PUBLISHED article or page's content was typed or pasted
   directly into the block editor rather than going through the
   theme's own .btn-solid/.btn-ghost markup, these still pick up the
   site's accent color instead of WordPress core's hardcoded dark-gray
   default. Scoped to .ijar-legacy-content (added by functions.php
   only for content published before the cutoff date there) so it
   never applies to new Articles/Pages going forward — those are left
   exactly as the templates already render them. This does NOT fix
   hand-set inline styles (e.g. a pasted span with its own
   style="color:...") — those need the content itself re-entered
   through the proper Article/Page fields, since no stylesheet rule
   can safely override an arbitrary inline color on arbitrary text. */
.ijar-legacy-content .wp-block-button__link,
.ijar-legacy-content .wp-block-file__button{
  background: var(--emerald) !important;
  color: #fff !important;
  border-radius: 999px;
}
.ijar-legacy-content .wp-block-button__link:hover,
.ijar-legacy-content .wp-block-file__button:hover{
  background: var(--emerald-ink) !important;
}
.ijar-legacy-content .wp-block-button.is-style-outline .wp-block-button__link{
  background: transparent !important;
  color: var(--emerald) !important;
  border: 2px solid var(--emerald) !important;
}

/* Best-effort catch-all for legacy PAGE buttons (e.g. "DOWNLOAD PDF" /
   "Table of Contents") that aren't Gutenberg buttons at all — some
   pasted-content pages use a plain <a> carrying its own inline
   background-color, or an old page-builder's button class, instead of
   .wp-block-button__link. Since the exact markup varies page to page
   and wasn't confirmed against live source, this is intentionally
   broad: any link or button-like element inside the page body that
   sets its own background is forced to the theme's emerald so it
   reads as one of "our" buttons instead of a leftover old-site color.
   Deliberately scoped to `.page` (WordPress's own body_class for the
   "Page" post type) as well as `.ijar-legacy-content`, so this NEVER
   touches native Posts (single.php) or the Article CPT
   (single-article.php) — only old content rendered through page.php.
   If this doesn't fully catch it, send the exact element's outerHTML
   (right-click → Inspect) and it can be targeted precisely. */
.page.ijar-legacy-content .prose a[style*="background"],
.page.ijar-legacy-content .prose a.button,
.page.ijar-legacy-content .prose a.btn,
.page.ijar-legacy-content .prose .su-button,
.page.ijar-legacy-content .prose .elementor-button{
  background: var(--emerald) !important;
  background-color: var(--emerald) !important;
  color: #fff !important;
  border-color: var(--emerald) !important;
}
.page.ijar-legacy-content .prose a[style*="background"]:hover,
.page.ijar-legacy-content .prose a.button:hover,
.page.ijar-legacy-content .prose a.btn:hover,
.page.ijar-legacy-content .prose .su-button:hover,
.page.ijar-legacy-content .prose .elementor-button:hover{
  background: var(--emerald-ink) !important;
  background-color: var(--emerald-ink) !important;
}

/* Dark mode on legacy Pages, final answer: several rounds of forcing
   individual elements (headings, <strong>, inline-styled spans, then
   a blanket "every element" rule) all traced correctly through
   DevTools — Computed tab confirmed both the right color AND full
   opacity on the actual text — yet it still rendered washed out live.
   That mismatch means the problem was never the text color; something
   else (a background, filter, or leftover element from the old site)
   was painting over it in a way DevTools' per-element inspection
   couldn't pin down in a reasonable number of rounds.

   Given that, and that these are old, already-published articles that
   won't be edited going forward, the practical fix is to stop trying
   to invert them at all: the pasted-content column now stays in its
   normal LIGHT appearance regardless of the site's dark-mode toggle —
   the toggle still fully works on the rest of the page (the sidebar
   widgets, header, "Share This Page", all of which already looked
   correct in dark mode and were never part of this complaint), it
   just has no visible effect on the content column itself. Scoped to
   `.issue-panel` (the wrapper around `.prose`, page.php only — see
   the layout markup there) rather than the whole page, specifically
   so the sidebar/header keep responding to the toggle normally and
   only the actual problem area is locked. Locking every design-token
   custom property back to its light value here beats both dark-mode
   paths ([data-theme="dark"] and prefers-color-scheme) outright via
   !important — nothing downstream needs to know dark mode was ever
   active. */
.page.ijar-legacy-content .issue-panel{
  --paper: #FFFFFF !important;
  --sand: #F8F9FA !important;
  --line: #E3E7EC !important;
  --ink: #1B2733 !important;
  --ink-soft: #4A5568 !important;
  --ink-faint: #8592A3 !important;
}
/* --navy, --navy-ink, --emerald, --emerald-ink, and --gold are
   deliberately NOT locked here (an earlier version of this rule did
   lock them, which was a bug: those five tokens are what the site's
   own accent-colour picker — a separate, pre-existing feature, set via
   applyAccent() in ijar.js — writes to directly on <html> as an inline
   style whenever a visitor picks Navy/Ocean/Maroon/Forest/Slate. A
   locked value here, being a rule on .issue-panel with !important,
   always wins over that inline style for anything inside .issue-panel
   (buttons included), which silently broke the accent picker on
   legacy pages — DOWNLOAD PDF / Table of Contents stayed the default
   navy/emerald green no matter which swatch was chosen. Only the
   truly light/dark-only tokens above are locked, so legacy pages stay
   readable regardless of dark mode while the accent picker keeps
   working exactly as it does everywhere else on the site. */
/* The heading dark-mode fix earlier in this file is unscoped (it also
   fixes real new-content headings for OS-dark-mode visitors), so it
   would otherwise still force this content's headings light even with
   the background locked back to white. Cancel it specifically here —
   only h2/h3 (the only levels .prose actually uses; the page's own H1
   hero title lives outside .issue-panel and keeps responding to dark
   mode normally, since it was never part of the complaint). Scoped with
   .page (not just .ijar-legacy-content) so this NEVER applies to old
   native Posts via single.php, which uses the same .issue-panel/.prose
   structure but must keep responding to dark mode normally — per the
   standing "no changes to the posts and its design" instruction. */
[data-theme="dark"] .page.ijar-legacy-content .issue-panel h2,
[data-theme="dark"] .page.ijar-legacy-content .issue-panel h3{ color: var(--navy) !important; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .page.ijar-legacy-content .issue-panel h2,
  :root:not([data-theme="light"]) .page.ijar-legacy-content .issue-panel h3{ color: var(--navy) !important; }
}

/* Legacy-content reading-rail + sidebar fix — same .ijar-legacy-content
   scoping as the button safety net above (functions.php only adds the
   class for content published before IJAR_LEGACY_CONTENT_CUTOFF).
   Pages from that era were authored by pasting content straight into
   a WordPress Page rather than through the Article/ACF template, so
   they have no H2 headings for the reading-progress rail's JS to
   populate with dots — the rail (.progress-rail / .progress-rail-line,
   see the ARTICLE PAGE ADDITIONS section below) was rendering as a
   bare, dot-less vertical line running down next to the abstract.
   Separately, the metrics sidebar's `position:sticky` (base rule
   above) pins it near the top of the viewport once you scroll past
   it, which on a very long pasted article reads as "stuck"/fixed
   rather than scrolling naturally with the page. Both are switched
   off for legacy content only — new Articles/Pages keep the rail and
   sticky sidebar exactly as before. */
.ijar-legacy-content .progress-rail{
  display: none !important;
}
@media (min-width: 1080px){
  .ijar-legacy-content .layout-article{
    grid-template-columns: minmax(0,1fr) 300px !important;
  }
  .ijar-legacy-content .metrics-side{
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    top: auto !important;
  }
}

.index-strip{
  display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center;
  font-family: var(--font-mono); font-size:13px; color: var(--ink-soft);
  background: var(--sand); border:1px solid var(--line); border-radius: var(--radius);
  padding: 16px 20px; margin-bottom:24px;
}
.index-strip a{ color: var(--emerald); text-decoration:none; font-weight:700; display:inline-flex; align-items:center; gap:6px; }

.empty-note{
  border:1px dashed var(--line); border-radius: var(--radius); padding: 28px 24px; color: var(--ink-soft);
  font-family: var(--font-serif); font-size:16px; background: var(--sand);
}

/* Right: metrics / info sidebar */
.metrics-side{ display:flex; flex-direction:column; gap:20px; min-width:0; }
@media (min-width: 1080px){ .metrics-side{ position: sticky; top: calc(var(--header-h) + 92px); max-height: calc(100vh - var(--header-h) - 120px); overflow:auto; padding-right:2px; } }
.metrics-side.is-static{ position: static; max-height: none; overflow: visible; }
.widget{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow-sm);
}
.widget h3{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-faint); margin-bottom:14px; }
.search-form{ display:flex; gap:8px; width:100%; }
.search-form input[type="text"]{
  flex:1; min-width:0; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:14px;
  background: var(--sand); color: var(--ink); font-family: var(--font-ui); height:42px; box-sizing:border-box;
}
.search-form button{
  background: var(--navy); color:#fff; border:0; border-radius:8px; padding:0 16px; cursor:pointer; font-size:13.5px; font-weight:600;
  height:42px; min-width:44px; display:inline-flex; align-items:center; justify-content:center; flex:none;
  transition: background .15s ease;
}
.search-form button:hover{ background: var(--emerald); }

/* GOOGLE CSE & EMBEDDED SEARCH BAR RESPONSIVE OVERRIDES */
#cseSearchContainer .gsc-search-box,
#cseSearchContainer form.gsc-search-box,
#cseSearchContainer table.gsc-search-box,
.gcse-searchresults-only .gsc-search-box,
.gcse-searchresults-only table.gsc-search-box {
  display: none !important;
}
.gsc-control-cse{
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--font-ui) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
form.gsc-search-box, table.gsc-search-box{
  margin-bottom: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.gsc-search-box td.gsc-input{
  padding-right: 8px !important;
}
td.gsc-search-button{
  width: auto !important;
}
input.gsc-input{
  background: var(--sand) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  height: 42px !important;
  box-sizing: border-box !important;
}
.gsc-input-box{
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: var(--sand) !important;
  height: auto !important;
}
button.gsc-search-button, input.gsc-search-button, .gsc-search-button-v2{
  background-color: var(--navy) !important;
  border-color: var(--navy) !important;
  border-radius: 8px !important;
  padding: 10px 18px !important;
  height: 42px !important;
  min-width: 44px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}
button.gsc-search-button:hover, .gsc-search-button-v2:hover{
  background-color: var(--emerald) !important;
  border-color: var(--emerald) !important;
}
.gsc-search-button-v2 svg{
  fill: #ffffff !important;
  width: 16px !important;
  height: 16px !important;
}
@media (max-width: 600px){
  table.gsc-search-box, tbody, tr, td.gsc-input, td.gsc-search-button{
    display: block !important;
    width: 100% !important;
  }
  td.gsc-search-button{
    margin-top: 8px !important;
  }
  button.gsc-search-button, .gsc-search-button-v2{
    width: 100% !important;
    justify-content: center !important;
  }
  .search-form{
    flex-direction: column;
  }
  .search-form button{
    width: 100%;
  }
}
.issn-row{ display:flex; gap:8px; flex-wrap:wrap; }
.issn-chip{
  font-family: var(--font-mono); font-size:12px; font-weight:600; background: var(--sand); border:1px solid var(--line);
  padding:6px 10px; border-radius:6px; color: var(--ink-soft);
}
.oa-badge{ display:flex; gap:12px; align-items:flex-start; }
.oa-badge img{ width:56px; height:auto; flex:none; }
.oa-badge p{ font-size:13px; color: var(--ink-soft); margin:0; line-height: 1.5; }

.citescore-card{
  border:1px solid var(--line); border-radius:10px; padding:14px; text-decoration:none; color:inherit; display:block;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.citescore-card:hover{ border-color: var(--emerald); box-shadow: var(--shadow-sm); }
.citescore-top{ display:flex; justify-content:space-between; align-items:flex-end; }
.citescore-num{ font-size:30px; font-weight:800; color: var(--navy); letter-spacing:-1px; line-height:1; }
[data-theme="dark"] .citescore-num{ color:#EAF1F7; }
.citescore-label{ font-size:12px; font-weight:600; color: var(--ink-faint); text-align:right; }
.citescore-bar{ height:5px; background: var(--line); border-radius:3px; margin-top:10px; overflow:hidden; }
.citescore-bar > span{ display:block; height:100%; background: var(--emerald); width:11%; }
.citescore-pct{ font-size:11.5px; font-weight:500; color: var(--ink-faint); margin-top:6px; }

.link-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.link-list a{
  display:flex; align-items:center; gap:10px; text-decoration:none; color: var(--ink-soft);
  font-size:14px; font-weight:500; padding:7px 8px; border-radius:6px; transition: all .15s ease;
}
.link-list a:hover{ color: var(--emerald); background: rgba(0,105,92,.08); }
.link-list .icon{ color: var(--gold); font-size:12px; width:14px; height:14px; }

/* QUICK LINKS SIDEBAR WIDGET */
.quick-links-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.quick-links-list a{
  display:flex; align-items:center; gap:10px; text-decoration:none; color: var(--navy);
  font-size:13.5px; font-weight:600; padding:9px 12px; border-radius:8px; background: var(--sand);
  border:1px solid var(--line); transition: all .18s ease;
}
[data-theme="dark"] .quick-links-list a{ color:#EAF1F7; background:#182430; }
.quick-links-list a:hover,
.quick-links-list a.active,
.quick-links-list a[aria-current="page"]{
  background: var(--emerald) !important; color:#FFFFFF !important; border-color: var(--emerald) !important;
  transform: translateX(4px); box-shadow: 0 4px 12px rgba(0, 105, 92, 0.25);
}
.quick-links-list a .icon{ color: var(--gold); font-size:14px; width:16px; height:16px; flex:none; transition: color .18s ease; }
.quick-links-list a:hover .icon,
.quick-links-list a.active .icon,
.quick-links-list a[aria-current="page"] .icon{ color:#FFFFFF !important; }

/* RECENTLY PUBLISHED SIDEBAR WIDGET */
.recent-list{
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.recent-list::-webkit-scrollbar {
  width: 5px;
}
.recent-list::-webkit-scrollbar-thumb {
  background-color: var(--line);
  border-radius: 4px;
}
.recent-list li a{
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
  padding: 8px 10px;
  border-radius: 6px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.recent-list li:last-child a{
  border-bottom: 0;
}
.recent-list li a:hover, .recent-list li a:focus-visible{
  background: rgba(0,105,92,.08);
  color: var(--emerald);
}
[data-theme="dark"] .recent-list li a{
  color: #C9D6E3;
}
[data-theme="dark"] .recent-list li a:hover{
  color: #4DB6AC;
  background: rgba(77,182,172,.12);
}
.recent-list-hint{
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-faint);
  margin-top: 8px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.recent-list-hint::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald);
}

.news-ticker{
  height: 96px; overflow:hidden; position:relative; border-radius:8px; background: var(--sand); border:1px solid var(--line);
}
.news-track{ position:absolute; inset:0; display:flex; flex-direction:column; animation: ticker 16s linear infinite; }
.news-track p{ margin:0; padding:12px 14px; font-size:13.5px; color: var(--ink-soft); font-family: var(--font-serif); font-style:italic; }
@keyframes ticker{ 0%,20%{ transform: translateY(0);} 33%,53%{ transform: translateY(-33.333%);} 66%,86%{ transform: translateY(-66.666%);} 100%{ transform: translateY(-100%);} }
@media (prefers-reduced-motion: reduce){ .news-track{ animation:none; } .news-ticker{ height:auto; overflow:visible; } .news-track{ position:static; } }

.scimago-badge{ text-align:center; }
.scimago-badge img{ margin: 0 auto; border-radius: 6px; }

.cc-note{ font-size:12.5px; color: var(--ink-faint); line-height:1.6; }
.cc-note a{ color: var(--emerald); font-weight: 600; }

/* ============================================================
   ARCHIVE (Past Issues)
   ============================================================ */
.last-updated{ font-size:13px; color: var(--ink-faint); margin: 6px 0 20px; font-family: var(--font-mono); font-weight: 500; }
.archive-section{ padding: 48px 0; background: var(--sand); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-heading{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.section-heading h2{ font-size: clamp(1.25rem, 1rem + .7vw, 1.65rem); margin:0; font-weight: 800; }
.section-heading .hint{ font-size:13.5px; color: var(--ink-faint); font-weight: 500; }
.archive-group{ background: var(--paper); border:1px solid var(--line); border-radius:10px; margin-bottom:12px; overflow:hidden; }
.archive-group summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; font-weight:700; color: var(--navy); font-size:15.5px;
}
[data-theme="dark"] .archive-group summary{ color:#EAF1F7; }
.archive-group summary::-webkit-details-marker{ display:none; }
.archive-group summary::after{ content:"+"; color: var(--emerald); font-size:20px; font-weight:400; }
.archive-group[open] summary::after{ content:"\2212"; }
.archive-group-title{ display:inline-flex; align-items:center; gap:10px; }
.archive-group-title .icon{ color: var(--gold); font-size:18px; flex:none; }
.archive-group-count{ font-weight:500; font-size:13px; color: var(--ink-faint); margin-left:12px; margin-right:auto; padding-left:12px; }
.archive-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap:12px;
  padding: 6px 20px 20px;
}
/* COLLAPSIBLE VOLUME ACCORDION & UPCOMING TAG STYLES */
.archive-volume-grid{ display:flex; flex-direction:column; gap:14px; margin-top:20px; }
.volume-card-collapsible{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow:hidden; transition: border-color .2s ease;
}
.volume-card-collapsible[open]{ border-color: var(--emerald); }
.volume-card-header-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; padding:16px 20px;
  background: var(--paper); border:0; cursor:pointer; font-family: var(--font-ui); text-align:left;
  transition: background .15s ease; list-style:none; outline:none; user-select:none;
}
.volume-card-header-btn::-webkit-details-marker{ display:none; }
.volume-card-header-btn:hover{ background: var(--sand); }
.volume-title-group{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.volume-title{ font-size:17.5px; font-weight:800; color: var(--navy); margin:0; display:flex; align-items:center; gap:10px; }
[data-theme="dark"] .volume-title{ color:#EAF1F7; }

.upcoming-tag{
  display:inline-flex; align-items:center; gap:6px; background: linear-gradient(135deg, #e65100, #f57c00);
  color: #FFFFFF !important; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:3px 10px; border-radius:20px; box-shadow: 0 2px 6px rgba(230, 81, 0, 0.25);
}
.upcoming-tag .icon{ width:12px; height:12px; fill:currentColor; }

.year-badge{
  font-size:12px; font-weight:600; background: rgba(0,105,92,.1); color: var(--emerald);
  padding:3px 10px; border-radius:14px;
}

.accordion-chevron{
  color: var(--ink-faint); width:18px; height:18px; transition: transform .25s ease, color .2s ease; flex:none;
}
.volume-card-collapsible[open] .accordion-chevron{ transform: rotate(90deg); color: var(--emerald); }

.issue-chips-wrapper{ padding: 14px 20px 20px; border-top:1px solid var(--line); background: var(--paper); }
.issue-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.issue-chip{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:8px;
  background: var(--sand); border:1px solid var(--line); color: var(--navy); font-size:13.5px;
  font-weight:600; text-decoration:none; transition: all .18s ease;
}
[data-theme="dark"] .issue-chip{ color:#EAF1F7; background:#182430; }
.issue-chip:hover:not(.disabled){
  background: var(--emerald); color:#FFFFFF !important; border-color: var(--emerald);
  transform: translateY(-2px); box-shadow: var(--shadow-sm);
}
.issue-chip.disabled{
  opacity:0.75; cursor:not-allowed; background: var(--sand); border-style:dashed; color: var(--ink-faint);
}
.issue-chip-upcoming{
  background: rgba(230, 81, 0, 0.08) !important; border: 1px dashed #f57c00 !important; color: #e65100 !important;
}
[data-theme="dark"] .issue-chip-upcoming{ color: #ff9800 !important; background: rgba(255, 152, 0, 0.1) !important; }

/* ARCHIVE TOOLBAR (Expand All / Collapse All) & ISSUES COUNT CHIPS */
.archive-toolbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  margin-top:20px; margin-bottom:16px; padding:12px 18px; background: var(--sand);
  border:1px solid var(--line); border-radius: var(--radius);
}
.archive-toolbar-title{ font-size:14px; font-weight:700; color: var(--navy); margin:0; }
[data-theme="dark"] .archive-toolbar-title{ color:#EAF1F7; }
.archive-toolbar-actions{ display:flex; gap:8px; }
.archive-control-btn{
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:6px;
  background: var(--paper); border:1px solid var(--line); color: var(--navy); font-size:12.5px;
  font-weight:600; cursor:pointer; transition: all .15s ease; user-select:none;
}
[data-theme="dark"] .archive-control-btn{ color:#EAF1F7; background:#182430; }
.archive-control-btn:hover{ background: var(--emerald); color:#FFFFFF !important; border-color: var(--emerald); }

.issues-count-chip{
  font-size:12px; font-weight:600; color: var(--ink-soft); background: rgba(0,105,92,0.06);
  padding:3px 10px; border-radius:14px; border:1px solid rgba(0,105,92,0.15);
}
[data-theme="dark"] .issues-count-chip{ background: rgba(77,208,217,0.08); color: #C9D6E3; border-color: rgba(77,208,217,0.2); }

.archive-card{
  display:flex; flex-direction:column; gap:3px; text-decoration:none; border:1px solid var(--line); border-radius:8px;
  padding:12px 14px; background: var(--sand); transition: all .15s ease;
}
[data-theme="dark"] .archive-card{ background:#182430; }
.archive-card:hover{ border-color: var(--emerald); transform: translateY(-1px); }
.archive-vol{ font-family: var(--font-serif); font-weight:700; color: var(--navy); font-size:14.5px; }
[data-theme="dark"] .archive-vol{ color:#EAF1F7; }
.archive-issue{ font-size:12.5px; color: var(--ink-faint); font-weight:500; }

/* ============================================================
   PARTNERS + CTA BAND
   ============================================================ */
.partners{ padding: 44px 0; }
.partners ul{ list-style:none; display:flex; flex-wrap:wrap; gap:36px; align-items:center; justify-content:center; margin:0; padding:0; }
.partners img{ height:44px; width:auto; filter: grayscale(1) opacity(.75); transition: filter .2s ease; }
.partners img:hover{ filter: grayscale(0) opacity(1); }
[data-theme="dark"] .partners img{ filter: grayscale(1) opacity(.6) invert(.85); }
[data-theme="dark"] .partners img:hover{ filter: grayscale(0) opacity(1) invert(0); }

.cta-band{ background: linear-gradient(145deg, var(--navy), #0a335a); color:#fff; }
.cta-band .container{ display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; padding: 34px 20px; }
.cta-band h2{ color:#fff; font-size:1.35rem; font-weight:800; margin:0 0 6px; }
.cta-band p{ margin:0; color:#C9D6E3; font-size:15px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background: var(--sand); padding: 48px 0 24px; border-top:1px solid var(--line); }
.footer-grid{ display:grid; grid-template-columns: 1fr; gap:32px; }
@media (min-width: 760px){ .footer-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px){ .footer-grid{ grid-template-columns: repeat(4, 1fr); } }
.footer-col h4{ font-size:13.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color: var(--ink-faint); margin-bottom:16px; }
.footer-col p, .footer-col li{ font-size:14px; color: var(--ink-soft); line-height: 1.6; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-col a{ text-decoration:none; color: var(--ink-soft); transition: all .18s ease; }
.footer-col a:hover,
.footer-col a.active,
.footer-col a[aria-current="page"]{ color: var(--emerald) !important; font-weight:700; }
.footer-col address{ font-style:normal; }
.footer-bottom{
  margin-top:38px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
  font-size:13px; color: var(--ink-faint); font-weight: 500;
}
.footer-social{ display:flex; gap:14px; list-style:none; margin:0; padding:0; }
.footer-social a{
  width:36px; height:36px; min-width:36px; min-height:36px; border-radius:50%; background: var(--paper); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; text-decoration:none; color: var(--ink-soft);
  transition: all .15s ease;
}
.footer-social a:hover{ color: var(--emerald); border-color: var(--emerald); transform: translateY(-1px); }

/* ============================================================
   MOBILE DRAWER (outline nav)
   ============================================================ */
.drawer-backdrop{
  position: fixed; inset:0; background: rgba(6,15,25,.6); z-index: 150; opacity:0; pointer-events:none; transition: opacity .25s ease;
}
.drawer-backdrop.is-open{ opacity:1; pointer-events:auto; }
.mobile-drawer{
  position: fixed; top:0; left:0; bottom:0; width: min(86vw, 360px); background: var(--paper); z-index:151;
  transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow-lg);
  display:flex; flex-direction:column; padding: 20px; overflow-y:auto;
}
.mobile-drawer.is-open{ transform: translateX(0); }
.mobile-drawer .drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.mobile-drawer nav ul{ list-style:none; margin:0 0 20px; padding:0; }
.mobile-drawer nav > ul > li > a{ display:block; padding:12px 6px; font-weight:700; color: var(--navy); text-decoration:none; border-bottom:1px solid var(--line); font-size: 15px; }
[data-theme="dark"] .mobile-drawer nav > ul > li > a{ color:#EAF1F7; }
.mobile-drawer nav ul ul{ padding-left:14px; }
.mobile-drawer nav ul ul a{ font-weight:500; font-size:14px; color: var(--ink-soft); border-bottom:0; padding:9px 6px; }

/* ============================================================
   MOBILE STICKY ACTION BAR
   ============================================================ */
.mobile-actionbar{
  position: fixed; left:0; right:0; bottom:0; z-index:120;
  display:flex; background: var(--navy); border-top:1px solid rgba(255,255,255,.1);
  padding: 6px max(6px, env(safe-area-inset-bottom));
  box-shadow: 0 -4px 16px rgba(0,0,0,.15);
}
@media (min-width: 1080px){ .mobile-actionbar{ display:none; } }
.mobile-actionbar button, .mobile-actionbar a{
  flex:1; background:none; border:0; color:#DCE6F0; display:flex; flex-direction:column; align-items:center; gap:4px;
  font-size:11px; font-weight:600; padding:8px 2px; text-decoration:none; font-family: var(--font-ui);
}
.mobile-actionbar .icon{ font-size:20px; }
.mobile-actionbar .is-primary{ color:#fff; }
.mobile-actionbar .is-primary .icon{ color: var(--emerald); }

@media (max-width: 1079px){ body{ padding-bottom: 64px; } }

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-to-top{
  position: fixed; right:22px; bottom:26px; z-index:130;
  width:48px; height:48px; min-width:48px; min-height:48px; border-radius:50%; border:1px solid var(--line);
  background: var(--navy); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-lg); cursor:pointer;
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s, background .15s ease;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform: translateY(0); }
.back-to-top:hover{ background: var(--emerald); }
.back-to-top .icon{ width:22px; height:22px; }
@media (max-width: 1079px){ .back-to-top{ bottom: 78px; } }
@media print{ .back-to-top{ display:none !important; } }

/* Print: emulate physical journal page */
@media print{
  .site-header, .breadcrumb-bar, .outline, .metrics-side, .mobile-actionbar, .utility-bar, .archive-section, .partners, .cta-band, .site-footer{ display:none !important; }
  body{ font-family: var(--font-serif); }
}

/* ============================================================
   INNER PAGES: section navigation, prose content, board grid
   ============================================================ */
.section-nav{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.section-nav > li > a{
  display:block; text-decoration:none; color: var(--ink-soft); font-size:13.5px; font-weight:600;
  padding:8px 8px; border-radius:6px; line-height:1.35;
}
.section-nav > li > a:hover{ background: rgba(0,105,92,.08); color: var(--emerald); }
.section-nav > li > a[aria-current="page"]{ color: var(--emerald); background: rgba(0,105,92,.09); }
.section-nav .group-label{
  display:block; font-size:13.5px; font-weight:600; color: var(--ink-soft); padding:8px 8px 4px;
}
.section-nav ul{ list-style:none; margin:0 0 4px; padding:0 0 0 14px; display:flex; flex-direction:column; gap:1px; }
.section-nav ul a{
  display:block; text-decoration:none; color: var(--ink-faint); font-size:12.5px; padding:6px 8px; border-radius:6px;
}
.section-nav ul a:hover{ background: rgba(0,105,92,.08); color: var(--emerald); }
.section-nav ul a[aria-current="page"]{ color: var(--emerald); font-weight:600; }
.section-nav > li{ border-top:1px solid var(--line); margin-top:4px; padding-top:4px; }
.section-nav > li:first-child{ border-top:0; margin-top:0; padding-top:0; }

/* Long-form editorial prose (About Us, policies, etc.) */
/* Was max-width:74ch — a classic "ideal reading line length" cap, but
   at this layout's actual column width (grid track ~900px, minus the
   44px rail and 300px sidebar) it left a wide strip of empty space
   between the text and the sidebar. Widened to fill the column better
   while still capping line length so it doesn't run edge-to-edge.
   Shared by page.php/single.php/single-article.php, so this applies
   everywhere (not legacy-only) — it's a general layout measurement,
   not something specific to old pasted content. */
.prose{ max-width:92ch; }
.prose h2{ font-size:20px; margin-top:2em; margin-bottom:.6em; padding-bottom:.4em; border-bottom:1px solid var(--line); font-weight:800; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:16.5px; margin-top:1.6em; font-weight:700; }
.prose p{ font-family: var(--font-serif); font-size:15.5px; line-height:1.7; color: var(--ink); margin:0 0 1.1em; }
.prose ul, .prose ol{ font-family: var(--font-serif); font-size:15.5px; line-height:1.7; color: var(--ink); margin:0 0 1.1em; padding-left:1.4em; }
.prose li{ margin-bottom:.4em; }
.prose strong{ color: var(--navy); }
[data-theme="dark"] .prose strong{ color:#EAF1F7 !important; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .prose strong{ color:#EAF1F7 !important; }
}
/* Same !important reasoning as the h1-h5 fix above: the parent
   theme's style.css was confirmed (via live DevTools inspection) to
   carry its own heading-color rule, likely !important — plain
   paragraph/list text is exposed to the same risk if the parent theme
   sets a color on p/li too, which .prose p's un-!important
   color:var(--ink) (base rule above) couldn't win against even though
   --ink itself correctly flips light in dark mode. Belt-and-braces. */
[data-theme="dark"] .prose p,
[data-theme="dark"] .prose li{ color:#E6EAEE !important; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .prose p,
  :root:not([data-theme="light"]) .prose li{ color:#E6EAEE !important; }
}
/* Cancel the two dark-mode text overrides above (strong, p/li) for
   legacy Pages specifically — same "lock to light" decision as the
   token override near the button-fix section. These are the two
   remaining hardcoded-color rules that would otherwise still fight
   the locked-light background even though the tokens themselves are
   pinned back to their light values. Scoped with .page (WordPress's
   own body_class() flag for Pages) so this can never match a native
   Post's body — single.php's old posts must keep responding to dark
   mode exactly as before, per the standing "no changes to the posts
   and its design" instruction. */
[data-theme="dark"] .page.ijar-legacy-content .prose strong{ color: var(--navy) !important; }
[data-theme="dark"] .page.ijar-legacy-content .prose p,
[data-theme="dark"] .page.ijar-legacy-content .prose li{ color: var(--ink) !important; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .page.ijar-legacy-content .prose strong{ color: var(--navy) !important; }
  :root:not([data-theme="light"]) .page.ijar-legacy-content .prose p,
  :root:not([data-theme="light"]) .page.ijar-legacy-content .prose li{ color: var(--ink) !important; }
}
.prose blockquote{
  margin: 1.4em 0; padding: 14px 18px; border-left:3px solid var(--emerald); background: var(--sand);
  border-radius: 0 8px 8px 0; font-family: var(--font-serif); font-style:italic; color: var(--ink-soft); font-size:14.5px;
}
.prose .callout{
  border:1px solid var(--line); background: var(--sand); border-radius: var(--radius); padding:16px 18px; margin:1.4em 0;
}
.prose .callout p:last-child{ margin-bottom:0; }
.fill-in{ color: var(--gold); background: rgba(176,141,62,.12); border-radius:4px; padding:0 4px; font-family: var(--font-mono); font-size:.92em; }

.link-list.recent-list{ gap:4px; max-height:22em; overflow-y:auto; padding-right:6px; scrollbar-width:thin; }
.link-list.recent-list a{ display:block; white-space:normal; overflow-wrap:break-word; word-break:break-word; font-family: var(--font-serif); font-size:13px; line-height:1.45; padding:8px 6px; border-bottom:1px solid var(--line); }
.link-list.recent-list li:last-child a{ border-bottom:0; padding-bottom:4px; }
.recent-list-hint{ font-size:11px; color: var(--ink-faint); text-align:center; margin:8px 0 0; font-family: var(--font-mono); }
.widget select{ width:100%; font-family: var(--font-ui); font-size:13.5px; color: var(--ink); border:1px solid var(--line); border-radius:7px; padding:9px 10px; background: var(--sand); }

/* Editorial board */
.board-section{ margin-bottom:34px; }
.board-section h2{ font-size:13px; text-transform:uppercase; letter-spacing:.07em; color: var(--ink-faint); margin-bottom:16px; }
.board-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:640px){ .board-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1080px){ .board-grid.is-single{ grid-template-columns:1fr; max-width:520px; } }
.person-card{
  display:flex; gap:14px; background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding:16px; box-shadow: var(--shadow-sm);
}
.person-avatar{
  width:52px; height:52px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(155deg, var(--emerald), var(--navy)); color:#fff; font-family: var(--font-serif);
  font-weight:700; font-size:16px;
}
.person-info{ min-width:0; }
.person-name{ font-size:14.5px; font-weight:700; color: var(--navy); margin:0 0 2px; }
[data-theme="dark"] .person-name{ color:#EAF1F7; }
.person-role{ font-size:12px; color: var(--emerald); font-weight:600; margin:0 0 4px; }
.person-affil{ font-family: var(--font-serif); font-size:13px; color: var(--ink-soft); margin:0; line-height:1.4; }
.person-links{ margin-top:6px; display:flex; gap:10px; }
.person-links a{ font-size:11.5px; color: var(--ink-faint); text-decoration:none; }
.person-links a:hover{ color: var(--emerald); }

/* ============================================================
   SHARE WIDGET COMPONENT
   ============================================================ */
.share-widget{
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 20px; margin: 32px 0 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
}
.share-widget-label{
  display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--navy); margin: 0;
}
[data-theme="dark"] .share-widget-label{ color: #EAF1F7; }
.share-widget-label .icon{ color: var(--gold); font-size: 16px; }
.share-buttons{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.share-btn{
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  padding: 7px 12px; border-radius: 6px; text-decoration: none; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink-soft); cursor: pointer; transition: all .15s ease;
  font-family: var(--font-ui);
}
.share-btn:hover{ border-color: var(--emerald); color: var(--emerald); transform: translateY(-1px); }
.share-btn .icon{ font-size: 14px; }
.share-btn-x:hover{ border-color: #000; color: #000; }
[data-theme="dark"] .share-btn-x:hover{ border-color: #fff; color: #fff; }
.share-btn-facebook:hover{ border-color: #1877F2; color: #1877F2; }
.share-btn-linkedin:hover{ border-color: #0A66C2; color: #0A66C2; }
.share-btn-whatsapp:hover{ border-color: #25D366; color: #25D366; }
.share-toast{
  position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-lg); z-index: 200; opacity: 0; pointer-events: none; transition: all .25s ease;
}
.share-toast.is-show{ opacity: 1; transform: translateX(-50%) translateY(0); }
@media (min-width: 1080px){ .share-toast{ bottom: 30px; } }


/* ============================================================
   ARTICLE PAGE ADDITIONS (folded in from the full-article mockup)
   New classes for the single full-text article template: fact strip,
   abstract box, keyword chips, reading-progress rail, download-list
   selection state, breadcrumb ISSN, and the Cite This Article modal.
   Reuses the existing tokens above (--navy, --emerald, --sand, --line,
   --gold, fonts) rather than introducing new ones.
   ============================================================ */
  .eyebrow-doctype{
    display:inline-block; font-family:var(--font-mono); font-size:11.5px; font-weight:600;
    letter-spacing:.06em; text-transform:uppercase; color: var(--emerald);
    background: rgba(0,105,92,.08); padding:4px 10px; border-radius:20px; margin-bottom:12px;
  }
  .article-authors{ font-size:15px; color: var(--ink-soft); margin:0 0 6px; }
  .article-authors b{ color: var(--navy); font-weight:700; }
  [data-theme="dark"] .article-authors b{ color:#EAF1F7; }
  .article-authors sup{ color: var(--gold); font-weight:700; }
  .article-affil{ font-size:13px; color: var(--ink-faint); margin:0 0 2px; }
  .article-affil sup{ color: var(--gold); font-weight:700; }
  .article-corresponding{
    font-size:13px; color: var(--ink-soft); margin-top:10px; padding-top:10px;
    border-top:1px dashed var(--line);
  }
  .factstrip{ display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 26px; }
  .factstrip .fact{
    font-family:var(--font-mono); font-size:12px; color: var(--ink-soft);
    background: var(--sand); border:1px solid var(--line); border-radius:8px; padding:7px 12px;
  }
  .factstrip .fact b{ color: var(--navy); font-weight:700; }
  [data-theme="dark"] .factstrip .fact b{ color:#EAF1F7; }

  .abstract-box{
    background: var(--sand); border:1px solid var(--line); border-left:4px solid var(--emerald);
    border-radius: 0 var(--radius) var(--radius) 0; padding:22px 24px; margin-bottom:26px;
  }
  .abstract-box h2{
    font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em;
    color: var(--emerald); margin:0 0 14px; border:0; padding:0;
  }
  .abstract-box h3{ font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color: var(--gold); margin:14px 0 4px; font-weight:700; }
  .abstract-box h3:first-of-type{ margin-top:0; }
  .abstract-box p{ font-family:var(--font-serif); font-size:15px; margin:0 0 2px; color: var(--ink); }

  .kw-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:36px; }
  .kw-chip{ font-size:12.5px; padding:5px 12px; border:1px solid var(--line); border-radius:20px; color: var(--ink-soft); }

  .refs-list{ list-style:none; counter-reset:refnum; margin:14px 0 0; padding:0; }
  .refs-list li{
    counter-increment:refnum; position:relative; padding:8px 0 8px 32px; font-size:13px;
    color: var(--ink-soft); border-bottom:1px solid var(--line);
  }
  .refs-list li::before{
    content:"[" counter(refnum) "]"; position:absolute; left:0; top:8px;
    font-family:var(--font-mono); color: var(--gold); font-size:12px;
  }

  /* Sidebar additions */
  .stat-row{ display:flex; justify-content:space-between; align-items:baseline; padding:6px 0; }
  .stat-row + .stat-row{ border-top:1px solid var(--line); }
  .stat-num{ font-family:var(--font-mono); font-size:17px; font-weight:700; color: var(--navy); }
  [data-theme="dark"] .stat-num{ color:#EAF1F7; }
  .stat-label{ font-size:11.5px; color: var(--ink-faint); text-transform:uppercase; letter-spacing:.03em; }
  .dl-list{ display:flex; flex-direction:column; gap:8px; }
  .onpage-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
  .onpage-list a{
    display:block; text-decoration:none; color: var(--ink-soft); font-size:13px; font-weight:500;
    padding:7px 8px; border-radius:6px;
  }
  .onpage-list a:hover{ background: rgba(0,105,92,.08); color: var(--emerald); }

  /* Vertical reading-progress rail — now a real grid column sitting right
     beside the article text (like your earlier mockup), instead of being
     pinned to the viewport edge. Because it's a grid item inside the same
     row as the article, it's naturally contained by that row's height —
     once you scroll past the article into the footer, there's no rail
     column there for it to occupy, so it stops rather than trailing on. */
  .layout-article{
    display:grid; grid-template-columns:1fr; gap:32px; padding:32px 0 12px; align-items:start;
  }
  @media (min-width:1080px){
    .layout-article{ grid-template-columns: 44px minmax(0,1fr) 300px; }
  }
  .progress-rail{
    display:none;
  }
  @media (min-width:1080px){
    .progress-rail{
      display:flex; flex-direction:column; align-items:center;
      position:sticky; top:calc(var(--header-h) + 40px);
      height:calc(100vh - var(--header-h) - 80px);
    }
  }
  .progress-rail-line{ width:2px; flex:1; background:var(--line); position:relative; border-radius:2px; margin:8px 0; }
  .progress-dot{
    position:absolute; left:50%; transform:translateX(-50%);
    width:10px; height:10px; border-radius:50%;
    background:var(--paper); border:2px solid var(--line);
    cursor:pointer; transition:background .15s ease, border-color .15s ease, transform .15s ease;
  }
  .progress-dot:hover{ transform:translateX(-50%) scale(1.3); }
  .progress-dot.is-active{ background:var(--emerald); border-color:var(--emerald); }
  .progress-dot .progress-label{
    position:absolute; left:20px; top:50%; transform:translateY(-50%);
    white-space:nowrap; font-family:var(--font-mono); font-size:11px; font-weight:600;
    color:var(--ink-soft); background:var(--sand); border:1px solid var(--line);
    padding:3px 9px; border-radius:6px; opacity:0; pointer-events:none; transition:opacity .15s ease;
    z-index:5;
  }
  .progress-dot:hover .progress-label{ opacity:1; }
  @media print{ .progress-rail{ display:none !important; } }

  /* Fix #3: your base .metrics-side is sticky WITH an internal scrollbar
     (max-height + overflow:auto) once its content is taller than the
     viewport. Overriding to a plain sticky box with no inner scroll — it
     stays in view without ever becoming its own separate scroll pane. */
  #metricsSide{
    max-height:none !important;
    overflow:visible !important;
  }

  /* Fix #4: the four "Access This Article" actions should look identical
     until the user actually picks one — no button pre-highlighted as if
     already selected. Clicking an item marks IT as the active/selected
     format instead (see the small script near the closing body tag). */
  .dl-list .btn{
    background:transparent !important;
    color:var(--navy) !important;
    border:1px solid var(--line) !important;
    box-shadow:none !important;
  }
  [data-theme="dark"] .dl-list .btn{ color:#EAF1F7 !important; }
  .dl-list .btn:hover{
    border-color:var(--emerald) !important;
    color:var(--emerald) !important;
  }
  .dl-list .btn.is-selected{
    background:var(--emerald) !important;
    border-color:var(--emerald) !important;
    color:#FFFFFF !important;
  }

  /* ISSN — right side of the breadcrumb bar (same row as Home/IJAR/Vol/…) */
  .breadcrumb-bar .container{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:8px;
  }
  .breadcrumb-issn{
    font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft);
    white-space:nowrap;
  }
  .breadcrumb-issn a{ color:var(--ink-soft); text-decoration:none; }
  .breadcrumb-issn a:hover{ color:var(--emerald); text-decoration:underline; }

  /* ---------- Cite This Article modal ---------- */
  .cite-inline-link{
    background:none; border:none; padding:0; cursor:pointer;
    font-family:var(--font-mono); font-size:12px; font-weight:600;
    color:var(--emerald); text-decoration:underline; text-underline-offset:2px;
  }
  .cite-modal-backdrop{
    position:fixed; inset:0; background:rgba(10,20,20,.5);
    display:none; align-items:center; justify-content:center;
    padding:20px; z-index:300;
  }
  .cite-modal-backdrop.is-open{ display:flex; }
  .cite-modal{
    width:100%; max-width:640px; max-height:86vh; overflow:auto;
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow-lg);
  }
  .cite-modal-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 22px; border-bottom:1px solid var(--line);
  }
  .cite-modal-head h3{
    font-family:var(--font-serif); font-size:19px; margin:0; color:var(--navy);
  }
  [data-theme="dark"] .cite-modal-head h3{ color:#EAF1F7; }
  .cite-modal-close{
    background:var(--sand); border:1px solid var(--line); border-radius:8px;
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--navy);
  }
  .cite-tabs{ display:flex; gap:6px; padding:16px 22px 0; flex-wrap:wrap; }
  .cite-tab{
    font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.03em;
    padding:8px 14px; border-radius:20px; border:1px solid var(--line);
    background:transparent; color:var(--ink-soft); cursor:pointer;
  }
  .cite-tab.is-active{ background:var(--navy); border-color:var(--navy); color:#fff; }
  .cite-body{ padding:18px 22px 22px; }
  .cite-output{
    background:var(--sand); border:1px solid var(--line); border-radius:8px;
    padding:16px; font-family:var(--font-serif); font-size:14.5px; line-height:1.6;
    color:var(--ink); white-space:pre-wrap; word-break:break-word; margin:0 0 14px;
  }
  .cite-output.is-mono{ font-family:var(--font-mono); font-size:12.5px; }
  .cite-actions{ display:flex; flex-wrap:wrap; gap:8px; }
  .cite-actions .btn{ flex:1 1 auto; }
  .cite-copy-note{
    font-family:var(--font-mono); font-size:11px; color:var(--emerald); margin:8px 0 0;
    opacity:0; transition:opacity .2s ease;
  }
  .cite-copy-note.is-visible{ opacity:1; }