/* ============================================================
   JPSIM — Journal of Pakistan Society of Internal Medicine
   Main Stylesheet  |  style.css   |  Fully responsive — mobile-first
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@400;700&display=swap');

/* ── 1. CSS VARIABLES ──────────────────────────────────────── */
:root {
  --primary:#1a3c5e; --primary-dark:#0d1f30; --primary-light:#2a5a8e;
  --accent:#c9a227; --accent-light:#e8c855;
  --text:#212529; --text-muted:#6c757d; --text-light:#adb5bd;
  --bg:#fff; --bg-section:#f8f9fa; --bg-dark:#0d1f30;
  --border:#dee2e6; --border-light:#e9ecef;
  --green:#1a7a1a; --green-bg:#d4edda;
  --orange:#b05000; --orange-bg:#fff3e0;
  --red:#b00000; --red-bg:#fde8e8;
  --blue-bg:#e8f0fe;
  --font-body:'Inter',system-ui,sans-serif;
  --font-heading:'Merriweather',Georgia,serif;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-md:1.125rem;
  --fs-lg:1.25rem; --fs-xl:1.5rem; --fs-2xl:2rem; --fs-3xl:2.5rem;
  --fw-light:300; --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --lh:1.65;
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem;
  --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem;
  --max-w:1200px;
  --radius-sm:4px; --radius:8px; --radius-lg:12px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);
  --shadow:0 4px 12px rgba(0,0,0,.1);
  --shadow-lg:0 8px 24px rgba(0,0,0,.14);
  --shadow-md:0 4px 16px rgba(0,0,0,.12);
  --transition:.25s ease;
  --navbar-h:88px; --topbar-h:36px;
}

/* ── 2. RESET ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:var(--fs-base);color:var(--text);background:var(--bg);line-height:var(--lh);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--accent)}
ul,ol{list-style:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:var(--fs-base)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);line-height:1.3;color:var(--primary)}

/* ── 3. LAYOUT ─────────────────────────────────────────────── */
.container{max-width:var(--max-w);margin:0 auto;padding:0 var(--sp-4)}
.section{padding:var(--sp-12) 0}
.section--alt{background:var(--bg-section)}
.section-title{font-size:var(--fs-xl);color:var(--primary);padding-left:var(--sp-4);border-left:4px solid var(--accent);margin-bottom:var(--sp-6)}
.section-title.center{border-left:none;padding-left:0;text-align:center}
.grid-2{display:grid;grid-template-columns:1fr;gap:var(--sp-6)}
.grid-3{display:grid;grid-template-columns:1fr;gap:var(--sp-5)}
.grid-4{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.flex{display:flex;align-items:center;gap:var(--sp-3)}
.flex-wrap{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.text-center{text-align:center}
.text-muted{color:var(--text-muted)}
.mt-4{margin-top:var(--sp-4)} .mt-6{margin-top:var(--sp-6)}
.mb-4{margin-bottom:var(--sp-4)} .mb-6{margin-bottom:var(--sp-6)}

/* ── 4. TOPBAR ─────────────────────────────────────────────── */
.topbar{background:var(--primary);color:rgba(255,255,255,.85);font-size:var(--fs-xs);height:var(--topbar-h);display:flex;align-items:center}
.topbar__inner{display:flex;justify-content:space-between;align-items:center;width:100%}
.topbar__left{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.topbar__issn{font-weight:var(--fw-medium);letter-spacing:.02em}
.topbar__contact a{color:rgba(255,255,255,.75)}
.topbar__contact a:hover{color:var(--accent-light)}
.topbar__right{display:flex;gap:var(--sp-3)}
.topbar__right a{color:rgba(255,255,255,.85);padding:2px var(--sp-3);border-radius:var(--radius-sm);font-weight:var(--fw-medium);transition:background var(--transition)}
.topbar__right a:hover{background:rgba(255,255,255,.15);color:#fff}
.topbar__right a.btn-login{background:var(--accent);color:var(--primary-dark);font-weight:var(--fw-bold)}
.topbar__right a.btn-login:hover{background:var(--accent-light)}

/* ── 5. HEADER ─────────────────────────────────────────────── */
.site-header{background:var(--bg);height:var(--navbar-h);display:flex;align-items:center;position:sticky;top:0;z-index:1000;border-bottom:2px solid var(--border-light);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition)}
.site-header.scrolled{box-shadow:var(--shadow)}
.header__inner{display:flex;align-items:center;justify-content:space-between;width:100%}
.logo{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0}
.logo__icon{width:48px;height:48px;flex-shrink:0}
.logo__text{display:flex;flex-direction:column}
.logo__abbr{font-family:var(--font-heading);font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--primary);line-height:1}
.logo__name{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.3;max-width:200px}
.main-nav{display:none}
.main-nav ul{display:flex;align-items:center}
/* .main-nav ul above also matches the nested <ul class="dropdown"> (it's a
   descendant, not just a direct child), turning every dropdown into a
   horizontal row that overflows the page on menus with many items (e.g.
   "For Authors"). Force dropdowns back to their intended vertical list —
   two classes beats one class + tag, so this wins regardless of source order. */
.main-nav .dropdown{display:block}
.main-nav li{position:relative}
.main-nav a{display:block;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text);white-space:nowrap;border-bottom:3px solid transparent;transition:color var(--transition),border-color var(--transition)}
.main-nav a:hover,.main-nav li.active>a{color:var(--primary);border-bottom-color:var(--accent)}
.main-nav li.active>a{font-weight:var(--fw-semibold)}
.has-dropdown>a::after{content:' ▾';font-size:10px;opacity:.7}
/* Dropdown: no gap — transparent bridge prevents cursor losing hover */
.dropdown{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,.14);min-width:210px;z-index:2000;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease;padding-top:6px;padding-bottom:6px;margin-top:0}
/* Invisible bridge: fills gap between nav item and dropdown */
.has-dropdown::after{content:'';position:absolute;top:100%;left:0;right:0;height:8px;background:transparent;z-index:1999}
.has-dropdown:hover .dropdown,.has-dropdown.open .dropdown{opacity:1;pointer-events:all;transform:translateY(0)}
.dropdown li{list-style:none}
.dropdown a{padding:9px 20px;border-bottom:none;border-left:3px solid transparent;font-size:.85rem;font-weight:500;color:#1a2e40;display:block;transition:background .15s,border-color .15s,color .15s;line-height:1.4;white-space:nowrap}
.dropdown a:hover{background:#f0f4ff;color:#1a3c5e;border-left-color:#f4a922;font-weight:600}
.dropdown li:first-child a{border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0}
.dropdown li:last-child a{border-radius:0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px)}
.hamburger{display:flex;flex-direction:column;justify-content:space-between;width:24px;height:18px;background:none;border:none;cursor:pointer;padding:0}
.hamburger span{display:block;height:2px;background:var(--primary);border-radius:2px;transition:transform var(--transition),opacity var(--transition)}
.hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mobile-nav{display:none;position:fixed;top:calc(var(--topbar-h) + var(--navbar-h));left:0;right:0;background:var(--bg);border-top:1px solid var(--border);box-shadow:var(--shadow-lg);z-index:999;max-height:calc(100vh - var(--topbar-h) - var(--navbar-h));overflow-y:auto;padding:var(--sp-4) 0 var(--sp-6)}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:var(--sp-3) var(--sp-6);color:var(--text);font-weight:var(--fw-medium);border-bottom:1px solid var(--border-light)}
.mobile-nav a:hover{background:var(--bg-section);color:var(--primary)}
.mobile-nav .sub a{padding-left:var(--sp-10);font-size:var(--fs-sm);color:var(--text-muted)}
.mobile-section-title{padding:var(--sp-2) var(--sp-6);font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);background:var(--bg-section)}

