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

   This is a SEPARATE, self-contained copy of the design system the
   main static site (ijpr_css_2026/ijpr-core.css + ijpr-responsive.css)
   already uses — same tokens, same fonts (self-hosted here too, not
   linked back to the main site), same component classes (masthead,
   trust-pill, nav.primary, breadcrumb, control-dock, footer, widgets,
   art-row/pill-link, page-hero/prose). Deliberately duplicated rather
   than loaded live from the main site, so a change on one side can
   never break the other. If the main site's design changes later,
   this file needs updating by hand to match — see IJPR_Wordpress/
   README.txt.
   ============================================================ */

/* ============================================================
   SELF-HOSTED FONTS (copied from ijpr_fonts_2026/ — same files,
   same size-matched fallback faces, so the layout doesn't jump while
   the web fonts load, exactly like the main site).
   ============================================================ */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/fraunces-latin.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 700;font-display:swap;src:url(../fonts/fraunces-italic-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibmplexmono-400-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibmplexmono-500-latin.woff2) format('woff2')}
@font-face{font-family:'Fraunces Fallback';src:local('Georgia');size-adjust:82%;ascent-override:118%;descent-override:31%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('Helvetica');size-adjust:105%;ascent-override:92%;descent-override:23%;line-gap-override:0%}
@font-face{font-family:'IBM Plex Mono Fallback';src:local('Courier New');size-adjust:100%;ascent-override:103%;descent-override:28%;line-gap-override:0%}

/* ============================================================
   DESIGN TOKENS & SYSTEM ARCHITECTURE
   ============================================================ */
:root{
  /* Same token names and values as the main site's ijpr-core.css. */
  --teal-dark: #0A423C;
  --teal-darker: #052722;
  --teal: #0F5E56;
  --teal-pale: #DEEAE7;
  --paper: #F4F5F0;
  --paper-alt: #EAEBE2;
  --line: #D3D6C9;
  --line-strong: #B7BBAC;
  --ink: #16211D;
  --ink-soft: #54655C;
  --ink-faint: #5A655B;
  --rust: #A64B1B;

  --sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: 'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', 'IBM Plex Mono Fallback', 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"]){
    --paper: #15191A;
    --paper-alt: #1E2422;
    --ink: #ECEFEA;
    --ink-soft: #AEB7B0;
    --ink-faint: #88938D;
    --rust: #E07A45;
    --teal: #4FBBA9;
    --teal-dark: #61A398;
    --teal-pale: #14332D;
    --line: #333B37;
    --line-strong: #454F49;
  }
}
[data-theme="dark"]{
  --paper: #15191A;
  --paper-alt: #1E2422;
  --ink: #ECEFEA;
  --ink-soft: #AEB7B0;
  --ink-faint: #88938D;
  --rust: #E07A45;
  --teal: #4FBBA9;
  --teal-dark: #61A398;
  --teal-pale: #14332D;
  --line: #333B37;
  --line-strong: #454F49;
}

*,*::before,*::after{ box-sizing: border-box; }
/* scroll-behavior was "smooth" here, which applies to EVERY scroll on
   the page — not just intentional jump-to-anchor clicks, but ordinary
   mouse-wheel/trackpad scrolling too. In Chromium that makes rapid
   wheel input feel like it's fighting an animation queue: quick scroll
   ticks visibly lag behind the input instead of tracking it 1:1, which
   reads as "the page scrolls very slowly" — most noticeable on a long
   scan-heavy page like Search results. Left at the default (instant)
   here so ordinary scrolling is fully responsive; the specific places
   that want an animated jump (in-page TOC/anchor links, the reading
   rail's dots, Back to Top) now ask for it explicitly in JS via
   `scrollIntoView({behavior:'smooth'})` / `scrollTo({behavior:'smooth'})`,
   which is unaffected by this property either way. */
html{ scroll-behavior: auto; scroll-padding-top: calc(var(--header-h) + 84px); }

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

img{ max-width:100%; display:block; }
/* Matches the real site's own global reset exactly (ijpr-core.css:
   a{color:inherit;text-decoration:none}) — this was missing the
   text-decoration:none half, which most links never noticed because
   they carry their own per-component text-decoration:none override,
   but a few (the footer's Quick Links / Editorial Policy References
   lists among them) don't, so they fell back to the browser's default
   underline instead. */
a{ color: inherit; text-decoration: none; }
.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(--sans); color: var(--teal-dark); margin: 0 0 .5em; line-height: 1.25; letter-spacing: -0.015em; }
/* Dark-mode heading fix — headings use --teal-dark 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(--teal); 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(--teal); 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; }
/* Same technique as .visually-hidden above, under the name the main
   site's own CSS (and this rebuild's newer templates) actually use —
   was missing entirely, which is why every "sr-only" label on
   front-page.php/page.php/single.php/single-article.php/404.php was
   rendering as ordinary visible text and, worse, sitting as a flex
   item ahead of the search boxes those labels belong to, squeezing
   the input down to almost nothing. */