/* ── 6. HERO ───────────────────────────────────────────────── */
.hero{background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 60%,#1e5080 100%);color:#fff;padding:var(--sp-16) 0 var(--sp-12);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-50%;right:-10%;width:500px;height:500px;border-radius:50%;background:rgba(201,162,39,.08);pointer-events:none}
.hero__inner{position:relative;z-index:1}
.hero__badge{display:inline-block;background:var(--accent);color:var(--primary-dark);font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.12em;padding:var(--sp-1) var(--sp-4);border-radius:50px;margin-bottom:var(--sp-4)}
.hero h1{font-size:var(--fs-2xl);color:#fff;line-height:1.2;margin-bottom:var(--sp-4)}
.hero__abbr{font-family:var(--font-body);font-size:var(--fs-xs);font-weight:var(--fw-medium);color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.15em;display:block;margin-bottom:var(--sp-2)}
.hero p{font-size:var(--fs-md);color:rgba(255,255,255,.8);max-width:600px;margin-bottom:var(--sp-6)}
.hero__meta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-6)}
.hero__meta-item{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:50px;padding:var(--sp-1) var(--sp-4);font-size:var(--fs-sm);color:rgba(255,255,255,.9)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

/* ── 7. BUTTONS ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-6);border-radius:var(--radius);font-size:var(--fs-sm);font-weight:var(--fw-semibold);cursor:pointer;transition:all var(--transition);text-decoration:none;border:2px solid transparent;line-height:1}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-dark);color:#fff}
.btn-accent{background:var(--accent);color:var(--primary-dark);border-color:var(--accent);font-weight:var(--fw-bold)}
.btn-accent:hover{background:var(--accent-light);color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 6px 20px rgba(201,162,39,.4)}
.btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}
.btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-outline-white:hover{background:rgba(255,255,255,.15);border-color:#fff}
.btn-sm{padding:var(--sp-1) var(--sp-3);font-size:var(--fs-xs);border-radius:var(--radius-sm)}
.btn-pdf{background:var(--red);color:#fff;border-color:var(--red)}
.btn-pdf:hover{background:#8b0000;color:#fff}
.btn-abstract{background:var(--blue-bg);color:var(--primary);border-color:#c0d5f8}
.btn-abstract:hover{background:#c0d5f8}
.btn-cite{background:#f0f0f0;color:var(--text);border-color:var(--border)}
.btn-cite:hover{background:#e0e0e0}

/* ── 8. ARTICLE BADGES & LISTING ───────────────────────────── */
.article-type-badge{display:inline-block;font-size:10px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.08em;padding:2px 8px;border-radius:3px;margin-bottom:var(--sp-2)}
/* Shared pill shape for every .badge-* article-type color below — used on
   the Home "Latest Articles" cards and the Current Issue/Issue article
   cards alike (art-header-row), so all three pages render the same soft,
   rounded, mixed-case badge instead of each page inventing its own box
   model (or, as on the Current Issue page before this, none at all). */
.badge{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.01em;padding:3px 10px;border-radius:999px;border:1px solid transparent;line-height:1.3}
.badge-original{background:#dbeafe;color:#1e40af;border-color:#bfdbfe}
.badge-review{background:#fce7f3;color:#9d174d;border-color:#fbcfe8}
.badge-editorial{background:#dcfce7;color:#166534;border-color:#bbf7d0}
.badge-case{background:#fff7ed;color:#c2410c;border-color:#fed7aa}
.badge-letter{background:#f3e8ff;color:#7c3aed;border-color:#e9d5ff}
.badge-reflect{background:#fffbeb;color:#92400e;border-color:#fde68a}
.badge-type-fallback{background:#eef2ff;color:#3730a3;border-color:#c7d2fe}
.article-list{display:flex;flex-direction:column;gap:var(--sp-4)}
.article-item{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-5);transition:box-shadow var(--transition),border-color var(--transition)}
.article-item:hover{box-shadow:var(--shadow);border-color:#b0c4de}
.article-item__title{font-family:var(--font-heading);font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--primary);margin-bottom:var(--sp-2);line-height:1.4}
.article-item__title a{color:inherit}
.article-item__title a:hover{color:var(--accent)}
.article-item__meta{font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:var(--sp-3);display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.article-item__authors{font-weight:var(--fw-medium);color:var(--text)}
.article-item__doi{font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:var(--sp-2)}
.article-item__doi a{color:var(--primary-light)}
.article-item__dates{font-size:var(--fs-xs);color:var(--text-muted);background:var(--bg-section);border-radius:var(--radius-sm);padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-3);display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.article-item__dates span{white-space:nowrap}
.article-item__dates span strong{color:var(--text)}
.article-item__actions{display:flex;flex-wrap:wrap;gap:var(--sp-2)}

/* ── 9. SIDEBAR ────────────────────────────────────────────── */
.page-layout{display:grid;grid-template-columns:1fr;gap:var(--sp-8)}
.sidebar{display:flex;flex-direction:column;gap:var(--sp-5)}
.sidebar-widget{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.sidebar-widget__title{background:var(--primary);color:#fff;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.sidebar-widget__body{padding:var(--sp-4)}
.sidebar-widget__list{display:flex;flex-direction:column}
.sidebar-widget__list a{display:block;padding:var(--sp-2) 0;font-size:var(--fs-sm);color:var(--primary);border-bottom:1px solid var(--border-light);font-weight:var(--fw-medium)}
.sidebar-widget__list a:last-child{border-bottom:none}
.sidebar-widget__list a:hover{color:var(--accent);padding-left:var(--sp-2)}
.index-logos{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.index-logo-item{background:var(--bg-section);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--primary);text-align:center}

/* ── 10. CARDS ─────────────────────────────────────────────── */
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
.card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-5);transition:box-shadow var(--transition),transform var(--transition);text-align:center}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card__icon{width:52px;height:52px;background:var(--blue-bg);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;margin:0 auto var(--sp-3);font-size:1.5rem}
.card__title{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--primary);margin-bottom:var(--sp-2);font-family:var(--font-body)}
.card__desc{font-size:var(--fs-sm);color:var(--text-muted)}
.card a{color:inherit}
.card a:hover .card__title{color:var(--accent)}
.issue-card{background:linear-gradient(135deg,var(--primary) 0%,#1e4a72 100%);border-radius:var(--radius-lg);padding:var(--sp-6) var(--sp-8);margin-bottom:var(--sp-6);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-4)}
.issue-card-meta{flex:0 0 auto}
.issue-card-vol{display:block;font-family:var(--font-heading);font-size:var(--fs-lg);font-weight:700;color:#fff;line-height:1.2}
.issue-card-period{display:block;font-size:var(--fs-sm);color:rgba(255,255,255,.65);margin-top:var(--sp-1)}
.issue-stats{display:flex;flex-wrap:wrap;gap:var(--sp-6);align-items:center}
.issue-stat{text-align:center;min-width:70px}
.issue-stat__num{font-size:2.2rem;font-weight:700;color:var(--accent);line-height:1;font-family:var(--font-heading)}
.issue-stat__label{font-size:.65rem;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}

/* ── 11. EDITORIAL BOARD ───────────────────────────────────── */
.board-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
.board-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-5);display:flex;gap:var(--sp-4);align-items:flex-start;transition:box-shadow var(--transition)}
.board-card:hover{box-shadow:var(--shadow)}
.board-avatar{width:56px;height:56px;background:var(--blue-bg);border-radius:50%;border:2px solid var(--primary);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--primary);font-family:var(--font-heading)}
.board-info__name{font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--primary);margin-bottom:2px;font-family:var(--font-body)}
.board-info__role{display:inline-block;font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin-bottom:var(--sp-2)}
.board-info__dept{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.5}
.board-info__country{font-size:var(--fs-xs);color:var(--text-light);margin-top:var(--sp-1)}

/* ── 12. TABLES ────────────────────────────────────────────── */
.table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
thead th{background:var(--primary);color:#fff;padding:var(--sp-3) var(--sp-4);text-align:left;font-weight:var(--fw-semibold);white-space:nowrap}
tbody td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border-light);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even) td{background:var(--bg-section)}
tbody tr:hover td{background:var(--blue-bg)}

/* ── 13. BREADCRUMBS ───────────────────────────────────────── */
.breadcrumb{padding:var(--sp-3) 0;border-bottom:1px solid var(--border-light);margin-bottom:var(--sp-6)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;font-size:var(--fs-sm)}
.breadcrumb li{display:flex;align-items:center;gap:var(--sp-2);color:var(--text-muted)}
.breadcrumb li::after{content:'/';opacity:.4}
.breadcrumb li:last-child::after{display:none}
.breadcrumb a{color:var(--primary);font-weight:var(--fw-medium)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb li:last-child{color:var(--text)}

/* ── 14. FORMS ─────────────────────────────────────────────── */
.form-group{margin-bottom:var(--sp-4)}
.form-label{display:block;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text);margin-bottom:var(--sp-2)}
.form-control{display:block;width:100%;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-base);color:var(--text);background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius);transition:border-color var(--transition),box-shadow var(--transition)}
.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,60,94,.12)}
select.form-control{cursor:pointer}
textarea.form-control{resize:vertical;min-height:120px}
.form-hint{font-size:var(--fs-xs);color:var(--text-muted);margin-top:var(--sp-1)}
.search-bar{display:flex;gap:var(--sp-3);align-items:center;margin-bottom:var(--sp-5);flex-wrap:wrap}
.search-bar input{flex:1;min-width:200px}

/* ── 15. PAGE HERO ─────────────────────────────────────────── */
.page-hero{background:linear-gradient(135deg,var(--primary) 0%,#2a5a8e 100%);color:#fff;padding:var(--sp-10) 0 var(--sp-8)}
.page-hero h1{font-size:var(--fs-2xl);color:#fff;margin-bottom:var(--sp-2)}
.page-hero p{color:rgba(255,255,255,.8);font-size:var(--fs-md);max-width:640px}

/* ── 16. INDEXING STRIP ────────────────────────────────────── */
.indexing-strip{padding:var(--sp-8) 0;background:var(--bg-section)}
.indexing-strip h3{text-align:center;font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:var(--sp-5);text-transform:uppercase;letter-spacing:.1em;font-family:var(--font-body);font-weight:var(--fw-semibold)}
.indexing-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-4);align-items:center}
.indexing-logo{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-3) var(--sp-5);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--primary);text-align:center;min-width:90px;transition:box-shadow var(--transition)}
.indexing-logo:hover{box-shadow:var(--shadow)}

/* ── 17. ANNOUNCEMENTS ─────────────────────────────────────── */
.announcement-item{padding:var(--sp-4) 0;border-bottom:1px solid var(--border-light);display:flex;gap:var(--sp-4);align-items:flex-start}
.announcement-item:last-child{border-bottom:none}
.ann-date{background:var(--primary);color:#fff;border-radius:var(--radius-sm);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-xs);font-weight:var(--fw-bold);text-align:center;min-width:52px;flex-shrink:0;line-height:1.4}
.ann-date span{display:block;font-size:16px;font-weight:var(--fw-bold)}
.ann-content h4{font-size:var(--fs-base);color:var(--primary);margin-bottom:var(--sp-1);font-family:var(--font-body)}
.ann-content p{font-size:var(--fs-sm);color:var(--text-muted)}

/* ── 18. STATUS BADGES / ALERTS ────────────────────────────── */
.status-badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:var(--fw-bold);padding:3px 10px;border-radius:50px}
.status-covered{background:var(--green-bg);color:var(--green)}
.status-partial{background:var(--orange-bg);color:var(--orange)}
.status-missing{background:var(--red-bg);color:var(--red)}
.alert{padding:var(--sp-4);border-radius:var(--radius);margin-bottom:var(--sp-4);border-left:4px solid;font-size:var(--fs-sm)}
.alert-info{background:var(--blue-bg);border-color:var(--primary);color:var(--primary)}
.alert-success{background:var(--green-bg);border-color:var(--green);color:var(--green)}
.alert-warning{background:var(--orange-bg);border-color:var(--orange);color:var(--orange)}
.alert-danger{background:var(--red-bg);border-color:var(--red);color:var(--red)}