.sr-only{ position:absolute; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* ============================================================
   TOP UTILITY BAR + HEADER
   ============================================================ */
.utility-bar{
  background: var(--teal-darker);
  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(--teal); }

.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(--teal-dark);
  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(--teal), #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; }
  /* .sub-menu is added alongside .sub here (not replacing it) because
     the header nav is now optionally driven by wp_nav_menu() (see
     functions.php section 8) — WordPress's own menu output uses the
     class "sub-menu" for a dropdown built in Appearance > Menus, while
     the hardcoded fallback markup (shown until a real menu is
     assigned) still uses "sub". Both need to look identical, so both
     classes get the same rules. */
  .primary-nav .sub,
  .primary-nav .sub-menu{
    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,
  [data-theme="dark"] .primary-nav .sub-menu{ background:#182430; }
  .primary-nav > li:hover .sub, .primary-nav > li:focus-within .sub,
  .primary-nav > li:hover .sub-menu, .primary-nav > li:focus-within .sub-menu{ display:block; }
  .primary-nav .sub a, .primary-nav .sub-menu 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, .primary-nav .sub-menu a:hover{ background: var(--paper-alt); color: var(--teal); }
}

.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(--sans); 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(--paper-alt); 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(--teal); }
.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(--teal-dark); 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(--mono); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color: var(--teal); 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(--paper-alt);
  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(--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(--teal-dark); 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(--teal); 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(--mono); font-size:12.5px; font-weight: 600; color: var(--ink-soft);
  background: var(--paper-alt); 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(--sans); 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(--teal-dark); }
[data-theme="dark"] .issue-tabs button:hover{ color:#EAF1F7; }
.issue-tabs button[aria-selected="true"]{ color: var(--teal); border-bottom-color: var(--teal); 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(--paper-alt); 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(--teal); }
.toc-num{ font-family: var(--mono); color: var(--rust); 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(--mono); font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color: var(--teal); 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(--teal-dark); background-image: linear-gradient(var(--teal), var(--teal)); 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(--teal); background-size:100% 2px; }
[data-theme="dark"] .paper-title a{ color:#EAF1F7; }
.paper-authors{
  font-family: var(--serif); font-style:italic; color: var(--ink-soft); margin:0 0 8px; font-size:15px;
}
.paper-citation{ font-family: var(--serif); color: var(--ink); font-size:14.5px; margin:0 0 6px; }
.paper-doi{ font-family: var(--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(--teal-dark); }
.btn-ghost:hover{ border-color: var(--teal); color: var(--teal); background: rgba(0,105,92,.05); }
[data-theme="dark"] .btn-ghost{ color:#EAF1F7; }
.btn-solid, .btn-primary{ background: var(--teal); color:#FFFFFF !important; box-shadow: 0 2px 6px rgba(0,105,92,.25); }
.btn-solid:hover, .btn-primary:hover{ background: var(--teal-dark); 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(--sans);
  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(--paper-alt); }

.search-results-panel{ min-width:0; }
.search-result-meta{
  display:flex; align-items:center; gap:6px;
  font-family: var(--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(--teal-dark); 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(--teal); color: var(--teal); }
.search-pagination .page-numbers.current{ background: var(--teal); border-color: var(--teal); 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(--mono); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color: var(--teal); 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(--teal-dark);
}
[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(--teal-dark); }
.bird-wing{ fill: var(--teal); }
.bird-beak, .bird-star{ fill: var(--rust); }
.bird-eye{ fill: var(--paper); }
.envelope-body{ fill: var(--paper); stroke: var(--teal-dark); stroke-width:2.5; }
.envelope-flap{ fill:none; stroke: var(--teal-dark); stroke-width:2.5; stroke-linejoin:round; }
.envelope-seal{ fill: var(--rust); }

.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(--teal); 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(--teal-dark); font-weight:600; text-decoration:none; }
.notfound-contact-card a:hover{ color: var(--teal); 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 .ijpr-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. */
.ijpr-legacy-content .wp-block-button__link,
.ijpr-legacy-content .wp-block-file__button{
  background: var(--teal) !important;
  color: #fff !important;
  border-radius: 999px;
}
.ijpr-legacy-content .wp-block-button__link:hover,
.ijpr-legacy-content .wp-block-file__button:hover{
  background: var(--teal-dark) !important;
}
.ijpr-legacy-content .wp-block-button.is-style-outline .wp-block-button__link{
  background: transparent !important;
  color: var(--teal) !important;
  border: 2px solid var(--teal) !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 `.ijpr-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.ijpr-legacy-content .prose a[style*="background"],
.page.ijpr-legacy-content .prose a.button,
.page.ijpr-legacy-content .prose a.btn,
.page.ijpr-legacy-content .prose .su-button,
.page.ijpr-legacy-content .prose .elementor-button{
  background: var(--teal) !important;
  background-color: var(--teal) !important;
  color: #fff !important;
  border-color: var(--teal) !important;
}
.page.ijpr-legacy-content .prose a[style*="background"]:hover,
.page.ijpr-legacy-content .prose a.button:hover,
.page.ijpr-legacy-content .prose a.btn:hover,
.page.ijpr-legacy-content .prose .su-button:hover,
.page.ijpr-legacy-content .prose .elementor-button:hover{
  background: var(--teal-dark) !important;
  background-color: var(--teal-dark) !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.ijpr-legacy-content .issue-panel{
  --paper: #F4F5F0 !important;
  --paper-alt: #EAEBE2 !important;
  --line: #D3D6C9 !important;
  --ink: #16211D !important;
  --ink-soft: #54655C !important;
  --ink-faint: #5A655B !important;
}
/* The lock above only redefines the custom properties — it never made
   anything actually PAINT with them. .issue-panel/.prose have no
   background of their own anywhere else in this file (they simply sit
   on top of body's background, which is white in light mode, so this
   was invisible until now). In light mode that's still true here: this
   rule paints the exact same white the page already was, so nothing
   changes. In dark mode, body's background is the dark theme color, so
   without this the "locked to light" text (navy headings, dark ink
   body copy) was rendering on top of the dark body behind it instead
   of the white this rule promises — reported as the legacy-Page
   equivalent of the earlier Article dark-mode bug (unreadable text),
   this time because the panel was invisible/transparent rather than
   because the wrong stylesheet won the cascade. Scoped to dark mode
   only (both toggle and OS-preference paths) so light-mode legacy
   Pages render pixel-identical to before.

   The `color` here is a second, related bug found right after this
   one shipped: old pasted-content boxes (e.g. the ".promo1" "Cite
   this article" box some articles have — pale-gray inline
   background-color:#f7f7f7 baked straight into the post's saved HTML,
   from whatever the content was originally authored in) don't sit in
   a <p>/<li>/<strong>/heading the more specific rules below already
   catch, so their text was still inheriting the real dark-mode ink
   (a light, near-white color) — nearly invisible on a near-white
   inline background, i.e. the box read as a blank whiter patch. Since
   this box has no color of its own (only background-color), setting
   the container's own inherited color here reaches it the same way
   body's color normally reaches everything — while any legacy element
   that DOES set its own explicit/inline color (an old author's inline
   style, a link) still keeps that, since an element's own color always
   wins over one it merely inherits. */
[data-theme="dark"] .page.ijpr-legacy-content .issue-panel{
  background: var(--paper);
  color: var(--ink) !important;
  padding: 32px clamp(20px, 4vw, 40px);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .page.ijpr-legacy-content .issue-panel{
    background: var(--paper);
    color: var(--ink) !important;
    padding: 32px clamp(20px, 4vw, 40px);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
  }
}
/* --teal-dark, --teal-darker, --teal, --teal-dark, and --rust 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 ijpr.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 .ijpr-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.ijpr-legacy-content .issue-panel h2,
[data-theme="dark"] .page.ijpr-legacy-content .issue-panel h3{ color: var(--teal-dark) !important; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .page.ijpr-legacy-content .issue-panel h2,
  :root:not([data-theme="light"]) .page.ijpr-legacy-content .issue-panel h3{ color: var(--teal-dark) !important; }
}

/* Legacy-content reading-rail + sidebar fix — same .ijpr-legacy-content
   scoping as the button safety net above (functions.php only adds the
   class for content published before IJPR_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. */
.ijpr-legacy-content .progress-rail{
  display: none !important;
}
@media (min-width: 1080px){
  .ijpr-legacy-content .layout-article{
    grid-template-columns: minmax(0,1fr) 300px !important;
  }
  .ijpr-legacy-content .metrics-side{
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    top: auto !important;
  }
}

/* Legacy-content mobile horizontal-overflow fix — same
   .ijpr-legacy-content scoping as everything above (functions.php
   only adds the class for content published before
   IJPR_LEGACY_CONTENT_CUTOFF), so none of this can ever reach new
   Articles/Pages or native Posts.

   These pages were authored by pasting content straight from Word
   into a WordPress Page, and Word regularly hard-codes pixel widths
   on tables (a fixed table width, or individual <td width="..."> cells
   adding up to something wide) and sometimes on images too, often via
   an inline style="width:...", which beats an ordinary CSS rule no
   matter how specific it is — that's very likely what's pushing these
   pages wider than a phone screen and forcing the whole page to
   scroll sideways.

   Fix, in two layers:
   1. Let an individual wide table/image/embed scroll WITHIN its own
      box (or shrink to fit) instead of pushing the whole page wider.
   2. A safety net on the page itself, mobile-only, that clips
      anything still left over that wasn't specifically handled above
      (an old page-builder's fixed-width leftover <div>, for
      instance) — so even something unidentified can't force the
      whole viewport to scroll sideways. This never hides content,
      it only stops the PAGE from stretching past the screen; nothing
      inside these boxes is display:none'd. */
.ijpr-legacy-content .prose table{
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ijpr-legacy-content .prose img{
  max-width: 100% !important;
  height: auto !important;
}
.ijpr-legacy-content .prose iframe,
.ijpr-legacy-content .prose embed,
.ijpr-legacy-content .prose object{
  max-width: 100% !important;
}
.ijpr-legacy-content .prose pre{
  overflow-x: auto;
  max-width: 100%;
}
@media (max-width: 600px){
  .page.ijpr-legacy-content{
    overflow-x: hidden;
  }
}

.index-strip{
  display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center;
  font-family: var(--mono); font-size:13px; color: var(--ink-soft);
  background: var(--paper-alt); border:1px solid var(--line); border-radius: var(--radius);
  padding: 16px 20px; margin-bottom:24px;
}
.index-strip a{ color: var(--teal); 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(--serif); font-size:16px; background: var(--paper-alt);
}

/* Right: metrics / info sidebar
   Default is plain, normal document flow — it scrolls up the page
   along with everything else, so on Posts/Pages/Search every widget is
   reached by the same ordinary page scroll a visitor is already using.

   Articles are the one place this "floats" instead (see
   .single-article .metrics-side below): position:sticky, so the
   sidebar follows the viewport as you scroll a (usually much longer)
   article body, rather than scrolling away above the fold within the
   first screenful. It's bounded to a max-height so it can never grow
   taller than the visible space — if it's short, it just floats
   as-is; if it's genuinely taller than the screen (a lot of widgets at
   once), it gets its own internal scrollbar so nothing on it is ever
   cut off or unreachable, only reached with a second, deliberate
   scroll gesture over the sidebar itself instead of the page's. */
.metrics-side{ display:flex; flex-direction:column; gap:20px; min-width:0; }
.metrics-side.is-static{ position: static; max-height: none; overflow: visible; }
@media (min-width: 1080px){
  .single-article .metrics-side{
    position: sticky; top: calc(var(--header-h) + 24px);
    max-height: calc(100vh - var(--header-h) - 48px);
    overflow-y: auto; overflow-x: hidden; padding-right: 4px;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  }
  .single-article .metrics-side::-webkit-scrollbar{ width: 5px; }
  .single-article .metrics-side::-webkit-scrollbar-thumb{ background-color: var(--line); border-radius: 4px; }
  .single-article .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(--paper-alt); color: var(--ink); font-family: var(--sans); height:42px; box-sizing:border-box;
}
.search-form button{
  background: var(--teal-dark); 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(--teal); }

/* 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(--sans) !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(--paper-alt) !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(--paper-alt) !important;
  height: auto !important;
}
button.gsc-search-button, input.gsc-search-button, .gsc-search-button-v2{
  background-color: var(--teal-dark) !important;
  border-color: var(--teal-dark) !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(--teal) !important;
  border-color: var(--teal) !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(--mono); font-size:12px; font-weight:600; background: var(--paper-alt); 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(--teal); 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(--teal-dark); 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(--teal); 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(--teal); background: rgba(0,105,92,.08); }
.link-list .icon{ color: var(--rust); 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(--teal-dark);
  font-size:13.5px; font-weight:600; padding:9px 12px; border-radius:8px; background: var(--paper-alt);
  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(--teal) !important; color:#FFFFFF !important; border-color: var(--teal) !important;
  transform: translateX(4px); box-shadow: 0 4px 12px rgba(0, 105, 92, 0.25);
}
.quick-links-list a .icon{ color: var(--rust); 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; }

/* IMAGES IN THIS POST SIDEBAR WIDGET */
.image-thumb-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;
  /* 3+ images: compact square grid, capped height, scrolls for the
     rest — every image stays reachable, same convention as
     .recent-list above it, nothing is ever silently dropped. */
  max-height:320px; overflow-y:auto; overflow-x:hidden; padding-right:4px;
  scrollbar-width:thin; scrollbar-color: var(--line) transparent;
}
.image-thumb-grid::-webkit-scrollbar{ width:5px; }
.image-thumb-grid::-webkit-scrollbar-thumb{ background-color:var(--line); border-radius:4px; }
.image-thumb-grid li{ margin:0; }
.img-thumb-trigger{
  display:block; width:100%; position:relative; border-radius:8px; overflow:hidden;
  border:1px solid var(--line); background: var(--paper-alt); padding:0; margin:0; cursor: zoom-in;
  outline-offset:2px; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  font: inherit;
}
.img-thumb-trigger:hover, .img-thumb-trigger:focus-visible{
  border-color: var(--teal); box-shadow: var(--shadow-sm); transform: translateY(-2px);
}
.image-thumb-grid img{
  display:block; width:100%; height:100%; aspect-ratio: 1 / 1; object-fit:cover;
}

/* 1 image: a single full-width thumbnail, wide like a small featured
   image rather than a lone square with empty space beside it. */
.image-thumb-grid.is-single{
  grid-template-columns: 1fr; max-height:none; overflow:visible; padding-right:0;
}
.image-thumb-grid.is-single img{ aspect-ratio: 16 / 9; }

/* 2 images: side by side, each stretched to share the full width. */
.image-thumb-grid.is-pair{
  grid-template-columns: repeat(2, 1fr); max-height:none; overflow:visible; padding-right:0;
}
.image-thumb-grid.is-pair img{ aspect-ratio: 4 / 3; }

/* IMAGE WIDGET POPUP — full-size in-page preview opened by clicking a
   thumbnail in "Images in This Post"/"Images in this Article". Same
   fixed-overlay pattern as the existing issue-cover lightbox, kept as
   its own set of classes so the two never interfere with each other. */
.img-popup{
  position: fixed; inset: 0; z-index: 260;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
  padding: 24px;
}
.img-popup.is-open{ opacity: 1; pointer-events: auto; }
.img-popup-backdrop{
  position: fixed; inset: 0; background: rgba(7, 23, 40, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.img-popup-content{
  position: relative; z-index: 1; max-width: min(90vw, 900px); max-height: 90vh;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.img-popup-content img{
  max-width: 100%; max-height: 76vh; 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; background: var(--paper);
}
.img-popup-caption{
  margin:0; max-width: 70ch; text-align:center; color:#EAF1F7; font-size:14px; line-height:1.5;
}
.img-popup-close{
  position: absolute; top: -18px; right: -18px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--paper); color: var(--teal-dark); border: 1px solid var(--line);
  cursor: pointer; font-size: 24px; font-weight: 700; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.img-popup-close:hover{ background: var(--teal); color:#fff; border-color: var(--teal); }
@media (max-width:600px){
  .img-popup-close{ top:-14px; right:-6px; }
}

/* 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(--teal);
}
[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(--teal);
}

.news-ticker{
  height: 96px; overflow:hidden; position:relative; border-radius:8px; background: var(--paper-alt); 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(--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(--teal); font-weight: 600; }

/* ============================================================
   ARCHIVE (Past Issues)
   ============================================================ */
.last-updated{ font-size:13px; color: var(--ink-faint); margin: 6px 0 20px; font-family: var(--mono); font-weight: 500; }
.archive-section{ padding: 48px 0; background: var(--paper-alt); 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(--teal-dark); 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(--teal); 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(--rust); 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(--teal); }
.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(--sans); 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(--paper-alt); }
.volume-title-group{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.volume-title{ font-size:17.5px; font-weight:800; color: var(--teal-dark); 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(--teal);
  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(--teal); }

.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(--paper-alt); border:1px solid var(--line); color: var(--teal-dark); 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(--teal); color:#FFFFFF !important; border-color: var(--teal);
  transform: translateY(-2px); box-shadow: var(--shadow-sm);
}
.issue-chip.disabled{
  opacity:0.75; cursor:not-allowed; background: var(--paper-alt); 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(--paper-alt);
  border:1px solid var(--line); border-radius: var(--radius);
}
.archive-toolbar-title{ font-size:14px; font-weight:700; color: var(--teal-dark); 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(--teal-dark); 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(--teal); color:#FFFFFF !important; border-color: var(--teal); }

.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(--paper-alt); transition: all .15s ease;
}
[data-theme="dark"] .archive-card{ background:#182430; }
.archive-card:hover{ border-color: var(--teal); transform: translateY(-1px); }
.archive-vol{ font-family: var(--serif); font-weight:700; color: var(--teal-dark); 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(--teal-dark), #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(--paper-alt); 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(--teal) !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(--teal); border-color: var(--teal); 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(--teal-dark); 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(--teal-dark); 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(--sans);
}
.mobile-actionbar .icon{ font-size:20px; }
.mobile-actionbar .is-primary{ color:#fff; }
.mobile-actionbar .is-primary .icon{ color: var(--teal); }

@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(--teal-dark); 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(--teal); }
.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; } }

/* ============================================================
   FLOATING "CONTENTS" BUTTON
   ============================================================
   Appears only while the visitor is inside the article/page body
   (the .prose region) — hidden over the header/hero, hidden again
   once scrolled past the body into "Share This Page"/footer/related
   content. Mirrors Back to Top's fixed position, on the opposite
   side, so the two never collide. Fills a real gap below 1080px: the
   dotted heading rail only exists at wider widths, and the mobile
   "Sections" button opens the site's main menu, not the page's own
   headings — this is the one heading-jump shortcut available at every
   width. */
.toc-fab-wrap{ position: fixed; left:22px; bottom:26px; z-index:129; }
@media (max-width: 1079px){ .toc-fab-wrap{ bottom: 78px; } }
@media print{ .toc-fab-wrap{ display:none !important; } }

.toc-fab{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--teal-dark); color:#fff; border:1px solid rgba(255,255,255,.15); border-radius:999px;
  padding:12px 18px 12px 14px; font-size:13px; font-weight:700; font-family: var(--sans); cursor:pointer;
  box-shadow: var(--shadow-lg);
  opacity:0; visibility:hidden; transform: translateY(10px); pointer-events:none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s, background .15s ease;
}
.toc-fab.is-visible{ opacity:1; visibility:visible; transform: translateY(0); pointer-events:auto; }
.toc-fab:hover{ background: var(--teal); }
.toc-fab .icon{ width:16px; height:16px; }

.toc-fab-panel{
  position:absolute; left:0; bottom:calc(100% + 10px); width:240px; max-height:min(60vh, 360px); overflow-y:auto;
  background: var(--paper); border:1px solid var(--line); border-radius:10px; box-shadow: var(--shadow-lg);
  padding:10px; scrollbar-width:thin; scrollbar-color: var(--line) transparent;
}
.toc-fab-panel[hidden]{ display:none; }
.toc-fab-panel::-webkit-scrollbar{ width:5px; }
.toc-fab-panel::-webkit-scrollbar-thumb{ background-color: var(--line); border-radius:4px; }
.toc-fab-panel .tp-title{
  font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color: var(--ink-faint);
  padding:2px 8px 8px; margin:0;
}
.toc-fab-panel a{ display:block; padding:8px 8px; border-radius:6px; text-decoration:none; color: var(--ink-soft); font-size:13.5px; font-weight:500; }
.toc-fab-panel a:hover{ background: rgba(0,105,92,.08); color: var(--teal); }

/* 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(--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(--teal); }
.section-nav > li > a[aria-current="page"]{ color: var(--teal); 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(--teal); }
.section-nav ul a[aria-current="page"]{ color: var(--teal); 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(--serif); font-size:15.5px; line-height:1.7; color: var(--ink); margin:0 0 1.1em; }
.prose ul, .prose ol{ font-family: var(--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(--teal-dark); }
[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.ijpr-legacy-content .prose strong{ color: var(--teal-dark) !important; }
[data-theme="dark"] .page.ijpr-legacy-content .prose p,
[data-theme="dark"] .page.ijpr-legacy-content .prose li{ color: var(--ink) !important; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .page.ijpr-legacy-content .prose strong{ color: var(--teal-dark) !important; }
  :root:not([data-theme="light"]) .page.ijpr-legacy-content .prose p,
  :root:not([data-theme="light"]) .page.ijpr-legacy-content .prose li{ color: var(--ink) !important; }
}
/* Old pasted-content boxes (e.g. ".promo1", the "Cite this article" box
   some legacy Pages have) carry their own hardcoded inline
   background-color — pale gray, baked into the post's saved HTML from
   whatever the content was originally authored in — but no inline
   color, and their text is a bare node, not wrapped in a <p>/<li>/
   <strong> the rules above already catch. So it was still inheriting
   the real dark-mode ink (light, near-white) straight from .prose,
   landing on top of its own near-white background — unreadable.

   First attempt locked --ink (and color) on the whole .prose
   container, which did fix this box but broke every ordinary
   paragraph/list item in the same content: THEY have no background of
   their own, they sit directly on the page's real dark-mode
   background, so they need their ink to keep flipping light with the
   theme — locking .prose dark-ink-always made all of them render dark
   text on the dark page too (reported live: "cite this article coming
   good but rest in dark"). The fix has to single out only elements
   that, like .promo1, carry their own inline background and therefore
   never themselves go dark — same [style*="background"] attribute-
   selector technique already used above for the old button safety
   net — instead of touching .prose as a whole. Anything with its own
   explicit color (the box's blue "Cite this article:" label, a link)
   still keeps that, since an element's own color always wins over one
   it only inherits from this rule. */
[data-theme="dark"] .page.ijpr-legacy-content .prose [style*="background-color"],
[data-theme="dark"] .page.ijpr-legacy-content .prose [style*="background:"]{ color: #16211D !important; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .page.ijpr-legacy-content .prose [style*="background-color"],
  :root:not([data-theme="light"]) .page.ijpr-legacy-content .prose [style*="background:"]{ color: #16211D !important; }
}
.prose blockquote{
  margin: 1.4em 0; padding: 14px 18px; border-left:3px solid var(--teal); background: var(--paper-alt);
  border-radius: 0 8px 8px 0; font-family: var(--serif); font-style:italic; color: var(--ink-soft); font-size:14.5px;
}
.prose .callout{
  border:1px solid var(--line); background: var(--paper-alt); border-radius: var(--radius); padding:16px 18px; margin:1.4em 0;
}
.prose .callout p:last-child{ margin-bottom:0; }
.fill-in{ color: var(--rust); background: rgba(176,141,62,.12); border-radius:4px; padding:0 4px; font-family: var(--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(--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(--mono); }
.widget select{ width:100%; font-family: var(--sans); font-size:13.5px; color: var(--ink); border:1px solid var(--line); border-radius:7px; padding:9px 10px; background: var(--paper-alt); }

/* 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(--teal), var(--teal-dark)); color:#fff; font-family: var(--serif);
  font-weight:700; font-size:16px;
}
.person-info{ min-width:0; }
.person-name{ font-size:14.5px; font-weight:700; color: var(--teal-dark); margin:0 0 2px; }
[data-theme="dark"] .person-name{ color:#EAF1F7; }
.person-role{ font-size:12px; color: var(--teal); font-weight:600; margin:0 0 4px; }
.person-affil{ font-family: var(--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(--teal); }

/* ============================================================
   SHARE WIDGET COMPONENT
   ============================================================ */
.share-widget{
  background: var(--paper-alt); 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(--teal-dark); margin: 0;
}
[data-theme="dark"] .share-widget-label{ color: #EAF1F7; }
.share-widget-label .icon{ color: var(--rust); 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(--sans);
}
.share-btn:hover{ border-color: var(--teal); color: var(--teal); 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(--teal-dark); 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 (--teal-dark, --teal, --paper-alt, --line,
   --rust, fonts) rather than introducing new ones.
   ============================================================ */
  .eyebrow-doctype{
    display:inline-block; font-family:var(--mono); font-size:11.5px; font-weight:600;
    letter-spacing:.06em; text-transform:uppercase; color: var(--teal);
    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(--teal-dark); font-weight:700; }
  [data-theme="dark"] .article-authors b{ color:#EAF1F7; }
  .article-authors sup{ color: var(--rust); font-weight:700; }
  /* Per-author ORCID link (optional — only wraps the name when that
     author's ORCID field is filled in). Dotted underline so it reads
     as a link without competing with the bold author-name styling. */
  .article-authors a.author-orcid-link{
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    color: inherit;
  }
  .article-authors a.author-orcid-link:hover,
  .article-authors a.author-orcid-link:focus-visible{
    color: var(--teal);
    text-decoration-style: solid;
  }
  .article-affil{ font-size:13px; color: var(--ink-faint); margin:0 0 2px; }
  .article-affil sup{ color: var(--rust); 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(--mono); font-size:12px; color: var(--ink-soft);
    background: var(--paper-alt); border:1px solid var(--line); border-radius:8px; padding:7px 12px;
  }
  .factstrip .fact b{ color: var(--teal-dark); font-weight:700; }
  [data-theme="dark"] .factstrip .fact b{ color:#EAF1F7; }

  .abstract-box{
    background: var(--paper-alt); border:1px solid var(--line); border-left:4px solid var(--teal);
    border-radius: 0 var(--radius) var(--radius) 0; padding:22px 24px; margin-bottom:26px;
  }
  .abstract-box h2{
    font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em;
    color: var(--teal); margin:0 0 14px; border:0; padding:0;
  }
  .abstract-box h3{ font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color: var(--rust); margin:14px 0 4px; font-weight:700; }
  .abstract-box h3:first-of-type{ margin-top:0; }
  .abstract-box p{ font-family:var(--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);
    /* Reference entries routinely end in a long, space-free DOI URL
       (https://doi.org/10.xxxx/…) with nothing else on the page to
       break it. Without this, that one unbroken "word" doesn't wrap —
       it forces the <li> (and, since nothing upstream clips it, the
       whole page) wider than the screen, which on a phone shows up as
       the page itself drifting/scrolling sideways instead of staying
       put. overflow-wrap:anywhere only breaks a word when it actually
       has to, so normal reference text still wraps at spaces exactly
       as before — only the long URLs are affected. */
    overflow-wrap: anywhere;
  }
  .refs-list li::before{
    content:"[" counter(refnum) "]"; position:absolute; left:0; top:8px;
    font-family:var(--mono); color: var(--rust); 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(--mono); font-size:17px; font-weight:700; color: var(--teal-dark); }
  [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(--teal); }

  /* 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(--teal); border-color:var(--teal); }
  .progress-dot .progress-label{
    position:absolute; left:20px; top:50%; transform:translateY(-50%);
    white-space:nowrap; font-family:var(--mono); font-size:11px; font-weight:600;
    color:var(--ink-soft); background:var(--paper-alt); 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; } }

  /* This !important override used to cancel out .metrics-side's old
     sticky+max-height combo everywhere, including on Articles, which
     is exactly what made that combo unreachable/"stuck" before (sticky
     position preserved, but its own internal scrollbar silently killed
     by this rule, leaving no way to reach the rest of it). The base
     .metrics-side rule no longer sets max-height/overflow at all
     outside Articles, so there's nothing left for this to cancel there
     — but it's still scoped away from .single-article specifically so
     it can never again fight the intentional floating+scroll sidebar
     set up for Articles above. */
  body:not(.single-article) #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(--teal-dark) !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(--teal) !important;
    color:var(--teal) !important;
  }
  .dl-list .btn.is-selected{
    background:var(--teal) !important;
    border-color:var(--teal) !important;
    color:#FFFFFF !important;
  }

  /* ISSN — right side of the breadcrumb bar (same row as Home/IJPR/Vol/…) */
  .breadcrumb-bar .container{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:8px;
  }
  .breadcrumb-issn{
    font-family:var(--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(--teal); text-decoration:underline; }

  /* ---------- Cite This Article modal ---------- */
  .cite-inline-link{
    background:none; border:none; padding:0; cursor:pointer;
    font-family:var(--mono); font-size:12px; font-weight:600;
    color:var(--teal); 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(--serif); font-size:19px; margin:0; color:var(--teal-dark);
  }
  [data-theme="dark"] .cite-modal-head h3{ color:#EAF1F7; }
  .cite-modal-close{
    background:var(--paper-alt); border:1px solid var(--line); border-radius:8px;
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--teal-dark);
  }
  .cite-tabs{ display:flex; gap:6px; padding:16px 22px 0; flex-wrap:wrap; }
  .cite-tab{
    font-family:var(--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(--teal-dark); border-color:var(--teal-dark); color:#fff; }
  .cite-body{ padding:18px 22px 22px; }
  .cite-output{
    background:var(--paper-alt); border:1px solid var(--line); border-radius:8px;
    padding:16px; font-family:var(--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(--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(--mono); font-size:11px; color:var(--teal); margin:8px 0 0;
    opacity:0; transition:opacity .2s ease;
  }
  .cite-copy-note.is-visible{ opacity:1; }

  /* ---------- Figures & data tables inside the article body ---------- */
  /* Scoped to .ijpr-article-prose — a class added ONLY on single-
     article.php's content wrapper — rather than the shared .prose
     class, which page.php and single.php also use. That keeps this
     styling from ever touching native Posts or legacy Pages, per the
     standing "no changes to posts/legacy pages" rule. Both the core
     Image block and the core Table block wrap themselves in
     <figure class="wp-block-image">/<figure class="wp-block-table">,
     with an optional <figcaption> for the legend — no custom blocks
     needed, authors just use the normal Image/Table blocks and add a
     caption the same way they would anywhere else in WordPress. */
  .ijpr-article-prose figure.wp-block-image{ margin:28px 0; text-align:center; }
  .ijpr-article-prose figure.wp-block-image img{
    max-width:100%; height:auto; border-radius:8px; border:1px solid var(--line);
    cursor:zoom-in; transition:box-shadow .15s ease;
  }
  .ijpr-article-prose figure.wp-block-image:hover img{ box-shadow:0 6px 20px rgba(10,20,20,.14); }
  .ijpr-article-prose figure.wp-block-image figcaption,
  .ijpr-article-prose figure.wp-block-table figcaption{
    margin-top:8px; font-size:13px; color:var(--ink-soft); font-style:italic; text-align:center;
  }
  .ijpr-article-prose figure.wp-block-table{ margin:28px 0; overflow-x:auto; cursor:zoom-in; }
  .ijpr-article-prose figure.wp-block-table table{ width:100%; border-collapse:collapse; font-size:14px; }
  .ijpr-article-prose figure.wp-block-table th,
  .ijpr-article-prose figure.wp-block-table td{
    border:1px solid var(--line); padding:8px 10px; text-align:left;
  }
  .ijpr-article-prose figure.wp-block-table thead th{ background:var(--paper-alt); color:var(--teal-dark); font-weight:700; }
  [data-theme="dark"] .ijpr-article-prose figure.wp-block-table thead th{ color:#EAF1F7; }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .ijpr-article-prose figure.wp-block-table thead th{ color:#EAF1F7; }
  }

  /* ---------- Media zoom modal — click any figure image or data table
     above to open an enlarged view. Same backdrop/modal pattern as the
     "Cite This Article" modal just above, for visual consistency. Built
     once in single-article.php and reused for every image/table via the
     script near the closing body tag. ---------- */
  .media-zoom-backdrop{
    position:fixed; inset:0; background:rgba(10,20,20,.72);
    display:none; align-items:center; justify-content:center;
    padding:24px; z-index:320;
  }
  .media-zoom-backdrop.is-open{ display:flex; }
  .media-zoom-modal{
    position:relative; width:100%; max-width:1000px; max-height:90vh;
    overflow:auto; background:var(--paper); border:1px solid var(--line);
    border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:22px;
  }
  .media-zoom-close{
    position:absolute; top:12px; right:12px; z-index:2;
    background:var(--paper-alt); border:1px solid var(--line); border-radius:8px;
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--teal-dark);
  }
  .media-zoom-body{ display:flex; justify-content:center; }
  .media-zoom-body img{ max-width:100%; height:auto; border-radius:8px; }
  .media-zoom-body table{ width:100%; border-collapse:collapse; font-size:14.5px; }
  .media-zoom-body th, .media-zoom-body td{ border:1px solid var(--line); padding:9px 12px; text-align:left; }
  .media-zoom-body thead th{ background:var(--paper-alt); color:var(--teal-dark); font-weight:700; }
  .media-zoom-caption{
    margin:14px 4px 0; font-size:13.5px; color:var(--ink-soft); font-style:italic; text-align:center;
  }

  /* ---------- Collapsible figures/tables — phones only ---------- */
  /* Built with a real <details>/<summary> (added by the script near the
     closing body tag, phone-width screens only — see MOBILE_BREAKPOINT
     there). The HTML for every figure/table is always fully present and
     expanded in the page source regardless of screen size or whether JS
     runs at all — this block only restyles what's ALREADY wrapped in
     <details> by that script, it never hides anything on its own. That
     keeps every figure/table visible to search engines, screen readers,
     and desktop/tablet readers exactly as before; only phones get the
     tap-to-reveal treatment, and only once JS has actually wrapped it. */
  @media (max-width: 600px){
    .ijpr-media-details{
      border:1px solid var(--line); border-radius:var(--radius);
      background:var(--paper-alt); margin:22px 0; overflow:hidden;
    }
    .ijpr-media-summary{
      display:flex; align-items:center; gap:8px; padding:13px 14px;
      cursor:pointer; font-family:var(--sans); font-size:13px; font-weight:600;
      color:var(--teal-dark); list-style:none; user-select:none;
    }
    [data-theme="dark"] .ijpr-media-summary{ color:#EAF1F7; }
    .ijpr-media-summary::-webkit-details-marker{ display:none; }
    .ijpr-media-summary .icon{ flex:none; width:16px; height:16px; transition: transform .15s ease; }
    .ijpr-media-details[open] .ijpr-media-summary .icon{ transform: rotate(90deg); }
    .ijpr-media-details > figure{
      margin:0; padding:14px; border-top:1px solid var(--line); background:var(--paper);
    }
  }

/* ============================================================
   REAL SITE CHROME — ported from the main static site's
   ijpr_css_2026/ijpr-core.css + ijpr-responsive.css, plus the
   page-specific <style> blocks its pages carry (ijpr.html,
   about-ijpr.html, ijpr_search.html, issue pages). Same class names,
   same rules, so WordPress Pages/Articles wrapped in this markup look
   the same as the main site. Everything below is NEW — it does not
   replace any of the ACF-article/metrics-side/abstract-box rules
   above, which keep working exactly as before for the parts of an
   Article page (figures, references, download buttons, TOC rail)
   that have no equivalent on the main static site to copy from.
   ============================================================ */
/* NOTE: the main site's ijpr-core.css sets html{scroll-behavior:smooth}
   here — deliberately left OUT of this copy, because this theme's own
   JS already found that rule makes every scroll (including plain
   mouse-wheel scrolling) animated, which felt sluggish; it instead
   applies a smooth, eased scroll only to genuine in-page anchor jumps
   (see the "SMOOTH IN-PAGE ANCHOR JUMPS" section of ijpr.js). Do not
   add scroll-behavior:smooth back here for the same reason. */
*{margin:0;padding:0;box-sizing:border-box}
.wrap{max-width:1220px;margin:0 auto;padding:0 32px}
/* Alias: this theme's own templates still use .container as their
   general width-constrainer in places this migration hasn't
   individually renamed yet — same rule as .wrap, so both work. */
.container{max-width:1220px;margin:0 auto;padding:0 32px}
img,svg{max-width:100%}

/* ---- utility bar ---- */
.utility-bar{background:var(--ink);color:var(--paper)}
.utility-bar .wrap{display:flex;align-items:center;justify-content:space-between;height:38px;font-family:var(--mono);font-size:12px;letter-spacing:0.03em;flex-wrap:wrap;gap:8px}
.utility-bar .u-left{display:flex;gap:18px;color:var(--paper);opacity:0.85}
.utility-bar .u-left a:hover{color:var(--paper)}
.utility-bar .u-right{display:flex;gap:14px;align-items:center}
.utility-bar .u-right a{color:var(--paper);opacity:0.85}
.utility-bar .u-right a:hover{opacity:1}
.utility-bar .icons{display:flex;gap:12px}
.utility-bar .icons svg{width:13px;height:13px}
.utility-bar .icons a,.foot-icons a{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px}
.utility-bar .u-left a{display:inline-flex;align-items:center;min-height:28px}

/* ---- masthead ---- */
/* Centered/stacked, not a 3-column grid — a grid with an "auto" middle
   track sizes that track to its content's UNWRAPPED width, which at
   some in-between viewport widths (just above the 1200px breakpoint
   below) left almost no room for the two flanking 1fr columns and
   forced the ISSN text to wrap one word per line. This layout can't
   hit that failure mode at any width, since everything just centers
   and the ISSN line always gets a full line to itself. */
.masthead{border-bottom:1px solid var(--line-strong);background:var(--paper)}
.masthead .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:26px;padding-bottom:22px;gap:8px}
.masthead .issn-line{font-family:var(--mono);font-size:12px;color:var(--ink-soft);letter-spacing:0.03em}
.masthead .brand{text-align:center}
.masthead .brand .mark{font-family:var(--serif);font-weight:700;font-size:34px;letter-spacing:0.005em;line-height:1.1;color:var(--ink)}
.masthead .brand .mark span{color:var(--teal);font-style:italic;font-weight:500}
.masthead .brand .tag{margin-top:7px;font-family:var(--mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft)}
.trust-row{display:flex;gap:9px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.trust-pill{font-family:var(--mono);font-size:12px;letter-spacing:0.04em;border:1px solid var(--line-strong);color:var(--ink-soft);padding:3px 9px;border-radius:20px;background:var(--paper-alt)}
.trust-pill.oa{background:var(--teal-pale);border-color:var(--teal);color:var(--teal-dark);font-weight:600}
a.trust-pill:hover{border-color:var(--teal);color:var(--teal-dark)}
@media (max-width:560px){.masthead .brand .mark{font-size:22px}}

/* ---- primary nav ---- */
nav.primary{background:var(--paper);border-bottom:1px solid var(--line-strong);position:sticky;top:0;z-index:50;backdrop-filter:blur(6px)}
nav.primary .wrap{display:flex;align-items:center;justify-content:center;gap:34px;height:50px;flex-wrap:wrap}
nav.primary a{font-size:13px;font-weight:500;letter-spacing:0.02em;color:var(--ink-soft);position:relative;padding:4px 0}
nav.primary a.current{color:var(--ink)}
nav.primary a:hover{color:var(--ink)}
.nav-item{position:relative;display:flex;align-items:center}
.nav-item > a::after{content:'\25BE';font-size:9px;margin-left:5px;color:var(--ink-faint);position:relative;top:-1px}
.dropdown{position:absolute;top:100%;left:0;background:var(--paper);border:1px solid var(--line-strong);border-top:2px solid var(--teal);border-radius:0 0 8px 8px;min-width:250px;padding:6px 0;box-shadow:0 16px 32px rgba(0,0,0,0.14);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:60}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown,.nav-item.open .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:10px 18px;font-size:12.5px;font-weight:400;color:var(--ink-soft);white-space:normal;line-height:1.4;border-left:2px solid transparent;transition:background .15s ease,color .15s ease,border-color .15s ease}
.dropdown a:hover{background:var(--paper-alt);color:var(--teal-dark);border-left-color:var(--teal)}
.nav-toggle{display:none}
@media (max-width:720px){
  nav.primary .nav-toggle{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 16px;background:none;border:0;border-radius:0;font:inherit;font-size:14px;font-weight:600;letter-spacing:0.02em;color:var(--ink);cursor:pointer;text-align:left}
  nav.primary .nav-toggle:hover{background:var(--paper-alt);color:var(--ink)}
  .nav-toggle-bars{display:inline-block;width:18px;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
  nav.primary .wrap{display:none;height:auto;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:0;padding:0 0 10px;max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px);overflow-y:auto}
  nav.primary.open .wrap{display:flex}
  nav.primary .wrap > a,nav.primary .nav-item > a{display:flex;align-items:center;min-height:44px;padding:8px 16px;font-size:15px}
  nav.primary .nav-item{display:block}
  nav.primary .nav-item > a::after{display:none}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-left:2px solid var(--teal);border-radius:0;min-width:0;margin:0 0 6px 16px;padding:0;background:transparent}
  .dropdown a{display:flex;align-items:center;min-height:44px;padding:8px 16px;font-size:14px}
}
@media (max-width:560px){nav.primary .wrap{gap:16px}}
.breadcrumb a,footer address a,.widget-connect a,.widget-list a,.widget-note a,.widget-submit .em a,.policy-card a,.see-all,.see-toc,.issue-sub .doi-link,.index-card .cite a{display:inline-flex;align-items:center;min-height:24px}

/* ---- breadcrumb ---- */
.breadcrumb-bar{background:var(--paper-alt);border-bottom:1px solid var(--line)}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;height:42px;font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
.breadcrumb li{display:flex;align-items:center;gap:8px}
.breadcrumb li:not(:last-child)::after{content:'/';color:var(--line-strong)}
.breadcrumb a{color:var(--ink-soft)}
.breadcrumb a:hover{color:var(--teal-dark);text-decoration:underline}
.breadcrumb li[aria-current="page"]{color:var(--ink)}
@media (max-width:560px){.breadcrumb{height:auto;min-height:42px;padding-top:6px;padding-bottom:6px}}

/* ---- page hero / eyebrow / prose / layout (info & policy pages) ---- */
.page-hero{padding:44px 0 40px;border-bottom:1px solid var(--line-strong)}
.page-hero h1{font-family:var(--serif);font-weight:600;font-size:34px;letter-spacing:-0.01em;margin-bottom:12px;max-width:26ch}
.page-hero .lede{font-size:15px;color:var(--ink-soft);line-height:1.6;max-width:64ch}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--rust);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.eyebrow::before{content:'';width:16px;height:1px;background:var(--rust)}
.page-layout{display:grid;grid-template-columns:1fr 300px;gap:56px;padding:48px 0 64px;align-items:start}
.page-side{display:flex;flex-direction:column;gap:34px;min-width:0}
@media (min-width:981px){.page-side{position:sticky;top:74px;max-height:calc(100vh - 96px);overflow-y:auto;padding-right:2px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}.page-side::-webkit-scrollbar{width:5px}.page-side::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:4px}}
@media (max-width:980px){.page-layout{grid-template-columns:1fr;gap:44px}}
@media (max-width:560px){.page-hero h1{font-size:25px}}
.prose h2{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:-0.01em;margin:2em 0 0.6em;padding-bottom:0.5em;border-bottom:1px solid var(--line)}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--serif);font-weight:600;font-size:16.5px;margin:1.7em 0 0.5em}
.prose p{font-size:14.5px;line-height:1.75;color:var(--ink);margin-bottom:1.1em}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:600}
.prose a{color:var(--teal-dark);border-bottom:1px solid var(--teal-dark)}
.prose a:hover{color:var(--teal)}
.prose ul,.prose ol{margin:0 0 1.1em;padding-left:1.4em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{font-size:14.5px;line-height:1.7;color:var(--ink);margin-bottom:0.4em}
.prose li::marker{color:var(--ink-faint)}
.callout{background:var(--teal-pale);border-left:3px solid var(--teal);border-radius:2px;padding:16px 20px;margin:1.6em 0}
.callout p{font-size:13.5px;color:var(--teal-dark);margin:0;line-height:1.6}
.last-updated{font-family:var(--mono);font-size:12px;color:var(--ink-faint);margin-top:32px;padding-top:16px;border-top:1px solid var(--line)}

/* ---- widgets (sidebar boxes) ---- */
.widget{margin-bottom:34px}
.widget h3{font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--line-strong)}
.widget-search .search-row{display:flex;border:1px solid var(--line-strong);border-radius:2px;background:var(--paper-alt);overflow:hidden}
.widget-search input[type="search"]{flex:1;min-width:0;border:none;background:transparent;padding:10px 12px;font-family:var(--sans);font-size:12.5px;color:var(--ink);outline:none;-webkit-appearance:none;appearance:none}
.widget-search input[type="search"]::placeholder{color:var(--ink-faint)}
.widget-search input[type="search"]:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.widget-search button{flex-shrink:0;width:40px;border:none;background:var(--teal);color:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease}
.widget-search button:hover{background:var(--teal-dark)}
.widget-search button svg{width:15px;height:15px}
.idx-grid{display:flex;flex-wrap:wrap;gap:8px}
.idx-badge{font-family:var(--mono);font-size:12px;border:1px solid var(--line-strong);background:var(--paper-alt);color:var(--ink-soft);padding:6px 11px;border-radius:2px;display:inline-block}
a.idx-badge:hover{border-color:var(--teal);color:var(--teal-dark)}
.widget-submit{background:var(--teal-dark);color:var(--paper);padding:26px 22px}
.widget-submit h3{color:#E6EEE9;border-bottom-color:rgba(255,255,255,0.28)}
.widget-submit p{font-size:12.5px;color:#EEF3F0;line-height:1.6;margin-bottom:16px}
.widget-submit a.btn{width:100%;text-align:center}
.widget-submit .em{font-family:var(--mono);font-size:12px;color:#E6EEE9;margin-top:12px;display:block;word-break:break-all}
:root[data-theme="dark"] .widget-submit{background:var(--teal-pale);border:1px solid var(--line-strong)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .widget-submit{background:var(--teal-pale);border:1px solid var(--line-strong)}}
.widget-list ul{display:flex;flex-direction:column;gap:9px}
.widget-list li{font-size:12.5px;color:var(--ink-soft)}
.widget-list a{color:var(--teal-dark);font-weight:600}
.widget-list a:hover{color:var(--teal);text-decoration:underline}
.widget-note{font-size:12px;color:var(--ink-soft);line-height:1.6;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.widget-connect .row{display:flex;gap:14px;margin-bottom:10px}
.widget-connect a{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft)}
.widget-connect a:hover{color:var(--teal-dark)}
.widget-connect svg{width:14px;height:14px}
.recent-list{display:flex;flex-direction:column;gap:11px;max-height:280px;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.recent-list::-webkit-scrollbar{width:5px}
.recent-list::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:4px}
.recent-list li a{display:block;font-size:12.5px;line-height:1.45;color:var(--ink-soft)}
.recent-list li a:hover{color:var(--teal-dark)}
.past-issues-select{width:100%;font-family:var(--mono);font-size:12px;color:var(--ink);background:var(--paper-alt);border:1px solid var(--line-strong);border-radius:2px;padding:9px 10px;cursor:pointer}
.past-issues-select:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.oa-badge{display:flex;gap:12px;align-items:flex-start}
.oa-badge .oa-icon{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--teal-pale);color:var(--teal-dark);display:flex;align-items:center;justify-content:center}
.oa-badge .oa-icon svg{width:18px;height:18px}
.oa-badge p{font-size:12.5px;color:var(--ink-soft);line-height:1.6;margin:0}

/* ---- shared button ---- */
.btn{font-family:var(--sans);font-weight:600;font-size:13.5px;padding:12px 22px;background:var(--teal);color:var(--paper);border-radius:2px;display:inline-block;transition:background .2s ease;border:none;cursor:pointer}
.btn:hover{background:var(--teal-dark)}
@media (pointer:coarse){.pill-link,.share-btn,.dock-btn,.swatch,.widget a.btn,button.btn{min-height:44px;min-width:44px}.pill-link,.share-btn{padding-top:10px;padding-bottom:10px}}

/* ---- share widget ---- */
.share-widget{background:var(--paper-alt);border:1px solid var(--line-strong);border-radius:4px;padding:18px 20px;margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.share-widget-label,.share-label{font-family:var(--mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;gap:6px}
.share-buttons{display:flex;flex-wrap:wrap;gap:8px}
.share-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;letter-spacing:0.02em;padding:6px 11px;border-radius:2px;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink-soft);cursor:pointer}
.share-btn svg{width:13px;height:13px}
.share-btn:hover{border-color:var(--teal);color:var(--teal-dark)}
.share-btn.copied{border-color:var(--teal);color:var(--teal-dark);background:var(--teal-pale)}
@media (max-width:560px){.share-widget{flex-direction:column;align-items:flex-start}}

/* ---- issue hero / tabs / article rows (homepage + issue pages) ---- */
.issue-hero{padding:44px 0 0}
.issue-hero h1{font-family:var(--serif);font-weight:600;font-size:32px;letter-spacing:-0.01em;margin-bottom:6px}
.issue-hero .issue-sub{font-family:var(--mono);font-size:12px;color:var(--ink-soft);margin-bottom:26px}
.doi-link{color:inherit;border-bottom:1px dotted var(--ink-soft)}
.doi-link:hover{color:var(--teal-dark);border-bottom-color:var(--teal-dark)}
.tabs{display:flex;gap:0;border-bottom:2px solid var(--line-strong);margin-bottom:0}
.tab-btn{font-family:var(--mono);font-size:12px;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-faint);background:none;border:none;padding:12px 20px 12px 0;margin-right:24px;cursor:pointer;position:relative;top:2px}
.tab-btn.active{color:var(--teal-dark);border-bottom:2px solid var(--teal-dark)}
.tab-panel{display:none;padding:30px 0 50px}
.tab-panel.active{display:block}
.tab-empty{font-size:13.5px;color:var(--ink-soft);padding:20px 0;border-top:1px solid var(--line);margin-top:8px}
.layout{display:grid;grid-template-columns:2fr 1fr;gap:56px;padding:0 0 48px}
@media (max-width:980px){.layout{grid-template-columns:1fr}.art-row{grid-template-columns:1fr}.art-actions{flex-direction:row;align-items:center}}
.art-row{padding:22px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:20px;align-items:start}
.art-row:first-child{padding-top:0}
.art-row h3{font-family:var(--serif);font-weight:600;font-size:18px;line-height:1.35;margin-bottom:7px}
.art-row h3 a:hover{color:var(--teal-dark)}
.art-row h3 a{display:inline-block;min-height:24px}
.art-row .art-eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:0.05em;text-transform:uppercase;color:var(--rust);margin-bottom:8px}
.art-row .auth{font-size:13px;color:var(--ink-soft);margin-bottom:6px}
.art-row .cite{font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
.art-row .cite a{color:inherit;border-bottom:1px dotted currentColor}
.art-row .cite a:hover{color:var(--teal-dark);border-bottom-style:solid}
.art-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-end;white-space:nowrap}
.pill-link{font-family:var(--mono);font-size:12px;letter-spacing:0.03em;padding:6px 12px;border-radius:2px;display:inline-flex;align-items:center;gap:6px}
.pill-link.abstract{background:var(--paper-alt);border:1px solid var(--line-strong);color:var(--ink-soft)}
.pill-link.pdf{background:var(--teal);color:var(--paper)}
.pill-link.pdf:hover{background:var(--teal-dark)}
.pill-link.abstract:hover{border-color:var(--teal);color:var(--teal-dark)}
.see-toc,.see-all{display:block;margin-top:20px;font-family:var(--mono);font-size:12px;color:var(--teal-dark);border-bottom:1px solid var(--teal-dark);padding-bottom:2px;width:max-content}
.index-card{margin-bottom:22px}
.index-card h3{font-family:var(--serif);font-weight:600;font-size:18px;margin-bottom:6px}
.index-card .cite{font-family:var(--mono);font-size:12px;color:var(--ink-faint);margin-bottom:2px}
.issue-section-head{font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:-0.01em;margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid var(--line-strong)}

/* ---- home sections: past issues grid / we-are-with / editorial policy ---- */
.section{padding:52px 0;border-bottom:1px solid var(--line-strong)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:12px}
.section-head h2{font-family:var(--serif);font-weight:600;font-size:24px;letter-spacing:-0.01em}
.section-head .see-all{margin-top:0}
.issue-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.issue-cell{background:var(--paper);padding:30px 20px;text-align:center;transition:background .2s ease;display:block}
.issue-cell:hover{background:var(--paper-alt)}
.issue-cell .vol{font-family:var(--serif);font-weight:600;font-style:italic;font-size:22px;color:var(--teal-dark);margin-bottom:6px}
.issue-cell .period{font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
@media (max-width:980px){.issue-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.issue-grid{grid-template-columns:1fr 1fr}}
.we-are-with{padding:44px 0;border-bottom:1px solid var(--line-strong);text-align:center}
.we-are-with h2{font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:-0.01em;margin-bottom:24px}
.clients-row{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap}
.clients-row a{display:inline-flex;opacity:0.75;transition:opacity .2s ease}
.clients-row a:hover{opacity:1}
.clients-row img{height:46px;width:auto}
.policy{background:var(--paper-alt);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);padding:56px 0}
.policy-intro{max-width:70ch;margin-bottom:36px}
.policy-intro .eyebrow{color:var(--teal-dark)}
.policy-intro .eyebrow::before{background:var(--teal-dark)}
.policy-intro h2{font-family:var(--serif);font-weight:600;font-size:26px;margin-bottom:12px;letter-spacing:-0.01em}
.policy-intro p{font-size:14px;color:var(--ink-soft);line-height:1.65}
.policy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-strong);border:1px solid var(--line-strong)}
.policy-card{background:var(--paper);padding:22px 20px 20px}
.policy-card .pnum{font-family:var(--mono);font-size:12px;color:var(--teal-dark);letter-spacing:0.05em;margin-bottom:9px;display:block}
.policy-card h3{font-family:var(--serif);font-weight:600;font-size:15px;margin-bottom:8px}
.policy-card p{font-size:12px;color:var(--ink-soft);line-height:1.55;margin-bottom:10px}
.policy-card a{font-family:var(--mono);font-size:12px;color:var(--teal-dark);border-bottom:1px solid var(--teal-dark);padding-bottom:1px}
@media (max-width:980px){.policy-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.policy-grid{grid-template-columns:1fr}}
.license-strip{margin-top:24px;display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--ink-soft);flex-wrap:wrap}
.license-badge{font-family:var(--mono);font-size:12px;border:1px solid var(--line-strong);background:var(--paper);padding:5px 10px;border-radius:2px;color:var(--ink-soft)}

/* ---- footer ---- */
footer{padding-top:46px}
.footer-main .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:30px;padding-bottom:36px}
footer h3{font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px}
/* list-style/margin/padding reset needed explicitly — display:flex on
   a <ul> does NOT suppress the browser's default bullet + indent on
   its <li> children (a common assumption, but flex items still
   generate list-item marker boxes unless list-style is turned off),
   so without this every footer column ("Editorial Policy References",
   "Quick Links", etc.) showed bullets the real ijpr.html never had. */
footer .fcol ul{display:flex;flex-direction:column;gap:9px;list-style:none;margin:0;padding:0}
footer .fcol ul li{font-size:12px;color:var(--ink-soft);line-height:1.5}
footer .fcol ul a{font-size:12.5px;color:var(--teal-dark);font-weight:600}
footer .fcol ul a:hover{color:var(--teal);text-decoration:underline}
footer .fcol p{font-size:12px;color:var(--ink-soft);line-height:1.6}
footer .fcol address{font-style:normal;font-size:12.5px;color:var(--ink-soft);line-height:1.75}
/* No border-bottom here — the real site's own CSS does draw one on
   this exact rule (ijpr_css_2026/ijpr-responsive.css), but it reads as
   an underline either way, and that's specifically what should be
   gone from the Contact Info block (Phone/Email/Web). */
footer .fcol address a{color:var(--teal-dark)}
.foot-bottom{border-top:1px solid var(--line);padding:18px 0;font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
.foot-bottom .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.foot-bottom a{border-bottom:1px solid var(--ink-faint)}
.foot-icons{display:flex;align-items:center;gap:16px}
.foot-icons a{display:flex;align-items:center;color:var(--ink-faint);border-bottom:none}
.foot-icons a:hover{color:var(--teal-dark)}
.foot-icons svg{width:14px;height:14px}
.foot-icons .divider{color:var(--ink-faint)}
@media (max-width:980px){.footer-main .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:560px){footer .fcol{margin-bottom:20px}.footer-main .wrap{grid-template-columns:1fr}}

/* ---- control dock: palette / dark-mode / back-to-top, fixed bottom-right ---- */
.control-dock{position:fixed;right:20px;bottom:24px;display:flex;flex-direction:column;gap:10px;z-index:200}
.dock-btn{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--paper);border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,0.18);transition:transform .18s ease, background .2s ease}
.dock-btn:hover{transform:translateY(-2px)}
.dock-btn svg{width:19px;height:19px}
#toTopBtn{background:var(--teal);border-color:var(--teal-dark);opacity:0;pointer-events:none;transform:translateY(8px)}
#toTopBtn:hover{background:var(--teal-dark)}
#toTopBtn.show{opacity:1;pointer-events:auto;transform:translateY(0)}
#toTopBtn.show:hover{transform:translateY(-2px)}
.palette-pop{position:absolute;right:54px;bottom:0;background:var(--paper);border:1px solid var(--line-strong);border-radius:8px;padding:14px;width:200px;box-shadow:0 8px 24px rgba(0,0,0,0.16);display:none}
.palette-pop.open{display:block}
.palette-pop .palette-title{font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px}
.swatch-row{display:flex;gap:9px;flex-wrap:wrap}
.swatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;position:relative}
.swatch.active{border-color:var(--ink)}
.swatch.active::after{content:'\2713';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px}
.palette-label{font-size:12px;color:var(--ink-soft);margin-top:10px}
@media (max-width:560px){.control-dock{right:12px;bottom:16px}.palette-pop{right:0;width:180px}}

/* ---- search page (s-* classes) ---- */
.s-form{margin:1.4em 0 1.2em}
.s-label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.s-row{display:flex;border:1px solid var(--line-strong);border-radius:2px;background:var(--paper-alt);overflow:hidden}
.s-row input[type="search"]{flex:1;min-width:0;width:0;border:none;background:transparent;padding:13px 14px;font-family:var(--sans);font-size:15px;color:var(--ink);outline:none;-webkit-appearance:none;appearance:none}
.s-row input[type="search"]::placeholder{color:var(--ink-faint)}
.s-row:focus-within{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal-pale)}
.s-row button{flex-shrink:0;border:none;background:var(--teal);color:var(--paper);font-family:var(--sans);font-weight:600;font-size:13.5px;padding:0 24px;cursor:pointer;transition:background .2s ease}
.s-row button:hover{background:var(--teal-dark)}
.s-filters{border:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:12px}
.s-filters legend{float:left;font-family:var(--mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-faint);margin-right:14px;padding:0}
.s-filters label{font-size:13px;color:var(--ink-soft);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.s-filters input{accent-color:var(--teal)}
.s-status{font-family:var(--mono);font-size:12px;color:var(--ink-soft);margin:18px 0 6px;padding-bottom:12px;border-bottom:1px solid var(--line-strong);min-height:1.4em}
.s-results{list-style:none;margin:0;padding:0}
.s-item{padding:20px 0;border-bottom:1px solid var(--line)}
.s-meta{font-family:var(--mono);font-size:12px;letter-spacing:0.05em;text-transform:uppercase;color:var(--rust);margin-bottom:7px}
.s-item h3{font-family:var(--serif);font-weight:600;font-size:18px;line-height:1.35;margin-bottom:6px}
.s-item h3 a{color:var(--ink)}
.s-item h3 a:hover{color:var(--teal-dark)}
.s-auth{font-size:13px;color:var(--ink-soft);margin-bottom:5px}
.s-cite{font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
.s-cite a{color:inherit;border-bottom:1px dotted currentColor}

/* search.php nests its results inside .prose (matching the real search
   page's own layout) — without these, .prose's own p/h2/h3 rules
   (higher specificity than the plain .s-* rules above, since they
   combine a class with a type selector) would win the cascade and
   turn the small mono meta/citation lines into full-size body text. */
.prose .s-results{list-style:none;margin:0;padding:0}
.prose .s-item{margin:0;padding:20px 0;border-bottom:1px solid var(--line);font-size:inherit;line-height:inherit;color:inherit}
.prose .s-item:first-child{padding-top:0}
.prose .s-item h3{margin:0 0 6px;font-family:var(--serif);font-weight:600;font-size:18px;line-height:1.35}
.prose .s-item h3 a{color:var(--ink);border-bottom:1px solid transparent}
.prose .s-item h3 a:hover{color:var(--teal-dark);border-bottom-color:var(--teal-dark)}
.prose .s-meta{margin:0 0 7px;font-family:var(--mono);font-size:12px;letter-spacing:0.05em;text-transform:uppercase;color:var(--rust)}
.prose .s-auth{font-size:13px;color:var(--ink-soft);margin:0 0 5px;line-height:1.5}
.prose .s-cite{font-size:12px;line-height:1.5;margin:0;font-family:var(--mono);color:var(--ink-faint)}
.prose .s-status{font-family:var(--mono);font-size:12px;color:var(--ink-soft);margin:18px 0 6px;padding-bottom:12px;border-bottom:1px solid var(--line-strong);min-height:1.4em}
@media (max-width:980px){input,select,textarea,.past-issues-select,.widget-search input[type="search"]{font-size:16px}}
@media print{
  .utility-bar,nav.primary,.control-dock,.share-widget,.page-side,aside,.skip-link,.masthead .issn-line,.nav-toggle,footer .foot-icons{display:none!important}
  body{background:#fff;color:#000}
  a{color:#000;text-decoration:underline}
  .page-layout,.layout{display:block!important}
  .art-row{break-inside:avoid}
}