/* ── 19. ABSTRACT SECTION ──────────────────────────────────── */
.abstract-section{background:var(--bg-section);border-radius:var(--radius);padding:var(--sp-6);margin-bottom:var(--sp-6);border:1px solid var(--border)}
.abstract-section h3{font-size:var(--fs-lg);color:var(--primary);margin-bottom:var(--sp-4);padding-bottom:var(--sp-3);border-bottom:2px solid var(--accent)}
.abstract-field{margin-bottom:var(--sp-4)}
.abstract-field strong{display:block;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--primary);margin-bottom:var(--sp-1);text-transform:uppercase;letter-spacing:.04em;font-family:var(--font-body)}
.abstract-field p{font-size:var(--fs-sm);line-height:1.65;text-align:justify}
.keywords{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.keyword-tag{background:var(--blue-bg);color:var(--primary);padding:3px 10px;border-radius:50px;font-size:var(--fs-xs);font-weight:var(--fw-medium)}

/* ── 20. DOWNLOAD & CITE BOX ───────────────────────────────── */
.download-box{background:var(--primary);color:#fff;border-radius:var(--radius);padding:var(--sp-5);margin-bottom:var(--sp-5);text-align:center}
.download-box h4{color:#fff;font-size:var(--fs-md);margin-bottom:var(--sp-3);font-family:var(--font-body)}
.download-box .btn{width:100%;justify-content:center;font-size:var(--fs-base);padding:var(--sp-3) var(--sp-5)}
.download-box .meta{font-size:var(--fs-xs);color:rgba(255,255,255,.6);margin-top:var(--sp-3)}
.cite-box{background:var(--bg-section);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-4);margin-bottom:var(--sp-4)}
.cite-box h4{font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:var(--sp-3);font-family:var(--font-body);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.06em}
.cite-text{font-size:var(--fs-sm);line-height:1.6;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--sp-3);margin-bottom:var(--sp-3);font-family:monospace;white-space:pre-wrap}
.article-info-item{display:flex;justify-content:space-between;padding:var(--sp-2) 0;border-bottom:1px solid var(--border-light);font-size:var(--fs-sm)}
.article-info-item:last-child{border-bottom:none}
.article-info-item dt{color:var(--text-muted)}
.article-info-item dd{font-weight:var(--fw-medium);text-align:right}

/* ── 21. CHECKLIST & STEPS ─────────────────────────────────── */
.checklist{display:flex;flex-direction:column;gap:var(--sp-2)}
.checklist-item{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3);background:var(--bg-section);border-radius:var(--radius-sm);font-size:var(--fs-sm)}
.checklist-item input[type="checkbox"]{margin-top:2px;flex-shrink:0;accent-color:var(--primary);transform:scale(1.2)}
.steps{display:flex;flex-direction:column;gap:0;counter-reset:step}
.step{display:flex;gap:var(--sp-4);padding:var(--sp-5);border-left:2px solid var(--border);margin-left:20px;position:relative}
.step::before{content:counter(step);counter-increment:step;position:absolute;left:-22px;top:var(--sp-4);width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.step:last-child{border-left:none}
.step__content h4{font-size:var(--fs-base);color:var(--primary);margin-bottom:var(--sp-1);font-family:var(--font-body)}
.step__content p{font-size:var(--fs-sm);color:var(--text-muted)}

/* ── 22. FOOTER ────────────────────────────────────────────── */
.site-footer{background:var(--bg-dark);color:rgba(255,255,255,.75);padding-top:var(--sp-12)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-8);margin-bottom:var(--sp-8)}
.footer-col h4{color:#fff;font-size:var(--fs-base);font-weight:var(--fw-semibold);margin-bottom:var(--sp-4);padding-bottom:var(--sp-2);border-bottom:1px solid rgba(255,255,255,.1);font-family:var(--font-body)}
.footer-col p{font-size:var(--fs-sm);line-height:1.8}
.footer-col ul{display:flex;flex-direction:column;gap:var(--sp-2)}
.footer-col ul a{font-size:var(--fs-sm);color:rgba(255,255,255,.65)}
.footer-col ul a:hover{color:var(--accent-light);padding-left:4px}
.footer-issn{font-size:var(--fs-xs);color:rgba(255,255,255,.5);margin-top:var(--sp-3);display:flex;gap:var(--sp-4);flex-wrap:wrap}
.footer-issn span{background:rgba(255,255,255,.08);padding:2px 8px;border-radius:3px}
.footer-contact-item{display:flex;align-items:flex-start;gap:var(--sp-2);margin-bottom:var(--sp-3);font-size:var(--fs-sm)}
.footer-contact-icon{font-size:1rem;margin-top:2px;flex-shrink:0}
.footer-oa{display:flex;align-items:flex-start;gap:var(--sp-3);background:rgba(255,255,255,.06);border-radius:var(--radius);padding:var(--sp-4);margin-top:var(--sp-4)}
.footer-oa-icon{font-size:2rem;flex-shrink:0}
.footer-oa p{font-size:var(--fs-xs);color:rgba(255,255,255,.55);line-height:1.6}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:var(--sp-4) 0;display:flex;flex-direction:column;gap:var(--sp-2);align-items:center;text-align:center}
.footer-bottom p{font-size:var(--fs-xs);color:rgba(255,255,255,.4)}
.footer-bottom-links{display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:center}
.footer-bottom-links a{font-size:var(--fs-xs);color:rgba(255,255,255,.5)}
.footer-bottom-links a:hover{color:var(--accent-light)}

/* ── 23. BACK TO TOP ───────────────────────────────────────── */
#back-to-top{position:fixed;bottom:var(--sp-6);right:var(--sp-6);width:44px;height:44px;background:var(--primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity var(--transition),background var(--transition);box-shadow:var(--shadow);font-size:1.2rem;z-index:500;border:none}
#back-to-top.visible{opacity:1;pointer-events:all}
#back-to-top:hover{background:var(--accent);color:var(--primary-dark)}

/* ── 24. ANIMATIONS ────────────────────────────────────────── */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ── 25. PROSE ─────────────────────────────────────────────── */
.prose h2{font-size:var(--fs-xl);color:var(--primary);margin:var(--sp-8) 0 var(--sp-4);padding-left:var(--sp-4);border-left:3px solid var(--accent)}
.prose h3{font-size:var(--fs-lg);color:var(--primary);margin:var(--sp-6) 0 var(--sp-3)}
.prose p{margin-bottom:var(--sp-4);color:var(--text);line-height:1.7}
.prose ul{list-style:disc;padding-left:var(--sp-6);margin-bottom:var(--sp-4)}
.prose ul li{margin-bottom:var(--sp-2)}
.prose ol{list-style:decimal;padding-left:var(--sp-6);margin-bottom:var(--sp-4)}
.prose ol li{margin-bottom:var(--sp-2)}
.prose blockquote{background:var(--blue-bg);border-left:4px solid var(--primary);padding:var(--sp-4) var(--sp-5);border-radius:0 var(--radius) var(--radius) 0;margin-bottom:var(--sp-4);font-style:italic;color:var(--primary)}
.prose a{text-decoration:underline;text-underline-offset:3px}

/* ── 26. ARCHIVE & INDEX CARDS ─────────────────────────────── */
.volume-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:box-shadow var(--transition)}
.volume-card:hover{box-shadow:var(--shadow)}
.volume-card__header{background:var(--primary);color:#fff;padding:var(--sp-4) var(--sp-5)}
.volume-card__header h3{color:#fff;font-size:var(--fs-base);margin:0;font-family:var(--font-body);font-weight:var(--fw-semibold)}
.volume-card__year{font-size:var(--fs-xs);color:rgba(255,255,255,.65)}
.volume-card__issues{padding:var(--sp-4) var(--sp-5)}
.issue-link{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-2) 0;border-bottom:1px solid var(--border-light);font-size:var(--fs-sm);color:var(--primary);font-weight:var(--fw-medium)}
.issue-link:last-child{border-bottom:none}
.issue-link:hover{color:var(--accent)}
.issue-link .current-badge{background:var(--accent);color:var(--primary-dark);font-size:10px;font-weight:var(--fw-bold);padding:1px 6px;border-radius:3px}
.index-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-5);transition:box-shadow var(--transition)}
.index-card:hover{box-shadow:var(--shadow)}
.index-card__name{font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--primary);margin-bottom:var(--sp-2);font-family:var(--font-body)}
.index-card__desc{font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:var(--sp-3)}
.index-card__status{display:flex;justify-content:space-between;align-items:center}

/* ── 27. FEE BANNER ────────────────────────────────────────── */
.fee-banner{background:var(--green-bg);border:2px solid var(--green);border-radius:var(--radius-lg);padding:var(--sp-8);text-align:center;margin-bottom:var(--sp-8)}
.fee-zero{font-size:var(--fs-3xl);font-weight:var(--fw-bold);color:var(--green);font-family:var(--font-heading)}
.fee-banner p{font-size:var(--fs-md);color:var(--green);margin-top:var(--sp-2)}

/* ── 28. CONTACT ───────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-8)}
.contact-info-item{display:flex;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.contact-info-icon{width:44px;height:44px;background:var(--blue-bg);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.contact-info-text h4{font-size:var(--fs-base);color:var(--primary);margin-bottom:var(--sp-1);font-family:var(--font-body)}
.contact-info-text p{font-size:var(--fs-sm);color:var(--text-muted)}
.map-placeholder{background:var(--bg-section);border:1px dashed var(--border);border-radius:var(--radius);height:200px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:var(--fs-sm);margin-top:var(--sp-5)}

/* ── 29. RESPONSIVE ────────────────────────────────────────── */
@media(min-width:576px){
  .hero h1{font-size:var(--fs-2xl)}
  .card-grid{grid-template-columns:repeat(3,1fr)}
  .board-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:768px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .page-hero h1{font-size:var(--fs-2xl)}
  .contact-grid{grid-template-columns:1fr 1fr}
}
@media(min-width:992px){
  .main-nav{display:block}
  .hamburger{display:none}
  .mobile-nav{display:none!important}
  .hero h1{font-size:var(--fs-3xl)}
  .page-layout{grid-template-columns:1fr 300px}
  .footer-grid{grid-template-columns:2fr 1fr 1fr 1.5fr}
  .footer-bottom{flex-direction:row;justify-content:space-between;text-align:left}
  .card-grid{grid-template-columns:repeat(3,1fr)}
  .board-grid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1200px){
  .hero h1{font-size:3rem}
}

/* ── 30. PRINT ─────────────────────────────────────────────── */
@media print{
  .topbar,.site-header,.site-footer,.hamburger,#back-to-top,.hero__actions,
  .article-item__actions,.sidebar,.search-bar{display:none!important}
  .page-layout{grid-template-columns:1fr!important}
  a{color:var(--text)!important;text-decoration:underline}
  .article-item,.abstract-section{border:1px solid #ccc;break-inside:avoid}
}

/* ═══════════════════════════════════════════════════════════════
   INDEX-PAGE ENHANCEMENTS — added for v2 redesign
   ═══════════════════════════════════════════════════════════════ */

/* ── TOPBAR SOCIAL ICONS ──────────────────────────────────── */
.topbar-social{display:flex;align-items:center;gap:var(--sp-2)}
.topbar-social a{color:rgba(255,255,255,.7);font-size:.85rem;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,.25);transition:var(--transition)}
.topbar-social a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.topbar-divider{width:1px;height:14px;background:rgba(255,255,255,.25);margin:0 var(--sp-1)}
.topbar-auth a{color:rgba(255,255,255,.8);font-size:.8rem;transition:color .2s}
.topbar-auth a:hover{color:#fff}

/* ── HEADER RECOGNITION BADGES ───────────────────────────── */
.header-badges{display:none;align-items:center;gap:10px;flex-shrink:0}
@media(min-width:992px){.header-badges{display:flex}}
.hdr-badge{
  display:flex;align-items:center;gap:8px;
  padding:6px 12px 6px 8px;
  border-radius:50px;
  font-size:.68rem;font-weight:600;line-height:1.2;
  border:1.5px solid transparent;
  white-space:nowrap;
  transition:box-shadow .2s;
  text-decoration:none;
}
a.hdr-badge{cursor:pointer}
.hdr-badge:hover{box-shadow:0 3px 10px rgba(0,0,0,.12)}
.hdr-badge-icon{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  flex-shrink:0;
}
.hdr-badge-icon svg{width:16px;height:16px}
.hdr-badge-text{display:flex;flex-direction:column;gap:1px}
.hdr-badge-label{font-size:.55rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;opacity:.7;line-height:1}
.hdr-badge-value{font-size:.75rem;font-weight:700;line-height:1}
/* HEC — green */
.hdr-badge-hec{background:linear-gradient(135deg,#f0faf0,#e4f5e4);color:#1b6b1b;border-color:#81c784}
.hdr-badge-hec .hdr-badge-icon{background:#c8e6c9;color:#2e7d32}
/* PM&DC — blue */
.hdr-badge-pmdc{background:linear-gradient(135deg,#f0f6ff,#e3efff);color:#1340a0;border-color:#90bef5}
.hdr-badge-pmdc .hdr-badge-icon{background:#bbdefb;color:#1565c0}
/* Open Access — gold/orange */
.hdr-badge-oa{background:linear-gradient(135deg,#fffbf0,#fff3dc);color:#a85c00;border-color:#ffcc70}
.hdr-badge-oa .hdr-badge-icon{background:#ffe0b2;color:#e65100}

/* ── HERO V2 ──────────────────────────────────────────────── */
.hero-v2{background:linear-gradient(135deg,#0b1f4a 0%,#1a3170 55%,#0f2a6b 100%);padding:var(--sp-6) 0;position:relative;overflow:hidden}
.hero-v2::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");pointer-events:none}
.hero-v2-inner{display:grid;grid-template-columns:1fr;gap:var(--sp-8);align-items:center;position:relative;z-index:1}
@media(min-width:768px){.hero-v2-inner{grid-template-columns:1fr auto;gap:var(--sp-10)}}
.hero-v2-content{}
.hero-v2 .hero-badge{display:inline-flex;align-items:center;gap:var(--sp-2);background:rgba(201,162,39,.15);color:var(--accent);border:1px solid rgba(201,162,39,.4);border-radius:999px;padding:var(--sp-1) var(--sp-3);font-size:.8rem;font-weight:var(--fw-semi);margin-bottom:var(--sp-4)}
.hero-v2 h1{font-size:clamp(.9rem,1.8vw,1.25rem);color:#fff;font-family:var(--font-heading);line-height:1.25;margin-bottom:var(--sp-2)}
.hero-v2 p{color:rgba(255,255,255,.75);font-size:var(--fs-sm);margin-bottom:var(--sp-3);max-width:500px}
.hero-chips{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3);max-width:480px}
@media(min-width:576px){.hero-chips{grid-template-columns:repeat(4,1fr);max-width:none}}
.hero-chip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);padding:var(--sp-4) var(--sp-3);display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;backdrop-filter:blur(4px)}
.hero-chip:hover{background:rgba(255,255,255,.12);border-color:var(--accent)}
.hero-chip-icon{color:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.hero-chip-text{display:none}
.hero-book-wrap{display:flex;align-items:center;justify-content:center;position:relative;padding:var(--sp-2) 0}
.hero-book-wrap::before{content:'';position:absolute;width:220px;height:220px;background:radial-gradient(circle,rgba(201,162,39,.15) 0%,transparent 70%);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}
.journal-cover{width:160px;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.3);position:relative;z-index:1}
@media(min-width:768px){.journal-cover{width:190px}}

/* ── ARTICLE SECTION HEADER ───────────────────────────────── */
.section-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-8);padding-bottom:var(--sp-4);border-bottom:2px solid var(--primary)}
.section-title{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--primary);font-family:var(--font-heading);margin:0}

/* ── FILTER TABS ──────────────────────────────────────────── */
.filter-tabs{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.filter-tab{padding:var(--sp-1) var(--sp-3);border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--text-muted);font-size:.8rem;font-weight:var(--fw-semi);cursor:pointer;transition:var(--transition);white-space:nowrap}
.filter-tab:hover{border-color:var(--primary);color:var(--primary)}
.filter-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ── ARTICLE ITEM V2 ──────────────────────────────────────── */
.article-item-v2{border:1px solid var(--border);border-radius:var(--radius);background:#fff;padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-4);transition:var(--transition)}
.article-item-v2:hover{box-shadow:var(--shadow-md);border-color:var(--primary-light)}
.article-item-v2 .article-badge-row{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.article-item-v2 .article-title{font-size:var(--fs-base);font-weight:var(--fw-semi);color:var(--primary);line-height:1.4;margin-bottom:var(--sp-1)}
.article-item-v2 .article-title a{color:inherit;text-decoration:none}
.article-item-v2 .article-title a:hover{text-decoration:underline;color:var(--accent)}
.article-item-v2 .article-authors{font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:var(--sp-1)}
.article-item-v2 .article-citation{font-size:var(--fs-sm);color:var(--text-muted);font-style:italic;margin-bottom:var(--sp-1)}
.article-item-v2 .article-doi{font-size:.78rem;color:var(--text-muted);margin-bottom:var(--sp-3)}
.article-item-v2 .article-doi a{color:var(--accent);text-decoration:none}
.article-item-v2 .article-doi a:hover{text-decoration:underline}
.article-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--bg-section)}
.article-stats{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.article-stat{display:flex;align-items:center;gap:4px;font-size:.8rem;color:var(--text-muted)}
.article-stat svg,.article-stat .stat-icon{width:14px;height:14px;opacity:.7}
.article-stat-num{font-weight:var(--fw-semi);color:var(--text)}
.article-btn-row{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
/* Real per-article Views/Downloads/Citations — same classes/colors as
   inner.css (issue/archive/article pages) so the "Latest Articles" cards
   on Home look identical to the Current Issue article cards. See
   ArticleMetrics for where the numbers come from. */
.article-metrics{display:flex;gap:.5rem;flex-wrap:wrap}
.art-metric{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px 12px;border-radius:7px;min-width:64px;border:1px solid var(--border);text-align:center}
.art-metric-num{font-size:.88rem;font-weight:700;line-height:1.2}
.art-metric-lbl{font-size:.58rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-top:3px;white-space:nowrap}
.art-metric-views{background:#eef4ff;border-color:#c7d9f8}
.art-metric-views .art-metric-num{color:#2563eb}
.art-metric-views .art-metric-lbl{color:#3b82f6}
.art-metric-dl{background:#f0fdf4;border-color:#bbf7d0}
.art-metric-dl .art-metric-num{color:#16a34a}
.art-metric-dl .art-metric-lbl{color:#22c55e}
.art-metric-cite{background:#fff7ed;border-color:#fed7aa}
.art-metric-cite .art-metric-num{color:#c2410c}
.art-metric-cite .art-metric-lbl{color:#ea580c}
.btn-sm{padding:5px 12px;font-size:.78rem;border-radius:var(--radius-sm);font-weight:var(--fw-semi);cursor:pointer;transition:var(--transition);border:1px solid transparent;text-decoration:none;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.btn-pdf-sm{background:#c0392b;color:#fff;border-color:#c0392b}
.btn-pdf-sm:hover{background:#a93226}
.btn-cite-sm{background:#fff;color:var(--primary);border-color:var(--primary)}
.btn-cite-sm:hover{background:var(--primary);color:#fff}
.btn-fulltext-sm{background:#fff;color:var(--green);border-color:var(--green)}
.btn-fulltext-sm:hover{background:var(--green);color:#fff}
.btn-abs-sm{background:var(--bg-section);color:var(--text);border-color:var(--border)}
.btn-abs-sm:hover{border-color:var(--primary);color:var(--primary)}
.page-count{font-size:.72rem;color:var(--text-muted)}

/* ── CITATION MODAL ───────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--sp-4);opacity:0;pointer-events:none;transition:opacity .25s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{background:#fff;border-radius:var(--radius-lg);width:100%;max-width:680px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 25px 80px rgba(0,0,0,.3);transform:translateY(16px) scale(.97);transition:transform .25s}
.modal-overlay.open .modal-box{transform:none}
.modal-header{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);flex-shrink:0}
.modal-title-wrap{}
.modal-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:2px}
.modal-article-title{font-size:.95rem;font-weight:var(--fw-semi);color:var(--primary);line-height:1.35}
.modal-close{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:1.4rem;line-height:1;padding:2px 6px;border-radius:var(--radius-sm);transition:var(--transition);flex-shrink:0}
.modal-close:hover{background:var(--bg-section);color:var(--text)}
.modal-body{overflow-y:auto;padding:var(--sp-4) var(--sp-5);flex:1}
.cite-format-tabs{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-bottom:var(--sp-4);border-bottom:1px solid var(--border);padding-bottom:var(--sp-3)}
.cite-tab{padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--text-muted);font-size:.72rem;font-weight:var(--fw-semi);cursor:pointer;transition:var(--transition)}
.cite-tab:hover{border-color:var(--primary);color:var(--primary)}
.cite-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.cite-output{background:var(--bg-section);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-4);font-size:.875rem;line-height:1.7;color:var(--text);min-height:80px;position:relative;margin-bottom:var(--sp-3)}
.cite-output-text{white-space:pre-wrap;word-break:break-word}
.btn-copy-cite{position:absolute;top:var(--sp-2);right:var(--sp-2);padding:4px 10px;font-size:.72rem;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition)}
.btn-copy-cite:hover{background:var(--accent)}
.cite-download-section{border-top:1px solid var(--border);padding-top:var(--sp-4);margin-top:var(--sp-2)}
.cite-download-title{font-size:.8rem;font-weight:var(--fw-semi);color:var(--text);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--sp-3)}
.cite-download-btns{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.btn-dl-cite{padding:6px 14px;font-size:.78rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;color:var(--text);cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;gap:5px}
.btn-dl-cite:hover{border-color:var(--primary);color:var(--primary);background:var(--blue-bg)}

/* ── RECOGNITION ROW ──────────────────────────────────────── */
.recognition-section{padding:var(--sp-8) 0;background:var(--bg-section);border-top:1px solid var(--border)}
.recognition-inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-8)}
@media(min-width:768px){.recognition-inner{flex-wrap:nowrap}}
.recognition-label{font-size:.75rem;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);white-space:nowrap}
.recognition-logos{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-5)}
.recog-item{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;transition:var(--transition);opacity:.8}
.recog-item:hover{opacity:1;transform:translateY(-2px)}
.recog-logo-box{width:60px;height:44px;display:flex;align-items:center;justify-content:center}
.recog-logo-box svg,.recog-logo-box img{max-width:100%;max-height:100%;object-fit:contain}
.recog-name{font-size:.65rem;color:var(--text-muted);font-weight:var(--fw-semi);text-align:center;line-height:1.2}

/* ── INDEXING ROW ─────────────────────────────────────────── */
.indexing-section{padding:var(--sp-8) 0;background:#fff;border-top:1px solid var(--border)}
.indexing-inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-6)}
@media(min-width:768px){.indexing-inner{flex-wrap:nowrap}}
.indexing-logos{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4)}
.index-item{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;transition:var(--transition);opacity:.75}
.index-item:hover{opacity:1;transform:translateY(-2px)}
.index-logo-box{height:32px;display:flex;align-items:center;justify-content:center;padding:0 var(--sp-2)}
.index-logo-box svg,.index-logo-box img{max-height:28px;object-fit:contain}
.index-name{font-size:.62rem;color:var(--text-muted);font-weight:var(--fw-semi);text-align:center}

/* ── QUICK ACCESS SECTION ─────────────────────────────────── */
.quick-bar{background:linear-gradient(135deg,#e8f0fa 0%,#dce8f5 100%);border-top:1px solid #c4d6ec;border-bottom:1px solid #c4d6ec;padding:var(--sp-5) 0 var(--sp-4) 0;margin-top:var(--sp-12)}
.quick-bar-heading{text-align:center;margin-bottom:var(--sp-3)}
.quick-bar-heading h2{font-family:'Merriweather',Georgia,serif;font-size:.9rem;font-weight:700;color:var(--primary);margin:0 0 1px;text-transform:uppercase;letter-spacing:.06em}
.quick-bar-heading p{font-size:.7rem;color:var(--text-muted);margin:0}
.quick-bar-inner{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-2)}
.quick-bar-item{display:flex;flex-direction:row;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-3);background:#fff;border:1px solid #c8daf0;border-radius:10px;border-left:3px solid var(--primary);text-decoration:none;transition:box-shadow .2s,transform .2s,border-left-color .2s;color:var(--text);box-shadow:0 1px 4px rgba(26,60,94,.06)}
.quick-bar-item:hover{box-shadow:0 4px 14px rgba(26,60,94,.14);transform:translateY(-2px);border-left-color:var(--accent)}
.qb-icon{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--primary),#2456a4);display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;color:#fff}
.qb-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.qb-title{font-size:.75rem;font-weight:700;color:var(--primary);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qb-sub{font-size:.62rem;color:var(--text-muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qb-arrow{display:none}

/* ── JOURNAL METRICS WIDGET ───────────────────────────────── */
.metrics-widget{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-4);margin-top:var(--sp-4)}
.metrics-row{display:flex;justify-content:space-between;align-items:center;padding:var(--sp-2) 0;border-bottom:1px solid var(--bg-section);font-size:.82rem}
.metrics-row:last-child{border-bottom:none}
.metrics-row-label{color:var(--text-muted)}
.metrics-row-val{font-weight:var(--fw-bold);color:var(--primary)}

/* ── FEED WIDGET ──────────────────────────────────────────── */
.feed-link{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-2) 0;border-bottom:1px solid var(--bg-section);font-size:.85rem;color:var(--text);text-decoration:none;transition:color .2s}
.feed-link:last-child{border-bottom:none}
.feed-link:hover{color:var(--accent)}
.feed-link-left{display:flex;align-items:center;gap:var(--sp-2)}
.feed-icon{width:18px;height:18px;background:#f26522;border-radius:3px;display:inline-flex;align-items:center;justify-content:center}
.feed-icon svg{width:12px;height:12px;fill:#fff}

/* ── COVER WIDGET ─────────────────────────────────────────── */
.cover-widget-img{width:100%;aspect-ratio:3/4;background:linear-gradient(135deg,#1a3c5e,#0e4d4d);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:var(--sp-4);margin-bottom:var(--sp-3);box-shadow:var(--shadow-md)}
.cover-widget-vol{font-size:1rem;font-weight:700;margin-bottom:4px}
.cover-widget-issue{font-size:.8rem;opacity:.8}

/* ── ARTICLE NUMBER BADGE ─────────────────────────────────── */
.issue-stats-row{display:flex;gap:var(--sp-4);margin-bottom:var(--sp-2)}
.issue-stat-chip{background:var(--blue-bg);border-radius:999px;padding:2px 10px;font-size:.75rem;color:var(--primary);font-weight:var(--fw-semi)}

/* ═══════════════════════════════════════════════════════════════
   HEADER V2 FIX — two-row layout (logo+badges / nav)
   ═══════════════════════════════════════════════════════════════ */
.site-header{height:auto!important;flex-direction:column;align-items:stretch;position:sticky;top:0;z-index:1000}
.header-top{padding:10px 0;background:#fff;border-bottom:1px solid var(--border-light)}
.header-top-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.header-nav-strip{background:#fff;border-top:none}
.header-nav-inner{display:flex;align-items:center;justify-content:space-between;min-height:48px}
/* .header-inner: used by inner pages — keep visible */
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);width:100%;flex-wrap:wrap}

/* Logo sizing in two-row header */
.logo{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;flex-shrink:0}
.logo svg{flex-shrink:0}
.logo-title{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--primary);font-family:var(--font-heading);line-height:1}
.logo-sub{font-size:.85rem;color:var(--text-muted);line-height:1.3;display:block;white-space:nowrap}

/* Recognition badges — inherit redesigned styles above */

/* Nav in new structure */
.main-nav{display:none}
@media(min-width:992px){
  .main-nav{display:flex;align-items:center}
  .hamburger{display:none}
}

/* LOGO collapse on small screens */
@media(max-width:991px){
  .header-badges{display:none!important}
  .logo-sub{display:none}
  .logo-title{font-size:var(--fs-lg)}
}
@media(max-width:575px){
  .logo svg{width:36px;height:36px}
}

/* ── RECOGNITION SECTION FIX ─────────────────────────────── */
.recognition-section{background:#f8f9fa;padding:var(--sp-6) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.recog-strip{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.recog-strip-label{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);white-space:nowrap;min-width:100px}
.recog-logos-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.recog-badge-item{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;transition:transform .2s;cursor:pointer}
.recog-badge-item:hover{transform:translateY(-3px)}
.recog-badge-box{border-radius:8px;padding:6px 12px;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:90px;border:2px solid transparent}
.recog-badge-box.pmdc{background:#e3f2fd;border-color:#1565c0}
.recog-badge-box.hec{background:#e8f5e9;border-color:#2e7d32}
.recog-badge-box.doaj{background:#ffeee9;border-color:#e84b34}
.recog-badge-box.cope{background:#fff8e1;border-color:#f9a825}
.recog-badge-box.oa{background:#fff3e0;border-color:#e65100}
.recog-badge-name{font-size:.78rem;font-weight:800;letter-spacing:.02em}
.recog-badge-name.pmdc{color:#1565c0}
.recog-badge-name.hec{color:#2e7d32}
.recog-badge-name.doaj{color:#e84b34}
.recog-badge-name.cope{color:#f9a825}
.recog-badge-name.oa{color:#e65100}
.recog-badge-sub{font-size:.6rem;color:var(--text-muted);text-align:center;line-height:1.2}

/* ── INDEXING SECTION FIX ────────────────────────────────── */
.indexing-section{background:#fff;padding:var(--sp-6) 0;border-bottom:1px solid var(--border)}
.index-strip{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.index-logos-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-4)}
.idx-item{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;transition:transform .2s;opacity:.8}
.idx-item:hover{transform:translateY(-2px);opacity:1}
.idx-logo{height:30px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.idx-logo img,.idx-logo svg{height:100%;object-fit:contain}
.idx-name{font-size:.6rem;color:var(--text-muted);text-align:center}

/* Google Scholar logo text */
.logo-gscholar{font-family:Arial,sans-serif;font-size:14px;font-weight:600;line-height:1}
.logo-gscholar .g{color:#4285F4}.logo-gscholar .o1{color:#EA4335}.logo-gscholar .o2{color:#FBBC05}.logo-gscholar .g2{color:#4285F4}.logo-gscholar .l{color:#34A853}.logo-gscholar .e{color:#EA4335}
.logo-crossref{font-family:Arial,sans-serif;font-size:15px;font-weight:700;color:#e75012;line-height:1}
.logo-dimensions{font-family:Arial,sans-serif;font-size:13px;font-weight:700;color:#1a3c8c;line-height:1}
.logo-pkp{font-family:Arial,sans-serif;font-size:12px;font-weight:800;color:#2c5f8a;background:#e8f0f8;padding:2px 6px;border-radius:3px;line-height:1.4}
.logo-road{font-family:Arial,sans-serif;font-size:16px;font-weight:900;color:#c0392b;line-height:1}
.logo-base{font-family:Arial,sans-serif;font-size:16px;font-weight:700;color:#2e7d32;line-height:1}
.logo-worldcat{font-family:Arial,sans-serif;font-size:13px;font-weight:700;color:#005a9c;line-height:1}
.logo-scilit{font-family:Arial,sans-serif;font-size:14px;font-weight:700;color:#7c3aed;line-height:1}
.logo-who{font-family:Arial,sans-serif;font-size:11px;font-weight:700;color:#0057a0;line-height:1;text-align:center}
.logo-rgate{font-family:Arial,sans-serif;font-size:12px;font-weight:700;color:#00ccc0;line-height:1}
.logo-oai{font-family:Arial,sans-serif;font-size:11px;font-weight:700;color:#8b1a1a;background:#fff0f0;padding:2px 5px;border-radius:3px;line-height:1.4}

/* ============ REFINEMENT PATCH ============ */
/* 1. Logo: Large JPSIM text, no SVG icon */
.logo{text-decoration:none;display:flex;align-items:flex-start;gap:0}
.logo-text{display:flex;flex-direction:column;gap:1px}
.logo-title{
  font-family:'Merriweather',Georgia,serif;
  font-size:3.2rem;font-weight:900;
  color:#1a3c5e;
  letter-spacing:.08em;line-height:1;
  text-transform:uppercase;display:block;
  transition:color .25s ease,letter-spacing .3s ease,text-shadow .25s ease;
  cursor:pointer;
}
.logo:hover .logo-title{
  color:#2456a4;
  letter-spacing:.12em;
  text-shadow:2px 3px 0 rgba(26,60,94,.12),0 0 24px rgba(36,86,164,.18);
}
.logo-sub{font-size:.9rem;font-weight:600;color:var(--text-muted);letter-spacing:.01em;display:block;margin-top:4px;white-space:nowrap;transition:color .25s ease,letter-spacing .25s ease}
.logo:hover .logo-sub{color:var(--primary);letter-spacing:.03em}
.logo-tagline{font-size:.58rem;color:var(--text-muted);opacity:.65;display:block;margin-top:1px;transition:opacity .25s ease}
.logo:hover .logo-tagline{opacity:.9}
/* Hide any SVG that was inside .logo (caduceus) */
.logo > svg,.logo > a > svg,.header-top-inner .logo svg{display:none!important}

/* 2. Hero: more compact, better cover placement */
.hero-v2{padding:var(--sp-2) 0 var(--sp-10) 0}
.hero-v2 h1{font-size:clamp(.9rem,1.8vw,1.2rem);margin-bottom:var(--sp-2)}
.hero-v2 p{font-size:.9rem;margin-bottom:var(--sp-4)}
.hero-chips{gap:var(--sp-2);margin-bottom:0}
.hero-chip{padding:var(--sp-2) var(--sp-1)}
.hero-chip-icon{font-size:1.1rem}
.hero-chip-text{font-size:.68rem}
.hero-book-wrap::before{content:'';position:absolute;width:360px;height:360px;background:radial-gradient(circle,rgba(201,162,39,.18) 0%,rgba(26,60,94,.08) 50%,transparent 70%);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);z-index:0}
.hero-book-wrap img.journal-cover,img.journal-cover{width:196px!important;height:auto!important;border-radius:0!important;filter:drop-shadow(0 20px 40px rgba(0,0,0,.55)) drop-shadow(0 4px 12px rgba(0,0,0,.3));display:block;object-fit:contain;position:relative;z-index:1}
@media(min-width:768px){.hero-book-wrap img.journal-cover,img.journal-cover{width:210px!important}}
@media(min-width:992px){.hero-book-wrap img.journal-cover,img.journal-cover{width:238px!important}}

/* 3. PDF button: page number as badge on second line */
.btn-pdf-sm{flex-direction:column;align-items:center;gap:0;line-height:1.2;padding:5px 14px}
.page-count{font-size:.6rem;font-weight:400;opacity:.75;letter-spacing:.02em;display:block;margin-top:1px}

/* 4. Sidebar widget title */
.widget-title{background:var(--primary);color:#fff;padding:var(--sp-2) var(--sp-4);font-size:.82rem;font-weight:700;margin:0 0 var(--sp-3) 0;letter-spacing:.03em;border-radius:0;display:block}
.sidebar-widget{padding:0;overflow:hidden}
.sidebar-widget>.widget-title{margin:0;border-radius:0}
.sidebar-widget>*:not(.widget-title){padding-left:var(--sp-4);padding-right:var(--sp-4)}
.sidebar-widget>img{padding:0}
.sidebar-widget>a.btn{margin:0 var(--sp-4) var(--sp-3) var(--sp-4);display:block;text-align:center}
.sidebar{gap:var(--sp-4)}

/* 5. Mobile nav: fixed to bottom of header */
.mobile-nav{position:absolute;top:100%;left:0;right:0}

/* 6. Topbar adjustments — fix layout (HTML uses topbar-left/right) */
.topbar{height:auto;padding:6px 0}
.topbar .container{display:flex;align-items:center;justify-content:space-between;width:100%;flex-wrap:wrap;gap:6px}
.topbar-left{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;color:rgba(255,255,255,.85);font-size:var(--fs-xs)}
.topbar-left span{display:flex;align-items:center;gap:4px}
.topbar-right{display:flex;align-items:center;gap:var(--sp-2)}

/* ============ SECOND REFINEMENT PATCH ============ */

/* 1. NAV: white text on dark navy strip */
.header-nav-strip .main-nav a{color:rgba(255,255,255,.88);border-bottom:3px solid transparent;font-weight:500;font-size:.87rem;letter-spacing:.01em;padding:var(--sp-3) var(--sp-3)}
.header-nav-strip .main-nav a:hover{color:#fff;border-bottom-color:var(--accent);background:rgba(255,255,255,.06)}
.header-nav-strip .main-nav a.active{color:var(--accent)!important;border-bottom-color:var(--accent);font-weight:700}
.header-nav-strip .main-nav li.active>a{color:var(--accent)!important;border-bottom-color:var(--accent);font-weight:700}
.header-nav-strip .hamburger span{background:#fff}
.header-nav-strip .dropdown{top:100%;margin-top:0}
.header-nav-strip .dropdown a{color:#1a2e40;font-weight:500}
.header-nav-strip .dropdown a:hover{background:#f0f4ff;color:#1a3c5e;border-left-color:#f4a922}

/* 2. INDEXED IN: same badge-box format as Recognised By */
.idx-badge-item{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;transition:transform .2s;cursor:pointer}
.idx-badge-item:hover{transform:translateY(-3px)}
.idx-badge-box{border-radius:8px;padding:6px 12px;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:90px;border:2px solid transparent;text-align:center}
.idx-badge-name{font-size:.8rem;font-weight:800;line-height:1.2}
.idx-badge-sub{font-size:.65rem;color:#555;line-height:1.3;text-align:center}

/* Indexed colours */
.idx-badge-box.gs{background:#e8f0fe;border-color:#4285F4}
.idx-badge-box.gs .idx-badge-name .g{color:#4285F4}.idx-badge-box.gs .idx-badge-name .o1{color:#EA4335}.idx-badge-box.gs .idx-badge-name .o2{color:#FBBC05}.idx-badge-box.gs .idx-badge-name .g2{color:#4285F4}.idx-badge-box.gs .idx-badge-name .l{color:#34A853}.idx-badge-box.gs .idx-badge-name .e{color:#EA4335}
.idx-badge-box.cr{background:#fff2ee;border-color:#e75012}
.idx-badge-box.cr .idx-badge-name{color:#e75012}
.idx-badge-box.dim{background:#eef0f8;border-color:#1a3c8c}
.idx-badge-box.dim .idx-badge-name{color:#1a3c8c}
.idx-badge-box.pkp{background:#e8f4fd;border-color:#1a6499}
.idx-badge-box.pkp .idx-badge-name{color:#1a6499}
.idx-badge-box.road{background:#fff0f0;border-color:#c0392b}
.idx-badge-box.road .idx-badge-name{color:#c0392b}
.idx-badge-box.base{background:#eafaf1;border-color:#1e8449}
.idx-badge-box.base .idx-badge-name{color:#1e8449}
.idx-badge-box.wc{background:#e8f0fe;border-color:#2471a3}
.idx-badge-box.wc .idx-badge-name{color:#2471a3}
.idx-badge-box.sc{background:#f9f0ff;border-color:#7d3c98}
.idx-badge-box.sc .idx-badge-name{color:#7d3c98}
.idx-badge-box.who{background:#e8f4fd;border-color:#009edb}
.idx-badge-box.who .idx-badge-name{color:#009edb}
.idx-badge-box.rg{background:#e6f9f5;border-color:#3ec5a5}
.idx-badge-box.rg .idx-badge-name{color:#40b89a}
.idx-badge-box.oai{background:#fff8e7;border-color:#8b4513}
.idx-badge-box.oai .idx-badge-name{color:#7b3f00}

/* ── ARTICLE CARD UPGRADES ───────────────────────────────── */
/* Left type accent border */
.article-item-v2[data-type="editorial"]{border-left:4px solid #7c3aed}
.article-item-v2[data-type="original"]{border-left:4px solid #1a3c5e}
.article-item-v2[data-type="review"]{border-left:4px solid #0891b2}
.article-item-v2[data-type="case"]{border-left:4px solid #ea7c12}
.article-item-v2[data-type="reflection"]{border-left:4px solid #6b7280}
/* PDF button — clean single-row, no page number inside */
.btn-pdf-sm{flex-direction:row!important;align-items:center;gap:4px;padding:5px 14px;line-height:1.4}
.page-count{display:none!important}
.pages-chip{display:none!important}

/* ── PAGES PILL (next to citation) ──────────────────────── */
.art-pages-line{margin:-2px 0 var(--sp-2) 0}
.art-pages-pill{display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;background:#e0e7ff;color:#3730a3;border-radius:999px;padding:2px 10px;letter-spacing:.01em;border:1px solid #c7d2fe}

/* ── ARTICLE HEADER ROW (badge left · pages pill right) ──── */
.art-header-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;margin-bottom:var(--sp-2)}
.art-pg-inline{font-size:.72rem;font-weight:700;background:#e0e7ff;color:#3730a3;border-radius:999px;padding:2px 10px;border:1px solid #c7d2fe;white-space:nowrap}

/* ── ARTICLE CITE BLOCK (journal ref + DOI) ──────────────── */
.art-cite-block{margin-bottom:var(--sp-3)}
.art-journal-ref{font-size:.85rem;color:var(--text-muted);font-style:italic;display:block;margin-bottom:3px}
.art-doi-inline{font-size:.78rem;color:var(--text-muted);display:block;margin-top:2px}
.art-doi-inline a{color:#0d9488;text-decoration:none}
.art-doi-inline a:hover{text-decoration:underline}

/* ── ARTICLE METRICS (Views / Downloads / Citations) ─────── */
.article-metrics{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.art-metric{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 14px;border-radius:7px;text-align:center;min-width:68px;border:1px solid var(--border)}
.art-metric-num{font-size:.95rem;font-weight:700;line-height:1.2}
.art-metric-lbl{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-top:3px;white-space:nowrap}
.art-metric-views{background:#eef4ff;border-color:#c7d9f8}.art-metric-views .art-metric-num{color:#2563eb}.art-metric-views .art-metric-lbl{color:#3b82f6}
.art-metric-dl{background:#f0fdf4;border-color:#bbf7d0}.art-metric-dl .art-metric-num{color:#16a34a}.art-metric-dl .art-metric-lbl{color:#22c55e}
.art-metric-cite{background:#fff7ed;border-color:#fed7aa}.art-metric-cite .art-metric-num{color:#c2410c}.art-metric-cite .art-metric-lbl{color:#ea580c}

/* ── SIDEBAR BADGE PILLS ─────────────────────────────────── */
.sb-badge-wrap{display:flex;flex-wrap:wrap;gap:5px;padding:4px 0}
.sb-badge{font-size:.68rem;font-weight:700;padding:3px 9px;border-radius:999px;text-decoration:none;border:1px solid transparent;transition:transform .15s,opacity .15s;white-space:nowrap;display:inline-block;line-height:1.5}
.sb-badge:hover{transform:translateY(-1px);opacity:.85}
.sb-hec{background:#e8f5e9;color:#2e7d32;border-color:#2e7d32}
.sb-pmdc{background:#e3f2fd;color:#1565c0;border-color:#1565c0}
.sb-doaj{background:#ffeee9;color:#e84b34;border-color:#e84b34}
.sb-cope{background:#fff8e1;color:#b07a00;border-color:#f9a825}
.sb-oa{background:#fff3e0;color:#e65100;border-color:#e65100}
.sb-gs{background:#e8f0fe;color:#4285F4;border-color:#4285F4}
.sb-cr{background:#fff2ee;color:#e75012;border-color:#e75012}
.sb-dim{background:#eef0f8;color:#1a3c8c;border-color:#1a3c8c}
.sb-pkp{background:#e8f4fd;color:#1a6499;border-color:#1a6499}
.sb-road{background:#fff0f0;color:#c0392b;border-color:#c0392b}
.sb-base{background:#eafaf1;color:#1e8449;border-color:#1e8449}
.sb-wc{background:#e8f0fe;color:#2471a3;border-color:#2471a3}
.sb-sc{background:#f9f0ff;color:#7d3c98;border-color:#7d3c98}
.sb-who{background:#e8f4fd;color:#007ab5;border-color:#009edb}
.sb-rg{background:#e6f9f5;color:#2e9e88;border-color:#3ec5a5}
.sb-oai{background:#fff8e7;color:#7b3f00;border-color:#8b4513}

/* ── SIDEBAR WIDGET HEADER BAR ───────────────────────────── */
.sw-hdr{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:8px 8px 0 0;font-size:.8rem;font-weight:700;color:#fff;margin:-1px -1px 12px -1px;letter-spacing:.02em}
.recog-widget{padding-bottom:4px}
.recog-hdr{background:linear-gradient(135deg,#1b5e20 0%,#2e7d32 100%)}
.index-hdr{background:linear-gradient(135deg,#1a237e 0%,#283593 100%)}

/* ── RECOGNISED BY LIST ──────────────────────────────────── */
.recog-list{display:flex;flex-direction:column;gap:7px}
.recog-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;border:1px solid #e8e8e8;background:#fafafa;text-decoration:none;transition:all .18s}
.recog-item:hover{background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.1);transform:translateY(-1px);border-color:#d0d0d0}
.recog-mark{width:42px;min-width:42px;height:42px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.58rem;font-weight:800;color:#fff;text-align:center;line-height:1.2;letter-spacing:.01em}
.recog-info{flex:1;min-width:0}
.recog-name{display:block;font-size:.73rem;font-weight:700;color:#1a1a1a;line-height:1.3}
.recog-status{display:block;font-size:.61rem;color:#777;line-height:1.3;margin-top:2px}
.recog-tick{width:20px;height:20px;min-width:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#fff;font-weight:700;flex-shrink:0}
.recog-item.recog-pending{border-style:dashed;background:#fcfcfc}
.recog-item.recog-pending .recog-status{color:#9ca3af;font-style:italic}

/* ── INDEXED IN GRID ─────────────────────────────────────── */
.idx-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.idx-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 8px;border-radius:8px;border:1px solid #e8e8e8;background:#fafafa;text-decoration:none;transition:all .18s;text-align:center}
.idx-card:hover{background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.1);transform:translateY(-1px);border-color:#ccc}
.idx-mark{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:800;color:#fff;line-height:1.2;letter-spacing:.01em}
.idx-name{font-size:.6rem;font-weight:600;color:#444;line-height:1.3;text-align:center;word-break:break-word}

/* ── LICENSE WIDGET ──────────────────────────────────────── */
.license-hdr{background:linear-gradient(135deg,#37474f,#546e7a)}
.license-body{padding:2px 0 4px}
.license-copy{font-size:.75rem;color:#1a1a1a;line-height:1.4;margin:0 0 10px}
.license-copy strong{font-weight:700}

/* CC BY Badge */
.cc-badge-link{display:inline-block;text-decoration:none;margin-bottom:10px}
.cc-badge{display:inline-flex;align-items:center;gap:0;border-radius:6px;overflow:hidden;border:2px solid #1a1a1a;background:#1a1a1a}
.cc-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:#1a1a1a}
.cc-icon+.cc-icon{border-left:1px solid #444}
.cc-label{font-size:.68rem;font-weight:800;color:#fff;padding:0 8px;letter-spacing:.03em;background:#1a1a1a;white-space:nowrap}
.cc-badge:hover{background:#333;border-color:#333}

.license-divider{height:1px;background:#e8e8e8;margin:10px 0}
.license-text{font-size:.72rem;color:#444;line-height:1.55;margin:0 0 8px}
.license-text:last-of-type{margin-bottom:10px}
.license-text a{color:#0d9488;text-decoration:none;font-weight:600}
.license-text a:hover{text-decoration:underline}
.license-email{display:inline-flex;align-items:center;gap:5px;font-size:.71rem;font-weight:600;color:#0d9488;text-decoration:none;background:#f0fdfa;border:1px solid #99f6e4;border-radius:6px;padding:5px 10px;transition:all .18s}
.license-email:hover{background:#ccfbf1;border-color:#2dd4bf}

/* ── QUICK LINKS SIDEBAR WIDGET ──────────────────────────── */
.quick-links-nav{display:flex;flex-direction:column;gap:2px}
.ql-link{display:block;font-size:.75rem;color:#374151;text-decoration:none;padding:6px 10px;border-radius:6px;transition:all .15s;border:1px solid transparent}
.ql-link:hover{background:#eef2ff;color:#3730a3;border-color:#c7d2fe;transform:translateX(2px)}

/* Inner-page layout is handled by css/inner.css (loaded on all inner pages) */

/* ═══════════════════════════════════════════════════════════════
   HOME PAGE — extracted inline styles + responsive polish
   Max layout width: 1200px (--max-w variable already set above)
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero CTA button row ──────────────────────────────────── */
.hero-v2-actions{display:flex;gap:1.5rem;margin-top:var(--sp-3);flex-wrap:wrap;align-items:center}
.btn-outline-hero{color:#fff;border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.1);font-weight:var(--fw-semibold);letter-spacing:.01em}
.btn-outline-hero:hover{background:rgba(255,255,255,.22);color:#fff;border-color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,255,255,.12)}

/* ── Main content wrapper vertical spacing ────────────────── */
.main-content-wrap{padding-top:3.5rem!important;padding-bottom:var(--sp-12)}

/* ── Page layout default gap ──────────────────────────────── */
.page-layout{gap:var(--sp-8)}

/* ── Sidebar: Current Issue widget internals ──────────────── */
.sidebar-cover-img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-md);margin-bottom:var(--sp-3);display:block}
.issue-vol-label{font-weight:700;color:var(--primary);font-size:.95rem;margin-bottom:4px;display:block}
.issue-date-label{font-size:.82rem;color:var(--text-muted);margin-bottom:var(--sp-2);display:block}
.issue-issn-text{font-size:.78rem;color:var(--text-muted);margin:var(--sp-2) 0;display:block;line-height:1.6}
.sidebar-view-btn{display:block;text-align:center;font-size:.85rem;margin-top:var(--sp-3)}

/* ── Submit widget ────────────────────────────────────────── */
.sidebar-widget.submit-widget{background:var(--primary);border-color:var(--primary)}
.submit-widget-title{color:#fff;font-size:var(--fs-md);margin-bottom:var(--sp-2);font-family:var(--font-heading)}
.submit-widget-text{font-size:.85rem;color:rgba(255,255,255,.8);margin-bottom:var(--sp-3)}
.submit-widget-btn{display:block;text-align:center}

/* ── Recog-mark colour modifiers ──────────────────────────── */
.recog-mark.rm-hec{background:linear-gradient(135deg,#1b5e20,#388e3c)}
.recog-mark.rm-pmdc{background:linear-gradient(135deg,#0d47a1,#1976d2)}
.recog-mark.rm-doaj{background:linear-gradient(135deg,#b71c1c,#e53935)}
.recog-mark.rm-cope{background:linear-gradient(135deg,#e65100,#f57c00)}
.recog-mark.rm-oa{background:linear-gradient(135deg,#7b1fa2,#ab47bc)}

/* ── Recog-tick colour modifiers ──────────────────────────── */
.recog-tick.rt-hec{background:#22c55e}
.recog-tick.rt-pmdc{background:#3b82f6}
.recog-tick.rt-doaj{background:#ef4444}
.recog-tick.rt-cope{background:#f97316}
.recog-tick.rt-oa{background:#a855f7}

/* ── Idx-mark colour modifiers ────────────────────────────── */
.idx-mark.im-gs{background:#4285F4}
.idx-mark.im-cr{background:#d44f00}
.idx-mark.im-di{background:#1a3c8c}
.idx-mark.im-pkp{background:#1a6499}
.idx-mark.im-rd{background:#c0392b}
.idx-mark.im-b{background:#1e8449}
.idx-mark.im-wc{background:#2471a3}
.idx-mark.im-sc{background:#7d3c98}
.idx-mark.im-who{background:#007ab5}
.idx-mark.im-rg{background:#2e9e88}
.idx-mark.im-oai{background:#7b3f00}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile-first, all breakpoints, max 1200px
   ═══════════════════════════════════════════════════════════════ */

/* ── Tiny phones (≤360px) ─────────────────────────────────── */
@media(max-width:360px){
  .hero-v2 h1{font-size:1.25rem}
  .hero-chips{grid-template-columns:1fr 1fr}
  .filter-tabs{gap:var(--sp-1)}
  .filter-tab{font-size:.72rem;padding:3px 8px}
  .article-metrics{gap:4px}
  .art-metric{padding:4px 8px;min-width:56px}
  .quick-bar-inner{grid-template-columns:repeat(2,1fr)}
  .quick-bar-item{border:1px solid rgba(255,255,255,.1)}
}

/* ── Small phones (361px–575px) ───────────────────────────── */
@media(min-width:361px) and (max-width:575px){
  .hero-v2 h1{font-size:1.4rem}
  .article-btn-row{flex-wrap:wrap}
}

/* ── All mobile (≤767px) ──────────────────────────────────── */
@media(max-width:767px){
  .container{padding:0 var(--sp-3)}
  .hero-v2{padding:var(--sp-6) 0}
  .hero-v2-inner{grid-template-columns:1fr;text-align:center}
  .hero-v2-content{order:1}
  .hero-book-wrap{order:0;margin-bottom:var(--sp-4)}
  .hero-v2 p{max-width:100%;margin:0 auto var(--sp-4)}
  .hero-chips{margin:0 auto var(--sp-4);max-width:320px}
  .hero-v2-actions{justify-content:center}
  .journal-cover{width:140px!important}
  .section-header{flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
  .article-bottom{flex-direction:column;gap:var(--sp-2)}
  .article-metrics{justify-content:flex-start}
  .article-btn-row{justify-content:flex-start}
  .quick-bar-inner{grid-template-columns:1fr 1fr}
  .idx-grid{grid-template-columns:1fr 1fr 1fr}
  .recog-list{gap:5px}
}

/* ── Tablet (768px–991px) ─────────────────────────────────── */
@media(min-width:768px) and (max-width:991px){
  .hero-v2 h1{font-size:1.7rem}
  .journal-cover{width:168px!important}
  .page-layout{grid-template-columns:1fr}
  .idx-grid{grid-template-columns:repeat(3,1fr)}
  .quick-bar-inner{grid-template-columns:repeat(3,1fr)}
}

/* ── Desktop (≥992px) — sidebar appears ──────────────────── */
@media(min-width:992px){
  .page-layout{grid-template-columns:1fr 300px}
  .hero-v2 h1{font-size:clamp(1.6rem,3vw,2.2rem)}
  .journal-cover{width:210px!important}
}

/* ── Wide (≥1200px) — cap at --max-w ─────────────────────── */
@media(min-width:1200px){
  .container{max-width:var(--max-w);padding:0 var(--sp-6)}
  .hero-v2 h1{font-size:2.2rem}
}

/* Ensure no content overflows horizontally */
body{overflow-x:hidden}
img,video,iframe,embed{max-width:100%}
.article-item-v2 .article-title{word-break:break-word}
pre,code{white-space:pre-wrap;word-break:break-word}


/* ── Hero Reference Design — world map, stethoscope, standing book ── */

/* Decorative overlay container */
.hero-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}

/* Geometric background SVG — fills full banner */
.hero-geo-bg{position:absolute;inset:0;width:100%;height:100%;opacity:1}

/* Chip label (smaller text above) + value (bold text below) */
.hero-chip-label{font-size:.68rem;color:rgba(255,255,255,.7);font-weight:var(--fw-normal);line-height:1.2;display:block}
.hero-chip-value{font-size:.88rem;color:#fff;font-weight:var(--fw-bold);line-height:1.2;display:block}

/* Standing book — 3D perspective effect using flat cover */
.journal-cover-standing{
  width:75px;
  height:auto;
  border-radius:3px 10px 10px 3px;
  transform:perspective(900px) rotateY(-18deg) rotateX(2deg);
  box-shadow:
    -12px 12px 40px rgba(0,0,0,.55),
    -4px 0 12px rgba(0,0,0,.4),
    4px 0 8px rgba(255,255,255,.04);
  transition:transform .4s ease,box-shadow .4s ease;
  object-fit:cover;
  display:block;
  position:relative;
  z-index:2;
  filter:none!important;
  mix-blend-mode:normal!important;
}
.journal-cover-standing:hover{
  transform:perspective(900px) rotateY(-12deg) rotateX(1deg) translateY(-4px);
  box-shadow:-16px 20px 50px rgba(0,0,0,.6),-4px 0 12px rgba(0,0,0,.4);
}

/* Override previous journal-cover rules when standing class is present */
.hero-book-wrap img.journal-cover-standing,
img.journal-cover-standing{
  mix-blend-mode:normal!important;
  filter:none!important;
  border-radius:3px 10px 10px 3px!important;
}

/* Responsive: standing book sizes */
@media(max-width:767px){.journal-cover-standing{width:70px!important;transform:none!important;box-shadow:0 16px 40px rgba(0,0,0,.5)!important}}
@media(min-width:768px){.journal-cover-standing{width:78px!important}}
@media(min-width:992px){.journal-cover-standing{width:85px!important}}
@media(min-width:1200px){.journal-cover-standing{width:95px!important}}

/* Responsive: geo background */
@media(max-width:575px){.hero-geo-bg{opacity:.7}}

/* ══════════════════════════════════════════
   HERO SEARCH
══════════════════════════════════════════ */
.hero-search-form{margin-bottom:var(--sp-6);position:relative;z-index:2}
.hero-search-wrap{display:flex;align-items:center;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.3);border-radius:50px;overflow:hidden;transition:border-color .25s,background .25s;backdrop-filter:blur(6px)}
.hero-search-wrap:focus-within{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.6);box-shadow:0 0 0 3px rgba(255,255,255,.1)}
.hero-search-icon{flex-shrink:0;margin:0 var(--sp-3);color:rgba(255,255,255,.6);pointer-events:none;width:18px;height:18px}
.hero-search-input{flex:1;background:transparent;border:none;outline:none;padding:var(--sp-3) 0;font-size:.95rem;color:#fff;min-width:0}
.hero-search-input::placeholder{color:rgba(255,255,255,.5)}
.hero-search-btn{flex-shrink:0;background:var(--accent);color:#1a2a00;border:none;padding:var(--sp-3) var(--sp-5);font-size:.88rem;font-weight:700;cursor:pointer;transition:background .2s;white-space:nowrap}
.hero-search-btn:hover{background:#e0b82e}