/* ------------------------------------------------------------------
 * Page reset.
 *
 * The design is full-bleed: the top bar, masthead and section bands are meant to
 * span the viewport. On WordPress, Divi zeroes the body margin; the OJS theme
 * overrides the default theme's templates and stylesheet and shipped no reset, so
 * the browser's default `body { margin: 8px }` left the whole journal sitting in
 * an 8px box with a white gutter on every side.
 * ------------------------------------------------------------------ */
html,
body {
  margin: 0;
  padding: 0;
}

body {
  /* The viewer paints its own ground behind the page; be explicit. */
  background: #ffffff;
}

/* IJLSI fonts — self-hosted woff2, served from the same origin as WP.
   The three-family system decided 2026-08-16:
   Spectral = headings/reading/numerals, Barlow = UI, IBM Plex Mono = accents. */

@font-face{font-family:"Spectral";font-style:normal;font-weight:300;font-display:swap;src:url(/wp-content/fonts/spectral-300.woff2) format("woff2")}
@font-face{font-family:"Spectral";font-style:italic;font-weight:300;font-display:swap;src:url(/wp-content/fonts/spectral-300-italic.woff2) format("woff2")}
@font-face{font-family:"Spectral";font-style:normal;font-weight:400;font-display:swap;src:url(/wp-content/fonts/spectral-400.woff2) format("woff2")}
@font-face{font-family:"Spectral";font-style:italic;font-weight:400;font-display:swap;src:url(/wp-content/fonts/spectral-400-italic.woff2) format("woff2")}
@font-face{font-family:"Spectral";font-style:normal;font-weight:600;font-display:swap;src:url(/wp-content/fonts/spectral-600.woff2) format("woff2")}
@font-face{font-family:"Spectral";font-style:italic;font-weight:600;font-display:swap;src:url(/wp-content/fonts/spectral-600-italic.woff2) format("woff2")}
@font-face{font-family:"Spectral";font-style:normal;font-weight:700;font-display:swap;src:url(/wp-content/fonts/spectral-700.woff2) format("woff2")}

@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(/wp-content/fonts/barlow-400.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(/wp-content/fonts/barlow-500.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(/wp-content/fonts/barlow-600.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(/wp-content/fonts/barlow-700.woff2) format("woff2")}

@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/wp-content/fonts/ibm-plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/wp-content/fonts/ibm-plex-mono-500.woff2) format("woff2")}
		/* Fix blue tap highlight on mobile */
.ijh-wrap,
.ijh-wrap a,
.ijh-wrap button,
.ijh-wrap .ijh-nav__cta {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
    /* ---------- IJLSI editorial header (scoped under .ijh-wrap) ---------- */
    .ijh-wrap {
      --paper: oklch(0.985 0.004 80);
      --paper-sunk: oklch(0.965 0.005 80);
      --ink: oklch(0.18 0.01 80);
      --ink-soft: oklch(0.34 0.01 80);
      --muted: oklch(0.52 0.01 80);
      --rule: oklch(0.86 0.006 80);
      --rule-strong: oklch(0.72 0.008 80);
      --accent: oklch(0.42 0.15 249);
      --accent-ink: oklch(0.28 0.12 249);
      --serif-display: "Spectral", Georgia, serif;
      --sans: "Barlow", system-ui, sans-serif;
      --mono: "IBM Plex Mono", ui-monospace, monospace;
      background: var(--paper);
      border-bottom: 1px solid var(--rule);
      font-family: var(--sans);
      color: var(--ink);
      position: relative;
      z-index: 90;
    }
    .ijh-wrap *, .ijh-wrap *::before, .ijh-wrap *::after { box-sizing: border-box; }
    /* Eyebrow */
    .ijh-eyebrow { background: var(--ink); color: oklch(0.78 0.005 80); font-size: 11px; letter-spacing: 0.08em; }
    .ijh-eyebrow__inner {
      max-width: 1320px; margin: 0 auto;
      padding: 7px 28px;
      display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
    }
    .ijh-eyebrow strong { color: #fff; font-weight: 600; letter-spacing: 0.1em; }
    .ijh-eyebrow .ijh-dot { width: 3px; height: 3px; border-radius: 50%; background: oklch(0.55 0.008 80); }
    .ijh-eyebrow__socials { display: flex; gap: 10px; }
    .ijh-eyebrow__socials a {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px;
      color: oklch(0.78 0.005 80) !important;
      text-decoration: none !important;
    }
    .ijh-eyebrow__socials a:hover { color: #fff !important; }
    .ijh-eyebrow__socials svg { width: 13px; height: 13px; }
    /* Search box in eyebrow */
    .ijh-eyebrow__search {
      margin-left: auto;
      display: inline-flex; align-items: center; gap: 6px;
      background: oklch(0.26 0.008 80);
      padding: 4px 8px;
      border-radius: 2px;
      width: 220px;
      transition: background 120ms;
    }
    .ijh-eyebrow__search:focus-within { background: oklch(0.32 0.008 80); }
    .ijh-eyebrow__search svg {
      width: 12px; height: 12px;
      color: oklch(0.78 0.005 80);
      flex-shrink: 0;
    }
    .ijh-eyebrow__search input {
      border: 0; background: transparent; outline: none;
      font: inherit;
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0.02em;
      color: #fff;
      flex: 1; min-width: 0; padding: 0;
    }
    .ijh-eyebrow__search input::placeholder {
      color: oklch(0.68 0.005 80);
      letter-spacing: 0.02em;
    }
    /* Main bar */
    .ijh-bar {
      max-width: 1320px;
      margin: 0 auto;
      padding: 0 28px;
      display: flex;
      align-items: center;
      gap: 28px;
      min-height: 76px;
    }
    .ijh-brand {
      display: flex; align-items: center; gap: 14px;
      text-decoration: none !important;
      color: var(--ink) !important;
      flex-shrink: 0;
    }
    .ijh-brand__logo {
      height: 52px;
      width: auto;
      display: block;
    }
    .ijh-burger {
      display: none; margin-left: auto;
      background: none; border: 1px solid var(--rule-strong);
      width: 38px; height: 38px;
      cursor: pointer; padding: 0;
      align-items: center; justify-content: center;
      color: var(--ink);
    }
    .ijh-burger svg { width: 18px; height: 18px; }
    .ijh-search { display: none; }
    .ijh-nav { flex: 1; min-width: 0; display: flex; align-items: stretch; }
    .ijh-nav__list {
      list-style: none; margin: 0 !important; padding: 0 !important;
      display: flex; align-items: stretch; gap: 0;
      position: relative;
    }
    .ijh-nav__list li {
      margin: 0; padding: 0;
      position: relative;
      list-style: none !important;
    }
    .ijh-nav__list li::before,
    .ijh-nav__list li::after { content: none !important; display: none !important; }
    .ijh-nav__list .current-menu-item > a::after,
    .ijh-nav__list .current_page_item > a::after { content: ""; display: block; }
    .ijh-nav__list .menu-item-has-children > a::after { content: ""; display: inline-block; }
    .ijh-nav__list .menu-item-has-children > a::after {
      width: 7px; height: 7px;
      border-right: 1.4px solid currentColor;
      border-bottom: 1.4px solid currentColor;
      transform: rotate(45deg) translateY(-1px);
      margin-left: 8px;
      opacity: 0.55;
      transition: transform 160ms, opacity 160ms;
    }
    .ijh-nav__list .menu-item-has-children:hover > a::after {
      opacity: 1;
      transform: rotate(-135deg) translateY(0);
    }
    .ijh-nav__list .sub-menu,
    .ijh-nav__list .children {
      list-style: none; margin: 0; padding: 8px 0;
      position: absolute; top: 100%; left: 0;
      min-width: 230px;
      background: var(--paper);
      border: 1px solid var(--rule);
      border-top: 2px solid var(--accent);
      box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.22);
      opacity: 0; visibility: hidden;
      transform: translateY(4px);
      transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
      z-index: 200;
    }
    .ijh-nav__list > li:hover > .sub-menu,
    .ijh-nav__list > li:focus-within > .sub-menu,
    .ijh-nav__list > li:hover > .children,
    .ijh-nav__list > li:focus-within > .children {
      opacity: 1; visibility: visible; transform: translateY(0);
    }
    .ijh-nav__list .sub-menu li { display: block; width: 100%; }
    .ijh-nav__list .sub-menu a {
      padding: 9px 18px !important;
      font-size: 13px !important;
      width: 100%;
      white-space: nowrap;
      border-bottom: 0 !important;
      border-left: 2px solid transparent !important;
    }
    .ijh-nav__list .sub-menu a:hover {
      background: var(--paper-sunk) !important;
      border-left-color: var(--accent) !important;
      color: var(--ink) !important;
    }
    .ijh-nav__list .sub-menu .sub-menu {
      top: -9px; left: 100%;
      border-top: 1px solid var(--rule);
      border-left: 2px solid var(--accent);
    }
    .ijh-nav__list a {
      font-family: var(--sans) !important;
      font-size: 13px !important;
      font-weight: 500 !important;
      letter-spacing: 0.02em !important;
      color: var(--ink-soft) !important;
      text-decoration: none !important;
      padding: 14px 18px !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      background: transparent !important;
      border: 0 !important;
      text-transform: none !important;
      line-height: 1 !important;
      transition: color 120ms, background 120ms;
      height: auto !important;
    }
    .ijh-nav__list a:hover {
      color: var(--ink) !important;
      background: var(--paper) !important;
    }
    .ijh-nav__list .current-menu-item > a,
    .ijh-nav__list .current_page_item > a {
      color: var(--ink) !important;
      position: relative;
    }
    .ijh-nav__list .current-menu-item > a::after,
    .ijh-nav__list .current_page_item > a::after {
      content: ""; position: absolute;
      left: 18px; right: 18px; bottom: -1px;
      height: 2px; background: var(--accent);
    }
    .ijh-nav__list .et_pb_sub_menu_container { display: none !important; }
    .ijh-nav__ctas {
      margin-left: auto;
      display: flex; align-items: center; gap: 8px;
      padding-left: 16px;
    }
    .ijh-nav__cta {
      font-family: var(--sans) !important;
      font-size: 11.5px !important;
      font-weight: 600 !important;
      letter-spacing: 0.04em !important;
      text-transform: uppercase !important;
      text-decoration: none !important;
      padding: 9px 16px !important;
      background: var(--accent) !important;
      color: #fff !important;
      border-radius: 2px !important;
      border: 1px solid var(--accent) !important;
      transition: background 120ms, color 120ms;
      white-space: nowrap;
      line-height: 1;
    }
    .ijh-nav__cta:hover {
      background: var(--accent-ink) !important;
      border-color: var(--accent-ink) !important;
      color: #fff !important;
    }
    .ijh-nav__cta--outline {
      background: transparent !important;
      color: var(--accent) !important;
    }
    .ijh-nav__cta--outline:hover {
      background: var(--accent) !important;
      color: #fff !important;
    }
    /* Responsive */
    @media (max-width: 1100px) {
      .ijh-eyebrow__search { width: 180px; }
      .ijh-bar { gap: 20px; padding: 0 20px; min-height: 68px; }
      .ijh-brand__logo { height: 44px; }
    }
    @media (max-width: 980px) {
      .ijh-bar { padding: 12px 18px; min-height: 0; gap: 14px; }
      .ijh-burger { display: inline-flex; }
      .ijh-nav {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--paper);
        border-top: 1px solid var(--rule);
        border-bottom: 1px solid var(--rule);
        z-index: 200;
        flex-direction: column;
      }
      .ijh-nav.is-open { display: flex; }
      .ijh-nav__list { flex-direction: column; padding: 8px 18px !important; }
      .ijh-nav__list li { width: 100%; }
      .ijh-nav__list a {
        padding: 12px 0 !important;
        border-bottom: 1px solid var(--rule) !important;
        width: 100%;
      }
      .ijh-nav__list .menu-item-has-children > a::after {
        margin-left: auto;
        margin-right: 4px;
      }
      .ijh-nav__list .sub-menu,
      .ijh-nav__list .children {
        position: static; opacity: 1; visibility: visible; transform: none;
        border: 0; box-shadow: none; padding: 0 0 0 14px;
        min-width: 0; background: transparent; display: none;
      }
      .ijh-nav__list .menu-item-has-children:hover > .sub-menu,
      .ijh-nav__list .menu-item-has-children:focus-within > .sub-menu,
      .ijh-nav__list .menu-item-has-children.is-open > .sub-menu { display: block; }
      .ijh-nav__list .sub-menu a {
        padding: 10px 0 !important;
        font-size: 12.5px !important;
        border-bottom: 1px solid var(--rule) !important;
        border-left: 0 !important;
      }
      .ijh-nav__list .current-menu-item > a::after,
      .ijh-nav__list .current_page_item > a::after { display: none; }
      .ijh-nav__list .current-menu-item > a,
      .ijh-nav__list .current_page_item > a { color: var(--accent) !important; }
      .ijh-nav__ctas {
        flex-direction: column; align-items: stretch;
        margin: 12px 0 0; padding: 0; gap: 8px;
      }
      .ijh-nav__cta { text-align: center; justify-content: center; display: inline-flex; }
      .ijh-eyebrow__inner { padding: 6px 18px; gap: 10px; }
      .ijh-eyebrow .ijh-eyebrow__indexing { display: none; }
      .ijh-eyebrow__socials { display: none; }   /* ← Social icons hidden on mobile */
    }
	/* ========== FIX: Sub-Sub Menu (3rd level) on Desktop ========== */

/* Make submenu items positioned so child menus can fly out */
.ijh-nav__list .sub-menu li {
  position: relative;
}

/* Show 3rd level menu when hovering 2nd level item */
.ijh-nav__list .sub-menu li:hover > .sub-menu,
.ijh-nav__list .sub-menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Position the 3rd level menu to the right */
.ijh-nav__list .sub-menu .sub-menu {
  top: 0;
  left: 100%;
  margin-left: 0;
  border-top: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
}

/* Optional: slight gap fix for very deep nesting */
.ijh-nav__list .sub-menu .sub-menu .sub-menu {
  top: -1px;
}

/* ── Responsive ─────────────────────────────── */

/* Tablet: 2×2 columns */
@media(max-width:900px){
  .ijf-main{grid-template-columns:1fr 1fr;}
  .ijf-col{padding:22px 0;}
  .ijf-col+.ijf-col{border-left:none;padding-left:0;border-top:1px solid var(--rule);}
  .ijf-intro,.ijf-main,.ijf-bottom,.ijf-copy-row{padding-left:24px;padding-right:24px;}
}

/* Large phone: single column, tighten everything */
@media(max-width:600px){
  .ijf-main{grid-template-columns:1fr;}
  .ijf-col{padding:18px 0;}

  /* Intro: stack brand + badges vertically */
  .ijf-intro{
    flex-direction:column;
    align-items:flex-start;
    padding:20px 18px;
    gap:14px;
  }
  .ijf-brand-name{font-size:1rem;}
  /* Badges: wrap and shrink */
  .ijf-badges{gap:6px;}
  .ijf-badge{font-size:9px;padding:3px 8px;}

  /* Main columns */
  .ijf-main{padding:0 18px;}
  .ijf-col-head{font-size:.95rem;margin-bottom:12px;padding-bottom:10px;}

  /* Nav links: slightly smaller */
  .ijf-links li a{font-size:12.5px !important;padding:4px 0;}

  /* Issues: reduce padding */
  .ijf-issue{padding:6px 10px;}
  .ijf-issue a{font-size:12.5px;}

  /* Contact items */
  .ijf-contact-item{font-size:12.5px;}
  .ijf-contact-label{min-width:52px;font-size:9px;}

  /* Submit button in Contact column — full width on mobile */
  .ijf-col-submit-btn{
    display:block !important;
    text-align:center !important;
    margin-top:12px !important;
  }

  /* Policy links: wrap as block, full width */
  .ijf-bottom{
    flex-direction:column;
    align-items:flex-start;
    padding:14px 18px;
    gap:14px;
  }
  .ijf-policy-links{display:flex;flex-wrap:wrap;gap:0;}
  .ijf-policy-links a{
    font-size:11.5px !important;
    padding:4px 9px;
    border-right:1px solid var(--rule);
  }
  .ijf-policy-links a:first-child{padding-left:0;}

  /* Social icons row */
  .ijf-social{gap:6px;}
  .ijf-social-link{width:30px;height:30px;}
  .ijf-social-link svg{width:13px;height:13px;}

  /* Copyright */
  .ijf-copy-row{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    padding:12px 18px;
  }
  .ijf-copy{font-size:11.5px;line-height:1.6;}
  .ijf-copy:last-child{text-align:left !important;}
}

/* Small phone */
@media(max-width:380px){
  .ijf-brand-name{font-size:.95rem;}
  .ijf-badge{font-size:8.5px;padding:2px 7px;}
  .ijf-links li a{font-size:12px !important;}
  .ijf-copy{font-size:11px;}
  .ijf-policy-links a{font-size:11px !important;padding:4px 7px;}
}
/* ── PDF viewer header bar: house maroon, not PKP blue ── */
.header_view {
  background: #28538C !important;
}
.header_view a,
.header_view .title,
.header_view .download {
  color: #FFFFFF !important;
  font-family: "Barlow", system-ui, sans-serif !important;
}
.header_view a:hover {
  background: #173966 !important;
  color: #fff !important;
}
/* Color-only overrides: the parent theme's viewer geometry (fixed-height
   bar, absolute corner squares) must not be disturbed. */
.header_view .return {
  background: #FFFFFF !important;
  color: #28538C !important;
}
.header_view .return:hover,
.header_view .return:focus {
  background: #173966 !important;
  color: #fff !important;
}
.header_view .title:hover,
.header_view .title:focus {
  background: #173966 !important;
}
.header_view .download {
  background: #FFFFFF !important;
  color: #28538C !important;
}
.header_view .download:hover,
.header_view .download:focus {
  background: #173966 !important;
  color: #fff !important;
}

/* ── IJLSI OJS content-area styling (matches ijlsi.com design tokens) ── */
:root {
  --ij-paper: #ffffff;
  --ij-paper-s: #f6f6f7;
  --ij-ink: oklch(0.18 0.01 80);
  --ij-ink-soft: oklch(0.34 0.01 80);
  --ij-muted: oklch(0.52 0.01 80);
  --ij-rule: oklch(0.86 0.006 80);
  --ij-accent: oklch(0.42 0.15 249);
  --ij-accent-ink: oklch(0.28 0.12 249);
  --ij-fd: "Spectral", Georgia, serif;
  --ij-fb: "Spectral", Georgia, serif;
  --ij-fs: "Barlow", system-ui, sans-serif;
}

body {
  background: #ffffff;
  font-family: var(--ij-fs);
  color: var(--ij-ink);
}
/* Neutralize the warm paper tone inherited from the copied WP header CSS */
.ijh-wrap {
  background: #ffffff;
  --paper: #ffffff;
  --paper-sunk: #f6f6f7;
}

/* Full-bleed page frame: sections span the screen; padding lives inside components */
.pkp_structure_content {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* ── Article page (2a) ──
   NOTE: do NOT reintroduce a `min-height:100%` + `flex:1` growth chain here.
   A percentage min-height whose ancestor height depends on content, combined
   with the sticky rail, produced a scroll-time layout feedback loop: the
   footer juddered and the renderer could hang near the bottom of long
   articles. The grid below stretches the rail on its own. */
.ij2-head {
  padding: 44px 32px 30px;
  border-bottom: 1px solid var(--dh-border);
}
.ij2-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--dh-barlow);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dh-muted);
  margin-bottom: 16px;
}
.ij2-eyebrow__cat { color: var(--dh-accent); }
.ij2-eyebrow__sep { color: #C4C0B8; }
.ij2-title {
  font-family: var(--dh-spectral) !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.015em !important;
  color: var(--dh-ink) !important;
  text-wrap: pretty;
  margin: 0 !important;
  max-width: 1150px;
}
@media (max-width: 640px) {
  .ij2-title { font-size: 30px !important; }
}
.ij2-subtitle {
  font-family: var(--dh-spectral);
  font-size: 24px;
  font-weight: 400;
  color: var(--dh-muted);
  margin: 10px 0 0;
}
.ij2-authors {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ij2-author {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.ij2-author__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #F0EFEC;
  border: 1px solid var(--dh-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dh-spectral);
  font-size: 15px;
  font-weight: 600;
  color: var(--dh-muted);
  text-transform: uppercase;
  flex-shrink: 0;
}
.ij2-author__name {
  font-family: var(--dh-barlow);
  font-size: 16px;
  font-weight: 600;
  color: var(--dh-ink);
}
.ij2-author__role {
  font-family: var(--dh-barlow);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dh-accent);
  margin-left: 6px;
}
.ij2-author__affil {
  font-family: var(--dh-spectral);
  font-size: 14.5px;
  font-style: italic;
  color: var(--dh-muted);
  margin-top: 3px;
}
.ij2-author__orcid {
  font-family: var(--dh-barlow);
  font-size: 12.5px;
  margin-top: 3px;
}
/* ── Byline + author drawer (mirrors the WP single-paper pattern) ── */
.ij2-byline {
  display: flex; flex-wrap: wrap; gap: 14px 24px;
  padding: 18px 0;
  margin-top: 20px;
  border-top: 1px solid var(--dh-border);
  border-bottom: 1px solid var(--dh-border);
  align-items: center;
}
.ij2-bylauthor {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  white-space: nowrap;
}
.ij2-bylname {
  font-family: var(--dh-spectral);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--dh-ink);
}
.ij2-bylrole {
  font-family: var(--dh-barlow);
  font-size: 11px;
  color: var(--dh-muted);
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.ij2-byline__toggle {
  margin-left: auto;
  font-family: var(--dh-barlow);
  font-size: 12px;
  color: var(--dh-accent-hover);
  background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  white-space: nowrap;
}
.ij2-byline__toggle:hover { color: var(--dh-accent); }
.ij2-chev { transition: transform 160ms; display: inline-block; }
.ij2-byline__toggle.is-open .ij2-chev { transform: rotate(180deg); }
.ij2-drawer {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 24px;
  background: var(--dh-soft);
  border-bottom: 1px solid var(--dh-border);
  margin-bottom: 28px;
}
.ij2-drawer.is-open { display: grid; }
.ij2-drawer__card { display: flex; flex-direction: column; gap: 6px; }
.ij2-drawer__chip {
  font-family: var(--dh-barlow);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dh-muted);
  border: 1px solid var(--dh-border);
  padding: 2px 6px;
  width: fit-content;
  margin-bottom: 2px;
}
.ij2-drawer__name {
  font-family: var(--dh-spectral);
  font-size: 17px;
  font-weight: 600;
  color: var(--dh-ink);
}
.ij2-drawer__affil {
  font-family: var(--dh-barlow);
  font-size: 12.5px;
  color: var(--dh-muted);
  line-height: 1.45;
}
/* ORCID iD — green mark beside the byline name, full iD in the drawer */
.ij2-orcid {
  display: inline-flex;
  vertical-align: -2px;
  margin-left: 6px;
  line-height: 0;
}
.ij2-orcid svg { width: 15px; height: 15px; }
.ij2-drawer__orcid {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: var(--dh-barlow);
  font-size: 12.5px;
}
.ij2-drawer__orcid svg { width: 15px; height: 15px; flex-shrink: 0; }
.ij2-drawer__orcid a { color: var(--dh-muted); text-decoration: none; overflow-wrap: break-word; }
.ij2-drawer__orcid a:hover { color: var(--dh-accent); text-decoration: underline; }

/* Contents rail card (scroll-spy TOC over the inline full text) */
.ij2-toc {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 420px;
  overflow: auto;
}
.ij2-toc li { margin: 0; }
.ij2-toc a {
  display: block;
  padding: 6px 10px;
  font-family: var(--dh-barlow);
  font-size: 13px;
  line-height: 1.4;
  color: var(--dh-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.ij2-toc a:hover { color: var(--dh-ink); }
.ij2-toc a.is-active {
  color: var(--dh-accent);
  border-left-color: var(--dh-accent);
  background: #fff;
}
/* Anchored headings land below the sticky-ish chrome */
#fulltext .ij2-prose h2 { scroll-margin-top: 90px; }

/* ── Overflow containment ──────────────────────────────────────────────
   Footnote/reference entries carry very long unbroken URLs, and some papers
   embed wide data tables. Either will push the article page sideways on a
   phone. Long words wrap; tables scroll inside their own box instead. */
.ij2-prose,
.ij2-refs,
.ij2-abstract,
.ij2-citebox,
.ij2-drawer__affil,
.ijt-row__affil {
  overflow-wrap: break-word;
  word-break: break-word;
}
.ij2-prose a,
.ij2-refs a,
.ij2-citebox a {
  overflow-wrap: break-word;
  word-break: break-all;      /* URLs have no natural break points */
}
.ij2-prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ij2-prose pre,
.ij2-prose code {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.ij2-prose img {
  max-width: 100%;
  height: auto;
}
/* Last line of defence: nothing in the article may widen the page. */
.pkp_page_article .obj_article_details.ij2 {
  overflow-x: clip;
}

/* Inline full text (HTML galley), reading typography as on WP paper pages */
.ij2-prose {
  font-family: var(--dh-spectral);
  font-size: 17px;
  line-height: 1.75;
  color: var(--dh-body, #26221E);
  max-width: none;
}
.ij2-prose p { margin: 0 0 1em; }
.ij2-prose h1, .ij2-prose h2, .ij2-prose h3, .ij2-prose h4 {
  font-family: var(--dh-spectral);
  color: var(--dh-ink);
  line-height: 1.3;
  margin: 1.6em 0 0.6em;
}
.ij2-prose h2 { font-size: 22px; font-weight: 700; }
.ij2-prose h3 { font-size: 19px; font-weight: 600; }
.ij2-prose h4 { font-size: 17px; font-weight: 600; }
.ij2-prose ul, .ij2-prose ol { margin: 0 0 1em; padding-left: 1.5em; }
.ij2-prose li { margin-bottom: 0.4em; }
.ij2-prose blockquote {
  margin: 1em 0; padding: 4px 0 4px 18px;
  border-left: 3px solid var(--dh-accent);
  color: var(--dh-muted);
}
.ij2-prose a { color: var(--dh-accent); }
.ij2-prose table { border-collapse: collapse; margin: 1em 0; max-width: 100%; }
.ij2-prose td, .ij2-prose th { border: 1px solid var(--dh-border); padding: 6px 10px; }
.ij2-prose img { max-width: 100%; height: auto; }
.ij2-prose sup a { text-decoration: none; }
.ij2-actions {
  margin-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.ij2-actions__btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ij2-btn {
  font-family: var(--dh-barlow);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 8px;
  text-decoration: none !important;
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
  transition: all 120ms;
}
.ij2-btn svg { width: 16px; height: 16px; }
.ij2-splitbtn {
  display: inline-flex;
  align-items: stretch;
  background: var(--dh-accent);
  border-radius: 8px;
  overflow: hidden;
}
.ij2-splitbtn__main {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 17px;
  font-family: var(--dh-barlow);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  color: #FFFFFF !important;
  text-decoration: none !important;
  transition: background 120ms;
}
.ij2-splitbtn__main svg { width: 16px; height: 16px; }
.ij2-splitbtn__main:hover { background: var(--dh-accent-hover); }
.ij2-splitbtn__alt {
  display: inline-flex;
  align-items: center;
  padding: 12px 16px 12px 15px;
  border-left: 1px solid rgba(250, 248, 243, 0.35);
  font-family: var(--dh-mono);
  font-size: 13px;
  line-height: 1;
  color: #EBC9C2 !important;
  text-decoration: none !important;
  transition: background 120ms, color 120ms;
}
.ij2-splitbtn__alt:hover { background: var(--dh-accent-hover); color: #fff !important; }
.ij2-btn--solid {
  background: var(--dh-accent);
  border-color: var(--dh-accent);
  color: #FFFFFF !important;
}
.ij2-btn--solid:hover { background: var(--dh-accent-hover); border-color: var(--dh-accent-hover); }
.ij2-btn--accent {
  border-color: var(--dh-accent);
  color: var(--dh-accent) !important;
}
.ij2-btn--accent:hover { background: var(--dh-accent); color: #FFFFFF !important; }
.ij2-btn--ghost {
  border-color: var(--dh-ctrl);
  color: var(--dh-ink) !important;
}
.ij2-btn--ghost:hover { background: var(--dh-accent); border-color: var(--dh-accent); color: #FFFFFF !important; }
.ij2-stats {
  display: flex;
  gap: 26px;
  align-items: baseline;
}
.ij2-stat {
  font-family: var(--dh-barlow);
  font-size: 13px;
  color: var(--dh-muted);
}
.ij2-stat__n {
  font-family: var(--dh-spectral);
  font-size: 18px;
  font-weight: 600;
  color: var(--dh-ink);
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}
.ij2-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  align-items: stretch;
}
.ij2-main {
  padding: 28px 40px 56px 32px;
  min-width: 0;
}
.ij2-block + .ij2-block,
.ij2-block:not(.ij2-block--first) {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--dh-hairline);
}
.ij2-block--first { margin-top: 0; padding-top: 0; border-top: 0; }
.ij2-label {
  font-family: var(--dh-barlow);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dh-muted);
  margin-bottom: 16px;
}
.ij2-labelrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.ij2-abstract {
  font-family: var(--dh-spectral);
  font-size: 18px;
  line-height: 1.72;
  color: var(--dh-body);
  /* Justified to match the PDF of record and the full text below it.
     hyphens:auto is what keeps justification from opening rivers of
     white space; without it, justified prose on the web looks worse
     than ragged-right. */
  text-align: justify;
  hyphens: auto;
}
.ij2-abstract p { margin: 0 0 18px; }
.ij2-abstract p:last-child { margin-bottom: 0; }
.ij2-kw { display: flex; flex-wrap: wrap; gap: 8px; }
.ij2-kwchip {
  background: var(--dh-chipbg);
  border: 1px solid var(--dh-chipborder);
  padding: 6px 12px;
  font-family: var(--dh-barlow);
  font-size: 13px;
  color: var(--dh-body);
}
.ij2-refs {
  font-family: var(--dh-spectral);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--dh-body);
}
.ij2-refs ol { padding-left: 26px; margin: 0; display: flex; flex-direction: column; gap: 12px; }
/* Supplementary files list */
.ij2-supp { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ij2-supp a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--dh-barlow);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--dh-accent) !important;
  border: 1px solid var(--dh-ctrl);
  border-radius: 8px;
  padding: 10px 14px;
  text-decoration: none !important;
  transition: all 120ms;
}
.ij2-supp a:hover { background: var(--dh-accent); border-color: var(--dh-accent); color: #FFFFFF !important; }
.ij2-citeactions { display: flex; gap: 14px; }
.ij2-citeact {
  font-family: var(--dh-barlow);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dh-muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.ij2-citeact--primary { color: var(--dh-accent); }
.ij2-citebox {
  background: var(--dh-soft);
  border: 1px solid var(--dh-border);
  border-left: 3px solid var(--dh-accent);
  padding: 16px 18px;
  font-family: var(--dh-spectral);
  font-size: 15px;
  line-height: 1.65;
  color: var(--dh-body);
  word-break: break-word;
}
.ij2-copied {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--dh-barlow);
  font-size: 12px;
  font-weight: 600;
  color: var(--dh-accent);
}
.ij2-rail {
  border-left: 1px solid var(--dh-border);
  background: var(--dh-rail-bg);
  padding: 40px 28px 56px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-self: stretch;
}
.ij2-rail > * { flex-shrink: 0; }
.ij2-rail__inner {
  align-self: start;      /* never stretched - a stretched sticky box judders */
  overflow-anchor: none;  /* keep scroll anchoring out of the sticky subtree */
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.ij2-rail__inner { position: sticky; top: 24px; }
.ij2-rail__inner > * { flex-shrink: 0; }
.ij2-railblock + .ij2-railblock {
  border-top: 1px solid var(--dh-border);
  padding-top: 24px;
}
.ij2-raillabel {
  font-family: var(--dh-barlow);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dh-muted);
  margin-bottom: 12px;
}
.ij2-railrow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--dh-barlow);
  font-size: 13.5px;
  padding: 5px 0;
}
.ij2-railrow span { color: var(--dh-muted); }
.ij2-railrow strong { color: var(--dh-body); font-weight: 600; text-align: right; }
.ij2-railrow strong a { color: var(--dh-accent) !important; text-decoration: none; }
.ij2-licchips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ij2-licchip {
  border: 1px solid var(--dh-ctrl);
  background: #fff;
  padding: 4px 8px;
  font-family: var(--dh-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dh-body);
}
.ij2-liccopy {
  font-family: var(--dh-barlow);
  font-size: 13px;
  line-height: 1.6;
  color: var(--dh-sec2);
}
@media (max-width: 1024px) {
  .ij2-body { grid-template-columns: 1fr; }
  .ij2-rail { border-left: 0; }
}
@media (max-width: 640px) {
  .ij2-title { font-size: 30px; }
  .ij2-head { padding: 30px 20px 24px; }
  .ij2-main { padding: 28px 20px 40px; }
}
/* Archive page side padding + top breathing room */
.ij-arch {
  padding: 36px 32px 40px;
}
/* The parent theme squeezes the main column with big side margins - span the full container */
.pkp_structure_content .pkp_structure_main {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
}
/* Kill the parent theme's decorative column-separator lines */
.pkp_structure_main::before,
.pkp_structure_main::after {
  content: none !important;
  display: none !important;
}

/* Headings in the editorial serif */
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.page_index_journal h1 {
  font-family: var(--ij-fd);
  color: var(--ij-ink);
  font-weight: 600;
}

.obj_article_details .page_title,
.obj_issue_toc .heading h2 {
  font-family: var(--ij-fd);
  font-weight: 600;
  line-height: 1.25;
}

/* Article abstract and body copy in the reading serif */
.obj_article_details .abstract,
.obj_article_details .item.abstract p {
  font-family: var(--ij-fb);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ij-ink-soft);
}

/* Links + accents */
.pkp_structure_main a {
  color: var(--ij-accent);
}
.pkp_structure_main a:hover {
  color: var(--ij-accent-ink);
}

/* Galley (PDF) buttons in the house maroon */
.obj_galley_link {
  background: var(--ij-accent);
  border: 1px solid var(--ij-accent);
  color: #fff !important;
  font-family: var(--ij-fs);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 9px 18px;
}
.obj_galley_link:hover,
.obj_galley_link:focus {
  background: var(--ij-accent-ink);
  border-color: var(--ij-accent-ink);
  color: #fff !important;
}

/* Issue TOC: tighten vertical rhythm */
.obj_issue_toc .heading {
  margin-bottom: 16px;
}
.obj_issue_toc .published {
  margin: 0 0 28px;
}
.obj_issue_toc .sections {
  margin-top: 0 !important;
}
.obj_issue_toc .section {
  margin-top: 0 !important;
  padding-top: 8px !important;
}
.obj_issue_toc .section > h2,
.obj_issue_toc .section .section_title {
  font-family: var(--ij-fd);
  font-size: 22px;
  font-weight: 600;
  color: var(--ij-ink);
  border-bottom: 2px solid var(--ij-accent);
  display: inline-block;
  padding-bottom: 6px;
  margin: 0 0 20px;
}

/* ── Article page redesign (merged WP + OJS layout) ── */
.ij-metastrip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--ij-fs);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ij-muted);
  margin-bottom: 18px;
}
.ij-metastrip__badge {
  border: 1px solid var(--ij-accent);
  color: var(--ij-accent);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 2px;
}
.ij-metastrip__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ij-rule);
}
.obj_article_details .page_title {
  font-size: 40px;
  line-height: 1.2;
  margin: 0 0 14px;
}
section.ij-authors {
  margin: 0 0 6px !important;
  padding: 0 !important;
}
.ij-authors ul.authors {
  list-style: none !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}
.ij-authors ul.authors > li {
  margin: 0 0 14px !important;
  padding: 0 !important;
}
.ij-authors .name {
  display: block;
  font-family: var(--ij-fs);
  font-weight: 600;
  font-size: 15px;
  color: var(--ij-ink);
}
.ij-authors .affiliation {
  display: block;
  font-family: var(--ij-fs);
  font-size: 13.5px;
  color: var(--ij-muted);
  margin-top: 2px;
}
.ij-keywords .value {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ij-chip {
  font-family: var(--ij-fs);
  font-size: 12.5px;
  color: var(--ij-ink-soft);
  background: var(--ij-paper-s);
  border: 1px solid var(--ij-rule);
  border-radius: 2px;
  padding: 6px 12px;
}
.ij-infotable {
  border: 1px solid var(--ij-rule);
  border-radius: 2px;
  margin-top: 28px;
}
.ij-infotable__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  border-bottom: 1px solid var(--ij-rule);
}
.ij-infotable__row:last-child { border-bottom: 0; }
.ij-infotable__label {
  font-family: var(--ij-fs);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ij-muted);
  padding: 16px 18px;
}
.ij-infotable__value {
  font-family: var(--ij-fb);
  font-size: 15px;
  color: var(--ij-ink-soft);
  padding: 14px 18px;
  line-height: 1.55;
}
/* Right rail cards */
.ij-rail .galleys { margin-bottom: 18px; }
.ij-card {
  border: 1px solid var(--ij-rule);
  border-radius: 2px;
  background: #fff;
  margin-bottom: 18px;
}
.ij-card__head {
  font-family: var(--ij-fs);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ij-muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--ij-rule);
  background: var(--ij-paper-s);
}
.ij-card__body { padding: 14px 16px; }
.ij-access__row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.ij-access__badge { font-size: 16px; }
.ij-access__title {
  font-family: var(--ij-fs);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ij-ink);
}
.ij-access__sub {
  font-family: var(--ij-fs);
  font-size: 12.5px;
  color: var(--ij-muted);
  margin-top: 2px;
}
.ij-meta__row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  padding: 7px 0;
}
.ij-meta__l {
  font-family: var(--ij-fs);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ij-muted);
  padding-top: 2px;
}
.ij-meta__v {
  font-family: var(--ij-fb);
  font-size: 15px;
  color: var(--ij-ink);
}
.ij-issuelink {
  font-family: var(--ij-fs);
  font-size: 13.5px;
  font-weight: 500;
}
/* Article layout: flexible main column + fixed-width rail, WP proportions */
@media (min-width: 1100px) {
  .obj_article_details .row {
    display: flex !important;
    gap: 48px;
    align-items: flex-start;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
  /* Clearfix pseudo-elements become invisible flex items and eat a gap */
  .obj_article_details .row::before,
  .obj_article_details .row::after {
    content: none !important;
    display: none !important;
  }
  .obj_article_details .main_entry .item {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .obj_article_details .main_entry {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .obj_article_details .entry_details.ij-rail {
    flex: 0 0 340px !important;
    width: 340px !important;
    float: none !important;
    padding: 0 !important;
    border: 0 !important;
    position: sticky;
    top: 20px;
  }
}

/* ── Unified archive page ── */
.ij-arch__hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
  padding: 8px 0 24px;
  border-bottom: 1px solid var(--ij-rule);
  margin-bottom: 20px;
}
.ij-arch__hero h1 {
  font-family: var(--ij-fd) !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 10px !important;
}
.ij-arch__tagline {
  font-family: var(--ij-fb);
  font-size: 16px;
  color: var(--ij-ink-soft);
  margin: 0;
  max-width: 560px;
}
.ij-arch__stats {
  display: flex;
  gap: 36px;
}
.ij-arch__stat { text-align: right; }
.ij-arch__statv {
  display: block;
  font-family: var(--ij-fd);
  font-size: 30px;
  font-weight: 600;
  color: var(--ij-ink);
}
.ij-arch__statl {
  font-family: var(--ij-fs);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ij-muted);
}
.ij-arch__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.ij-arch__chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ij-arch__chiplabel {
  font-family: var(--ij-fs);
  font-size: 12.5px;
  color: var(--ij-muted);
  margin-right: 4px;
}
.ij-arch__chip {
  font-family: var(--ij-fs);
  font-size: 13px;
  font-weight: 500;
  color: var(--ij-ink-soft);
  background: #fff;
  border: 1px solid var(--ij-rule);
  border-radius: 2px;
  padding: 7px 14px;
  cursor: pointer;
  transition: all 120ms;
}
.ij-arch__chip:hover { border-color: var(--ij-accent); color: var(--ij-accent); }
.ij-arch__chip.is-active {
  background: var(--ij-accent);
  border-color: var(--ij-accent);
  color: #fff;
}
.ij-arch__search input {
  font-family: var(--ij-fs);
  font-size: 13px;
  border: 1px solid var(--ij-rule);
  border-radius: 2px;
  padding: 9px 14px;
  width: 320px;
  max-width: 100%;
  background: #fff;
  color: var(--ij-ink);
}
.ij-arch__current {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--ij-paper-s);
  border: 1px solid var(--ij-rule);
  border-radius: 2px;
  padding: 22px 26px;
  margin-bottom: 36px;
}
.ij-arch__curlabel {
  font-family: var(--ij-fs);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ij-accent);
  margin-bottom: 6px;
}
.ij-arch__curtitle {
  font-family: var(--ij-fd);
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 6px;
}
.ij-arch__curtitle a { color: var(--ij-accent) !important; text-decoration: none; }
.ij-arch__curmeta {
  font-family: var(--ij-fs);
  font-size: 13px;
  color: var(--ij-muted);
}
.ij-arch__curactions { display: flex; flex-direction: column; gap: 8px; }
.ij-arch__curbtn {
  font-family: var(--ij-fs);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  background: var(--ij-accent);
  color: #fff !important;
  border: 1px solid var(--ij-accent);
  border-radius: 2px;
  padding: 11px 22px;
  text-decoration: none !important;
  transition: background 120ms;
}
.ij-arch__curbtn:hover { background: var(--ij-accent-ink); }
.ij-arch__curbtn--ghost {
  background: #fff;
  color: var(--ij-accent) !important;
}
.ij-arch__curbtn--ghost:hover { background: var(--ij-accent); color: #fff !important; }
.ij-arch__vol { margin-bottom: 40px; }
.ij-arch__volhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-bottom: 2px solid var(--ij-ink);
  padding-bottom: 10px;
  margin-bottom: 18px;
}
.ij-arch__volhead h2 {
  font-family: var(--ij-fd);
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}
.ij-arch__volhead h2 span {
  font-family: var(--ij-fd);
  font-weight: 400;
  color: var(--ij-muted);
}
.ij-arch__volmeta {
  font-family: var(--ij-fs);
  font-size: 12.5px;
  color: var(--ij-muted);
}
.ij-arch__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.ij-arch__card {
  display: block;
  background: #fff;
  border: 1px solid var(--ij-rule);
  border-top: 3px solid var(--ij-rule);
  border-radius: 2px;
  padding: 16px 18px;
  text-decoration: none !important;
  transition: border-color 120ms, box-shadow 120ms;
}
.ij-arch__card:hover {
  border-color: var(--ij-accent);
  box-shadow: 0 8px 20px -14px rgba(0,0,0,0.25);
}
.ij-arch__card.is-current { border-top-color: var(--ij-accent); }
.ij-arch__cardlabel {
  font-family: var(--ij-fs);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ij-muted);
  margin-bottom: 6px;
}
.ij-arch__cardtitle {
  font-family: var(--ij-fd);
  font-size: 19px;
  font-weight: 600;
  color: var(--ij-ink);
  margin-bottom: 8px;
}
.ij-arch__cardmeta {
  font-family: var(--ij-fs);
  font-size: 12.5px;
  color: var(--ij-muted);
}
.ij-arch__cardcurrent {
  color: var(--ij-accent);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
}
/* Hide the stock OJS issue list on the archive page - the volume groups replace it */
.ij-arch .issues_archive, .ij-arch .cmp_pagination { display: none; }

/* ══ Design-handoff tokens (issue listing 1b + article 2a) ══ */
:root {
  --dh-ink: #1B1815;
  --dh-body: #26221E;
  --dh-sec: #3A342D;
  --dh-sec2: #4A443C;
  --dh-muted: #6B635A;
  --dh-faint: #A79E92;
  --dh-accent: #28538C;
  --dh-accent-hover: #173966;
  --dh-rail-bg: #FAFAF9;
  --dh-soft: #F7F6F4;
  --dh-chipbg: #F4F4F2;
  --dh-border: #E6E5E1;
  --dh-hairline: #EBEAE6;
  --dh-ctrl: #DBD9D4;
  --dh-chipborder: #E4E3DF;
  --dh-spectral: "Spectral", Georgia, serif;
  --dh-barlow: "Barlow", system-ui, sans-serif;
  --dh-mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* ── Issue listing (1b) ── */
.ijt-mast {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: center;
  padding: 36px 32px;
  border-bottom: 1px solid var(--dh-border);
}
.ijt-eyebrow {
  font-family: var(--dh-barlow);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dh-accent);
  margin-bottom: 12px;
}
.ijt-title {
  font-family: var(--dh-spectral) !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;
  color: var(--dh-ink) !important;
  margin: 0 !important;
}
.ijt-title span { color: var(--dh-faint); }
.ijt-note {
  font-family: var(--dh-spectral);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--dh-sec);
  max-width: 62ch;
  margin-top: 14px;
}
.ijt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.ijt-chip {
  font-family: var(--dh-mono);
  font-size: 11.5px;
  color: var(--dh-sec2);
  border: 1px solid var(--dh-ctrl);
  padding: 4px 8px;
}
.ijt-mast__meta {
  border-left: 1px solid var(--dh-border);
  padding-left: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ijt-mmrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ijt-mml {
  font-family: var(--dh-barlow);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dh-muted);
}
.ijt-mmv {
  font-family: var(--dh-spectral);
  font-size: 19px;
  font-weight: 600;
  color: var(--dh-ink);
  font-variant-numeric: tabular-nums;
}
.ijt-mast__meta { max-width: 300px; justify-self: end; width: 100%; }
.ijt-mmrow { border-bottom: 1px solid var(--dh-hairline); padding-bottom: 10px; }
.ijt-mmrow:last-child { border-bottom: 0; padding-bottom: 0; }
/* Let the body grid absorb the page's stretch so the rail reaches the footer */
/* Same rule as the article page: no min-height/flex growth chain here, or
   the sticky rail and the footer fight each other during scrolling. */
.ijt-body {
  display: grid;
  grid-template-columns: 1fr 268px;
  align-items: stretch;
}
.ijt-main { padding: 34px 40px 48px 32px; }
.ijt-sechead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--dh-ink);
  padding-bottom: 12px;
}
.ijt-sectitle {
  font-family: var(--dh-spectral);
  font-size: 22px;
  font-weight: 700;
  color: var(--dh-ink);
  margin: 0;
}
.ijt-sectitle span { font-weight: 400; color: var(--dh-faint); }
.ijt-controls { display: flex; gap: 8px; }
.ijt-controls input[type="search"] {
  width: 190px;
  border: 1px solid var(--dh-ctrl);
  background: #fff;
  padding: 6px 12px;
  font-family: var(--dh-barlow);
  font-size: 13px;
  color: var(--dh-ink);
}
.ijt-controls input::placeholder { color: #9A9288; }
.ijt-controls select {
  border: 1px solid var(--dh-ctrl);
  background: #fff;
  padding: 6px 12px;
  font-family: var(--dh-barlow);
  font-size: 13px;
  font-weight: 500;
  color: var(--dh-ink);
}
/* Section grouping inside an issue (Articles / Book Reviews / ...) */
.ijt-secgroup {
  font-family: var(--dh-spectral);
  font-size: 19px;
  font-weight: 600;
  color: var(--dh-ink);
  border-bottom: 1px solid var(--dh-ink);
  padding: 22px 0 8px;
  margin-bottom: 4px;
}
.ijt-row { padding: 22px 0; border-bottom: 1px solid var(--dh-hairline); }
.ijt-row:hover { background: var(--dh-rail-bg); }
.ijt-row__grid {
  display: grid;
  grid-template-columns: 1fr 104px;
  gap: 20px;
  align-items: baseline;
}
.ijt-row__title {
  font-family: var(--dh-spectral);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--dh-accent) !important;
  text-decoration: none;
}
.ijt-row__title:hover { color: var(--dh-accent-hover) !important; text-decoration: underline; }
.ijt-row__authors {
  font-family: var(--dh-barlow);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--dh-ink);
  margin-top: 8px;
}
/* Affiliation text: identical whether it sits on its own line (single
   institution) or trails an author name after a comma (institutions differ).
   One rule for both so the two layouts can never drift apart. */
.ijt-row__affil,
.ijt-row__auaff {
  font-family: var(--dh-spectral);
  font-size: 13.5px;
  font-style: italic;
  font-weight: 400;
  color: var(--dh-muted);
}
.ijt-row__affil {
  margin-top: 3px;
}
/* One line per author; only the position changes, not the type. */
.ijt-row__aline + .ijt-row__aline {
  margin-top: 3px;
}
.ijt-row__pages { text-align: right; }
.ijt-row__pageslabel {
  display: block;
  font-family: var(--dh-barlow);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dh-faint);
}
.ijt-row__pagesv {
  font-family: var(--dh-spectral);
  font-size: 16px;
  color: var(--dh-ink);
  font-variant-numeric: tabular-nums;
}
.ijt-row__abs {
  font-family: var(--dh-spectral);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--dh-sec);
  border-left: 2px solid var(--dh-ctrl);
  padding-left: 16px;
  margin-top: 14px;
  /* Fill the row instead of stopping at 78ch: the abstract sits under a
     full-width title, and a half-width block left the row looking broken.
     The right padding matches the pages column + gap so its right edge
     lines up with the title above it. */
  max-width: none;
  padding-right: 124px;
  text-align: justify;
  hyphens: auto;
}
.ijt-row__kw { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ijt-kwchip {
  background: var(--dh-chipbg);
  border: 1px solid var(--dh-chipborder);
  padding: 4px 9px;
  font-family: var(--dh-barlow);
  font-size: 12px;
  color: var(--dh-sec2);
}
.ijt-row__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
}
.ijt-row__links { display: flex; gap: 16px; align-items: center; }
.ijt-act {
  font-family: var(--dh-barlow);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none !important;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.ijt-act--primary { color: var(--dh-accent) !important; }
.ijt-act--primary:hover { color: var(--dh-accent-hover) !important; }
.ijt-act--muted { color: var(--dh-muted) !important; }
.ijt-act--toggle {
  color: var(--dh-accent);
  border-bottom: 1px dotted var(--dh-accent);
}
.ijt-row__stats {
  font-family: var(--dh-barlow);
  font-size: 12.5px;
  color: var(--dh-muted);
  font-variant-numeric: tabular-nums;
}
.ijt-row__stats b {
  font-family: var(--dh-spectral);
  font-size: 15px;
  font-weight: 600;
  color: var(--dh-ink);
  margin-right: 3px;
}
.ijt-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.ijt-showing {
  font-family: var(--dh-barlow);
  font-size: 13.5px;
  color: var(--dh-muted);
}
.ijt-pages { display: flex; gap: 6px; }
.ijt-pagebtn {
  font-family: var(--dh-barlow);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 13px;
  border: 1px solid var(--dh-ctrl);
  background: #fff;
  color: var(--dh-ink);
  cursor: pointer;
}
.ijt-pagebtn.is-current {
  background: var(--dh-accent);
  border-color: var(--dh-accent);
  color: #FFFFFF;
}
.ijt-rail {
  border-left: 1px solid var(--dh-border);
  background: var(--dh-rail-bg);
  padding: 46px 28px 34px 28px;
  align-self: stretch;
}
.ijt-rail__inner {
  align-self: start;
  overflow-anchor: none;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.ijt-rail__inner { position: sticky; top: 24px; }
.ijt-railblock + .ijt-railblock {
  border-top: 1px solid var(--dh-border);
  padding-top: 22px;
}
.ijt-raillabel {
  font-family: var(--dh-barlow);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dh-muted);
  margin-bottom: 12px;
}
.ijt-raillabel--accent { color: var(--dh-accent); }
.ijt-railbtn {
  display: block;
  text-align: center;
  font-family: var(--dh-barlow);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--dh-accent);
  color: #FFFFFF !important;
  border: 1px solid var(--dh-accent);
  text-decoration: none !important;
}
.ijt-railbtn:hover { background: var(--dh-accent-hover); border-color: var(--dh-accent-hover); }
.ijt-railbtn--outline { background: transparent; color: var(--dh-accent) !important; }
.ijt-railbtn--outline:hover { background: var(--dh-accent); color: #FFFFFF !important; }
.ijt-railhelp {
  font-family: var(--dh-barlow);
  font-size: 12.5px;
  color: var(--dh-muted);
}
.ijt-railrow {
  display: flex;
  justify-content: space-between;
  font-family: var(--dh-barlow);
  font-size: 13.5px;
  padding: 4px 0;
}
.ijt-railrow span { color: var(--dh-muted); }
.ijt-railrow strong { color: var(--dh-sec); font-weight: 600; }
.ijt-raillink {
  display: block;
  font-family: var(--dh-barlow);
  font-size: 13.5px;
  color: var(--dh-ink) !important;
  text-decoration: none;
  padding: 4.5px 0;
}
.ijt-raillink:hover { color: var(--dh-accent) !important; }
.ijt-raillink--all { color: var(--dh-muted) !important; }
@media (max-width: 1024px) {
  .ijt-mast { grid-template-columns: 1fr; }
  .ijt-mast__meta { border-left: 0; padding-left: 0; }
  .ijt-body { grid-template-columns: 1fr; }
  .ijt-rail { border-left: 0; padding-left: 0; }
  .ijt-rail__inner { position: static; }
  .ijt-main { padding-right: 0; }
  /* Stacked row anatomy applies through the tablet range too */
  .ijt-row__abs { padding-right: 0; text-align: left; hyphens: manual; }
  .ij2-abstract { text-align: left; hyphens: manual; }
  .ijt-row__grid { grid-template-columns: 1fr; gap: 4px; }
  .ijt-row__pages { text-align: left; margin-top: 8px; }
  .ijt-row__pageslabel { display: none; }
  .ijt-row__pagesv::before { content: "pp. "; }
}
/* ══ Mobile layer (design handoff 4A/4B/4C, <640px) ══ */
@media (max-width: 640px) {

  body { overflow-x: hidden; }

  /* Global: 18px gutters, mobile type scale */
  .ijh-crumbband .cmp_breadcrumbs { padding: 10px 18px; font-size: 12.5px; }
  /* Breadcrumbs: keep the last two crumbs only */
  .ijh-crumbband .cmp_breadcrumbs li:not(:nth-last-child(-n+3)) { display: none; }
  /* Breadcrumb drops entirely on mobile article pages */
  .pkp_page_article .ijh-crumbband { display: none; }

  /* Sticky rail relaxes when stacked below content */
  .ijt-rail__inner { position: static; }
  /* Pages read inline: "pp. 1752-1771" */
  .ijt-row__pageslabel { display: none; }
  .ijt-row__pagesv::before { content: "pp. "; }

  /* ── 4B issue masthead ── */
  .ijt-mast { grid-template-columns: 1fr; padding: 26px 18px 20px; gap: 18px; }
  .ijt-title { font-size: 30px !important; line-height: 1.14 !important; }
  .ijt-note { font-size: 15.5px; }
  /* Stat triple: Articles / Published / ISSN */
  .ijt-mast__meta {
    border-left: 0; padding-left: 0; max-width: none; justify-self: stretch;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    border-top: 1px solid var(--dh-hairline); padding-top: 16px;
  }
  .ijt-mmrow {
    display: flex; flex-direction: column-reverse; align-items: flex-start;
    gap: 2px; border-bottom: 0; padding-bottom: 0;
  }
  .ijt-mml { font-size: 10.5px; }
  .ijt-mmv { font-size: 21px; }

  /* Controls: full-width search, sort right */
  .ijt-sechead { padding: 0 0 12px; }
  /* Search + sort share one row */
  .ijt-controls { width: 100%; flex-direction: row; align-items: center; gap: 8px; }
  .ijt-controls input[type="search"] { flex: 1 1 auto; width: auto; min-width: 0; padding: 11px 12px; }
  .ijt-controls select { flex: 0 0 auto; align-self: auto; }

  /* Rows: stacked, action buttons as real touch targets */
  .ijt-main { padding: 4px 18px 22px; }
  .ijt-row { padding: 18px 0; }
  .ijt-row__title { font-size: 18.5px !important; line-height: 1.32 !important; }
  .ijt-row__authors { font-size: 13.5px; margin-top: 7px; }
  .ijt-row__affil { font-size: 13px; }
  .ijt-row__links { gap: 8px; width: 100%; }
  .ijt-act {
    font-size: 12px !important;
    padding: 10px 14px !important;
    border: 1px solid var(--dh-ctrl) !important;
  }
  .ijt-act--primary {
    background: var(--dh-accent) !important;
    border-color: var(--dh-accent) !important;
    color: #FFFFFF !important;
  }
  .ijt-act--toggle { border-bottom: 1px solid var(--dh-ctrl) !important; }

  /* Pagination: centered column */
  .ijt-pagination { flex-direction: column; align-items: center; gap: 12px; }
  .ijt-pagebtn { padding: 9px 14px; }

  /* Below-content rail */
  .ijt-rail { padding: 22px 18px; gap: 20px; border-left: 0; border-top: 1px solid var(--dh-border); }
  .ijt-railblock + .ijt-railblock { padding-top: 18px; }
  .ijt-railbtn { padding: 13px; }

  /* ── 4C article page ── */
  .ij2-head { padding: 24px 18px 20px; }
  .ij2-eyebrow { font-size: 11px; gap: 8px; }
  .ij2-title { font-size: 27px !important; line-height: 1.2 !important; letter-spacing: -0.012em !important; }
  .ij2-author__avatar { width: 36px; height: 36px; font-size: 14px; }
  .ij2-author__name { font-size: 15px; }
  .ij2-author__affil { font-size: 13.5px; line-height: 1.45; overflow-wrap: break-word; }
  .ij2-author__role { display: none; }   /* role tag drops on mobile */
  /* Byline stacks; drawer becomes a single column */
  .ij2-byline { gap: 12px 16px; padding: 14px 0; }
  .ij2-byline__toggle { margin-left: 0; padding-left: 0; }
  .ij2-drawer { grid-template-columns: 1fr; padding: 18px; gap: 16px; margin-bottom: 20px; }
  .ij2-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .ij2-actions__btns { width: 100%; }
  .ij2-btn, .ij2-splitbtn__main { padding: 13px 16px; }
  /* Stats as a triple row */
  .ij2-stats {
    width: 100%;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    border-top: 1px solid var(--dh-hairline); padding-top: 16px;
  }
  .ij2-stat { display: flex; flex-direction: column-reverse; gap: 2px; font-size: 11.5px; }
  .ij2-stat__n { font-size: 19px; margin-right: 0; }
  .ij2-main { padding: 24px 18px 40px; }
  .ij2-abstract { font-size: 16.5px; line-height: 1.7; }
  .ij2-refs { font-size: 14.5px; line-height: 1.55; }
  .ij2-citebox { font-size: 14px; padding: 14px; }
  #ij2Ris { display: none; }             /* RIS drops on mobile */
  .ij2-rail { padding: 22px 18px; gap: 20px; border-left: 0; border-top: 1px solid var(--dh-border); }
  .ij2-railblock + .ij2-railblock { padding-top: 18px; }

  /* ── 4A archive page ── */
  .ij-arch { padding: 26px 18px 30px; }
  .ij-arch__hero { flex-direction: column; align-items: stretch; gap: 16px; padding: 0 0 20px; }
  .ij-arch__hero h1 { font-size: 30px; line-height: 1.14; }
  .ij-arch__tagline { font-size: 15.5px; }
  .ij-arch__stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    border-top: 1px solid #EBEAE6; padding-top: 16px;
  }
  .ij-arch__stat { text-align: left; }
  .ij-arch__statv { font-size: 21px; }
  .ij-arch__statl { font-size: 10.5px; }
  .ij-arch__toolbar { flex-direction: column; align-items: stretch; gap: 10px; min-width: 0; }
  .ij-arch__toolbar > * { min-width: 0; }
  .ij-arch__search { width: 100%; }
  .ij-arch__search input { width: 100%; padding: 11px 12px; }
  /* Year chips: one scrollable row, contained */
  .ij-arch__chips { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; padding-bottom: 4px; }
  .ij-arch__chips::-webkit-scrollbar { display: none; }
  .ij-arch__chip { white-space: nowrap; padding: 8px 14px; }
  .ij-arch__current { flex-direction: column; align-items: stretch; padding: 22px 18px; }
  .ij-arch__curactions { flex-direction: column; gap: 8px; }
  .ij-arch__curbtn { padding: 13px; }
  .ij-arch__curtitle { font-size: 23px; line-height: 1.2; }
  .ij-arch__volhead h2 { font-size: 20px; }
  .ij-arch__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ij-arch__card { padding: 14px; }
  .ij-arch__cardlabel { font-family: var(--dh-mono); font-size: 11px; }
  .ij-arch__cardtitle { font-size: 16.5px; }
  .ij-arch__cardmeta { font-size: 12.5px; }
}

/* Metadata labels */
.obj_article_details .label {
  font-family: var(--ij-fs);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ij-muted);
}

/* Thick maroon rule under the site header, as on ijlsi.com */
.ijh-wrap {
  border-bottom: 4px solid var(--ij-accent) !important;
}

/* Breadcrumbs: full-width sunken band under the header, WP style */
.ijh-crumbband {
  background: var(--ij-paper-s);
  border-bottom: 1px solid var(--ij-rule);
}
.ijh-crumbband .cmp_breadcrumbs {
  max-width: none;
  margin: 0;
  padding: 11px 32px;
}
.ijh-crumbband .cmp_breadcrumbs ol,
.ijh-crumbband .cmp_breadcrumbs ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.ijh-crumbband .cmp_breadcrumbs li {
  display: inline;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4;
}
.ijh-crumbband .cmp_breadcrumbs h1,
.ijh-crumbband .cmp_breadcrumbs .current h1 {
  display: inline;
  font-size: 13.5px;
  font-family: var(--ij-fs);
  font-weight: 400;
  margin: 0;
  line-height: 1.4;
}
/* Hide the breadcrumb OJS renders inside the content column - the band above replaces it */
.pkp_structure_main .cmp_breadcrumbs {
  display: none;
}
.cmp_breadcrumbs {
  font-family: var(--ij-fs);
  font-size: 13.5px;
}
.cmp_breadcrumbs ol,
.cmp_breadcrumbs ul {
  margin: 0;
  padding: 0;
}
.cmp_breadcrumbs a {
  color: var(--ij-accent);
  text-decoration: none;
}
.cmp_breadcrumbs a:hover {
  color: var(--ij-accent-ink);
  text-decoration: underline;
}
.cmp_breadcrumbs .current,
.cmp_breadcrumbs [aria-current] {
  color: var(--ij-ink);
}
.cmp_breadcrumbs .separator {
  font-size: 0;
  margin: 0 8px;
}
.cmp_breadcrumbs .separator::before {
  content: "\203A";
  font-size: 13.5px;
  color: var(--ij-muted);
}
.pkp_structure_footer_wrapper { display: none; }



/* ------------------------------------------------------------------
 * Design tokens for the IJLSI chrome below.
 *
 * The chrome rules reference these by var(); on the WordPress site they are
 * declared in a separate <style> block that is not part of this stylesheet.
 * Values mirror the live site's computed :root -- keep them in step if the
 * WordPress palette changes.
 * ------------------------------------------------------------------ */
:root {
  --sans: "Barlow", system-ui, sans-serif;
  --serif-display: "Spectral", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --paper: #ffffff;
  --paper-sunk: oklch(0.966 0.005 80);
  --surface: oklch(0.998 0.002 80);
  --ink: oklch(0.19 0.012 265);
  --ink-soft: oklch(0.34 0.014 265);
  --muted: oklch(0.52 0.012 265);
  --rule-strong: oklch(0.74 0.01 265);
  --accent: oklch(0.40 0.115 249);
  --accent-ink: oklch(0.32 0.11 249);
  --accent-line: oklch(0.83 0.06 249);
  /* --rule is declared in the ported stylesheet only inside .ijh-wrap, IJLMH's
     header wrapper, which IJLSI's markup does not contain -- so every
     `1px solid var(--rule)` in header scope resolved to nothing and the whole
     declaration was dropped, losing the masthead's bottom border and its other
     hairlines. The footer declares its own --rule on .ijf and still wins there. */
  --rule: oklch(0.87 0.006 265);
  --maxw: 1280px;
  --gutter: clamp(20px, 4vw, 40px);
}
/* ============================================================
 * IJLSI site chrome, lifted verbatim from the live WordPress site so the
 * OJS pages carry the same masthead and footer. Re-extract from the
 * homepage if the WordPress design changes.
 * ============================================================ */

.ijlsi-mh{display:contents;}
.ijlsi-mh *,.ijlsi-mh *::before,.ijlsi-mh *::after{box-sizing:border-box;}
.ijlsi-mh a{text-decoration:none;color:inherit;}

/* Top utility bar */
.ijlsi-mh .ijm-topbar{background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:12.5px;}
.ijlsi-mh .ijm-topbar__in{max-width:var(--maxw);margin-inline:auto;padding:7px var(--gutter);display:flex;align-items:center;gap:16px;}
.ijlsi-mh .ijm-topbar a,.ijlsi-mh .ijm-index{color:color-mix(in oklch,var(--paper) 82%,transparent);display:inline-flex;align-items:center;gap:6px;min-width:0;}
.ijlsi-mh .ijm-topbar a:hover{color:var(--paper);}
.ijlsi-mh .ijm-spacer{margin-left:auto;}
.ijlsi-mh .ijm-topbar svg{width:13px;height:13px;flex:none;}
.ijlsi-mh .ijm-issn,.ijlsi-mh .ijm-est{font-family:var(--mono);letter-spacing:0.04em;white-space:nowrap;flex:none;}
.ijlsi-mh .ijm-est{color:color-mix(in oklch,var(--paper) 82%,transparent);}
.ijlsi-mh .ijm-index{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media(max-width:860px){.ijlsi-mh .ijm-index{display:none !important;}}
@media(max-width:560px){
  .ijlsi-mh .ijm-topbar__in{gap:0;justify-content:space-between;padding:6px var(--gutter);}
  .ijlsi-mh .ijm-vlink{display:none !important;}
  .ijlsi-mh .ijm-spacer{display:none;}
  .ijlsi-mh .ijm-issn,.ijlsi-mh .ijm-est{font-size:11px;}
}

/* Main sticky bar */
.ijlsi-mh .ijm-bar{position:sticky;top:0;z-index:40;background:color-mix(in oklch,var(--paper) 92%,transparent);backdrop-filter:saturate(150%) blur(10px);-webkit-backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--rule);}
.admin-bar .ijlsi-mh .ijm-bar{top:32px;}@media(max-width:782px){.admin-bar .ijlsi-mh .ijm-bar{top:46px;}}
.ijlsi-mh .ijm-bar__in{max-width:var(--maxw);margin-inline:auto;padding:12px var(--gutter);display:flex;align-items:center;gap:20px;}

/* Brand */
.ijlsi-mh .ijm-brand{display:flex;align-items:center;gap:12px;flex:none;}
.ijlsi-mh .ijm-mark{width:44px;height:44px;flex:none;border:1.5px solid var(--accent);color:var(--accent)!important;display:grid;place-items:center;font-family:var(--serif-display);font-weight:600;font-size:19px;background:var(--surface);position:relative;}
.ijlsi-mh .ijm-mark::after{content:"";position:absolute;inset:3px;border:1px solid var(--accent-line);}
.ijlsi-mh .ijm-words{display:flex;flex-direction:column;line-height:1.1;}
.ijlsi-mh .ijm-title{font-family:var(--serif-display);font-weight:600;font-size:19px;letter-spacing:0.01em;color:var(--ink)!important;}
.ijlsi-mh .ijm-sub{font-family:var(--sans);font-size:9.5px;letter-spacing:0.13em;text-transform:uppercase;color:var(--muted)!important;margin-top:3px;white-space:nowrap;}

/* Desktop nav */
.ijlsi-mh .ijm-nav{margin-left:auto;}
.ijlsi-mh .ijm-menu{display:flex;gap:22px;align-items:center;list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:14px;}
.ijlsi-mh .ijm-menu li{position:relative;}
.ijlsi-mh .ijm-menu a{color:var(--ink-soft)!important;padding:6px 0;display:inline-flex;align-items:center;gap:5px;}
.ijlsi-mh .ijm-menu a:hover,.ijlsi-mh .ijm-menu .current-menu-item>a,.ijlsi-mh .ijm-menu .current-menu-ancestor>a{color:var(--ink)!important;}
.ijlsi-mh .ijm-menu .menu-item-has-children>a::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:0.55;margin-left:4px;}
.ijlsi-mh .ijm-menu .sub-menu{position:absolute;top:calc(100% + 14px);left:-14px;min-width:230px;background:var(--surface);border:1px solid var(--rule);box-shadow:0 20px 50px -24px oklch(0.2 0.02 265/0.4);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .16s;border-radius:3px;list-style:none;}
.ijlsi-mh .ijm-menu li:hover>.sub-menu,.ijlsi-mh .ijm-menu li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none;}
.ijlsi-mh .ijm-menu .sub-menu a{display:block;padding:9px 12px;font-size:13.5px;border-radius:2px;}
.ijlsi-mh .ijm-menu .sub-menu a:hover{background:var(--paper-sunk);color:var(--ink)!important;}

/* CTA */
.ijlsi-mh .ijm-cta{display:flex;align-items:center;gap:10px;flex:none;}
.ijlsi-mh .ijm-btn{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:0.005em;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border:1px solid transparent;border-radius:7px;transition:background .18s,color .18s,border-color .18s,box-shadow .2s;white-space:nowrap;cursor:pointer;}
.ijlsi-mh .ijm-btn svg{width:16px;height:16px;flex:none;}
.ijlsi-mh .ijm-btn--primary{background:var(--accent);color:#fff!important;box-shadow:0 1px 2px oklch(0.2 0.06 265/0.16);}
.ijlsi-mh .ijm-btn--primary:hover{background:var(--accent-ink);box-shadow:0 8px 18px -9px var(--accent);}
.ijlsi-mh .ijm-btn--ghost{border-color:var(--rule-strong);color:var(--ink)!important;background:none;}
.ijlsi-mh .ijm-btn--ghost:hover{border-color:var(--ink);}
.ijlsi-mh .ijm-toggle{display:none;width:44px;padding:0;}
.ijlsi-mh .ijm-toggle svg{width:20px;height:20px;}
.ijlsi-mh .ijm-toggle .ijm-x{display:none;}
.ijlsi-mh .ijm-toggle[aria-expanded="true"] .ijm-burger{display:none;}
.ijlsi-mh .ijm-toggle[aria-expanded="true"] .ijm-x{display:block;}

/* Action buttons that live only inside the mobile panel */
.ijlsi-mh .ijm-mobile-actions{display:none;}

/* Tablet / mobile */
@media(max-width:980px){
  .ijlsi-mh .ijm-nav{display:none;position:absolute;left:0;right:0;top:100%;margin:0;background:var(--surface);border-bottom:1px solid var(--rule);box-shadow:0 24px 48px -30px oklch(0.2 0.02 265/0.55);padding:6px var(--gutter) 20px;max-height:calc(100vh - 118px);max-height:calc(100dvh - 118px);overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .ijlsi-mh .ijm-nav.is-open{display:block;}
  .ijlsi-mh .ijm-menu{flex-direction:column;align-items:stretch;gap:0;font-size:15.5px;}
  .ijlsi-mh .ijm-menu>li>a{padding:14px 2px;border-bottom:1px solid var(--rule);}
  .ijlsi-mh .ijm-menu .menu-item-has-children>a::after{margin-left:auto;transition:transform .2s;}
  .ijlsi-mh .ijm-menu li.ijm-open>a::after{transform:rotate(-135deg);}
  .ijlsi-mh .ijm-menu .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:none;padding:2px 0 8px 14px;min-width:0;display:none;}
  .ijlsi-mh .ijm-menu li.ijm-open>.sub-menu{display:block;}
  .ijlsi-mh .ijm-menu .sub-menu a{padding:11px 2px;font-size:14px;color:var(--muted)!important;}
  .ijlsi-mh .ijm-cta{margin-left:auto;}
  .ijlsi-mh .ijm-cta-extra{display:none;}
  .ijlsi-mh .ijm-toggle{display:inline-flex;}
  .ijlsi-mh .ijm-mobile-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;}
  .ijlsi-mh .ijm-mobile-actions .ijm-btn{width:100%;height:48px;font-size:14px;}
  .ijlsi-mh .ijm-mobile-actions .ijm-full{grid-column:1 / -1;}
}
@media(max-width:560px){
  .ijlsi-mh .ijm-bar__in{gap:12px;padding:11px var(--gutter);}
}
@media(max-width:400px){
  .ijlsi-mh .ijm-sub{display:none;}
  .ijlsi-mh .ijm-btn--primary .ijm-btn-full{display:none;}
}


.ijf{
  --dark:oklch(0.14 0.02 250); --dark-s:oklch(0.18 0.02 250); --dark-d:oklch(0.11 0.025 250);
  --light:oklch(0.88 0.005 80); --light-m:oklch(0.68 0.008 80); --light-f:oklch(0.48 0.007 80);
  --acc:oklch(0.55 0.14 249); --acc-s:oklch(0.42 0.15 249); --acc-b:oklch(0.38 0.12 249);
  --rule:oklch(0.24 0.015 250);
  --fd:"Newsreader",Georgia,serif; --fs:"IBM Plex Sans",system-ui,sans-serif; --fm:"IBM Plex Mono",monospace;
  --r:4px;
  background:var(--dark); color:var(--light); font-family:var(--fs); line-height:1.6; -webkit-font-smoothing:antialiased;
}
.ijf *,.ijf *::before,.ijf *::after{box-sizing:border-box;margin:0;padding:0;}
.ijf a{color:var(--light-m);text-decoration:none;transition:color .15s;}
.ijf a:hover{color:var(--acc);text-decoration:none;}
.ijf-intro{background:var(--dark-d);border-bottom:1px solid var(--rule);padding:28px 48px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
.ijf-brand{display:flex;flex-direction:column;gap:4px;}
.ijf-brand-name{font-family:var(--fd);font-size:1.1rem;font-weight:400;color:var(--light);line-height:1.2;}
.ijf-brand-tag{font-family:var(--fs);font-size:11.5px;color:var(--light-f);line-height:1.4;}
.ijf-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ijf-badge{font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--light-f);padding:4px 10px;border:1px solid var(--rule);border-radius:2px;white-space:nowrap;}
.ijf-badge.accent{color:var(--acc);border-color:var(--acc-b);background:oklch(0.20 0.03 249);}
.ijf-main{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:0;padding:40px 48px;border-bottom:1px solid var(--rule);}
.ijf-col{padding:0 28px 0 0;}
.ijf-col:last-child{padding-right:0;}
.ijf-col+.ijf-col{padding-left:28px;border-left:1px solid var(--rule);}
.ijf-col-head{font-family:var(--fd);font-size:1rem;font-weight:400;color:var(--light);margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--rule);line-height:1.3;}
.ijf-links{list-style:none;display:flex;flex-direction:column;gap:2px;}
.ijf-links li a{font-family:var(--fs);font-size:13px;color:var(--light-m);display:block;padding:5px 0;transition:color .15s,padding-left .12s;}
.ijf-links li a:hover{color:var(--acc);padding-left:4px;}
.ijf-contact-item{display:flex;gap:10px;align-items:flex-start;padding:6px 0;font-size:13px;color:var(--light-m);border-bottom:1px solid var(--rule);}
.ijf-contact-item:last-child{border-bottom:none;}
.ijf-contact-label{font-family:var(--fm);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--light-f);flex-shrink:0;padding-top:2px;min-width:58px;}
.ijf-contact-val{color:var(--light-m);line-height:1.5;}
.ijf-contact-val a{color:var(--acc);}
.ijf-issues{display:flex;flex-direction:column;gap:6px;}
.ijf-issue{font-family:var(--fs);font-size:12.5px;color:var(--light-m);padding:7px 12px;background:var(--dark-s);border:1px solid var(--rule);border-radius:var(--r);display:flex;justify-content:space-between;align-items:center;transition:border-color .15s,color .15s;}
.ijf-issue:hover{border-color:var(--acc-b);color:var(--acc);}
.ijf-issue a{color:inherit;display:flex;justify-content:space-between;align-items:center;width:100%;}
.ijf-issue-arr{font-size:11px;opacity:.5;}
.ijf-issue.current{border-color:var(--acc-b);background:oklch(0.18 0.03 249);}
.ijf-issue.current .ijf-issue-badge{font-family:var(--fm);font-size:9px;letter-spacing:.08em;text-transform:uppercase;background:var(--acc-s);color:#fff;padding:1px 6px;border-radius:2px;}
.ijf-bottom{padding:16px 48px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:var(--dark-d);}
.ijf-policy-links{display:flex;align-items:center;gap:0;flex-wrap:wrap;}
.ijf-policy-links a{font-family:var(--fs);font-size:12px;color:var(--light-f);padding:3px 10px;border-right:1px solid var(--rule);white-space:nowrap;}
.ijf-policy-links a:first-child{padding-left:0;}
.ijf-policy-links a:last-child{border-right:none;}
.ijf-policy-links a:hover{color:var(--acc);}
.ijf-copy-row{padding:14px 48px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--rule);}
.ijf-copy{font-family:var(--fs);font-size:12px;color:var(--light-f);line-height:1.5;}
.ijf-copy strong{color:var(--light-m);}
.ijf-social{display:flex;gap:8px;align-items:center;}
.ijf-social-link{width:32px;height:32px;border-radius:50%;background:var(--dark-s);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;color:var(--light-m);text-decoration:none;}
.ijf-social-link:hover{background:oklch(0.22 0.03 249);border-color:var(--acc-b);color:var(--acc);}
.ijf-social-link svg{width:14px;height:14px;fill:currentColor;}
.ijf-accent-bar{height:3px;background:linear-gradient(90deg, var(--acc-s) 0%, oklch(0.52 0.10 249) 60%, transparent 100%);}
@media(max-width:900px){.ijf-main{grid-template-columns:1fr 1fr;}.ijf-col{padding:22px 0;}.ijf-col+.ijf-col{border-left:none;padding-left:0;border-top:1px solid var(--rule);}.ijf-intro,.ijf-main,.ijf-bottom,.ijf-copy-row{padding-left:24px;padding-right:24px;}}
@media(max-width:600px){.ijf-main{grid-template-columns:1fr;padding:0 18px;}.ijf-col{padding:18px 0;}.ijf-intro{flex-direction:column;align-items:flex-start;padding:20px 18px;gap:14px;}.ijf-brand-name{font-size:1rem;}.ijf-badges{gap:6px;}.ijf-badge{font-size:9px;padding:3px 8px;}.ijf-col-head{font-size:.95rem;margin-bottom:12px;padding-bottom:10px;}.ijf-links li a{font-size:12.5px;padding:4px 0;}.ijf-issue{padding:6px 10px;}.ijf-issue a{font-size:12.5px;}.ijf-contact-item{font-size:12.5px;}.ijf-contact-label{min-width:52px;font-size:9px;}.ijf-col [href*="submission"]{display:block !important;text-align:center;margin-top:12px;}.ijf-bottom{flex-direction:column;align-items:flex-start;padding:14px 18px;gap:14px;}.ijf-policy-links{display:flex;flex-wrap:wrap;gap:0;}.ijf-policy-links a{font-size:11.5px;padding:4px 9px;border-right:1px solid var(--rule);}.ijf-policy-links a:first-child{padding-left:0;}.ijf-social{gap:6px;}.ijf-social-link{width:30px;height:30px;}.ijf-social-link svg{width:13px;height:13px;}.ijf-copy-row{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 18px;}.ijf-copy{font-size:11.5px;line-height:1.6;}.ijf-copy:last-child{text-align:left !important;}}
@media(max-width:380px){.ijf-brand-name{font-size:.95rem;}.ijf-badge{font-size:8.5px;padding:2px 7px;}.ijf-links li a{font-size:12px;}.ijf-copy{font-size:11px;}.ijf-policy-links a{font-size:11px;padding:4px 7px;}}



/* ------------------------------------------------------------------
 * OJS accessibility skip links.
 *
 * OJS renders "Skip to main content / navigation / footer" anchors at the very
 * top of every page. The stock theme hides them until focused; this theme
 * overrides the templates and shipped no rule for them, so they rendered as
 * three visible blue links above the masthead.
 *
 * Hidden by POSITION, not display:none or visibility:hidden -- those would take
 * them out of the tab order and defeat their purpose. They reappear on focus.
 * ------------------------------------------------------------------ */
a.cmp_skip_to_content,
.cmp_skip_to_content a {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

a.cmp_skip_to_content:focus,
.cmp_skip_to_content a:focus {
  position: fixed;
  left: 8px;
  top: 8px;
  z-index: 100000;
  width: auto;
  height: auto;
  padding: 10px 16px;
  overflow: visible;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  outline: 2px solid #fff;
  outline-offset: -4px;
}


/* ------------------------------------------------------------------
 * Chrome line-height parity with WordPress.
 *
 * The header and footer markup is lifted verbatim from ijlsi.com, but their
 * vertical rhythm came from values they INHERITED there and nothing supplies
 * here. On WordPress, Divi sets body to 14px/1.7, which computes to 23.8px and
 * is inherited by descendants as a pixel value, and links resolve to 26px. OJS
 * inherits its own base instead, so every row came out short: the top bar 34px
 * against 38, the nav 32 against 38, footer links 31 against 36.
 *
 * Pinned in pixels rather than as a ratio on purpose -- a ratio would be
 * recomputed against each element's own font-size (the 12.5px top bar would land
 * at 21.25px, not 23.8px), which is not what the browser does with an inherited
 * computed line-height.
 *
 * Measured with getComputedStyle on both sites, not eyeballed.
 * ------------------------------------------------------------------ */
.ijm-topbar,
.ijm-bar {
  line-height: 23.8px;
}

.ijm-menu,
.ijm-menu li,
.ijm-menu li > a,
.ijf-col a {
  line-height: 26px;
}


/* ------------------------------------------------------------------
 * Chrome font weight.
 *
 * WordPress renders this header at weight 500 because Divi sets it on body and
 * every descendant inherits. OJS inherits 400, so the top bar, nav links, ISSN,
 * "Est. 2019", the VidhiAagaz link and the brand subtitle all came out lighter
 * than the live site. .ijm-title and .ijm-mark set 600 explicitly and are
 * unaffected.
 * ------------------------------------------------------------------ */
.ijm-topbar,
.ijm-bar {
  font-weight: 500;
}


/* ------------------------------------------------------------------
 * Real masthead logo.
 *
 * Replaces the "IJ" CSS monogram plus the IJLSI / Legal Science & Innovation
 * wordmark with the journal's actual logo. The logo is a complete lockup -- it
 * already carries the padlock, the wordmark, "Open Access e-journal of Law" and
 * the ISSN -- so keeping the adjacent text would have printed the name twice
 * (and the ISSN a second time, since the top bar already shows it).
 *
 * Height is pinned to 44px, the height the old monogram occupied, so the
 * masthead bar stays exactly 69px and nothing else in the header shifts. Width
 * follows the 372x212 source ratio (~77px) rather than being forced square,
 * which would squash it.
 * ------------------------------------------------------------------ */
.ijlsi-mh .ijm-brand {
  text-decoration: none;
}

.ijlsi-mh .ijm-logo {
  display: block;
  height: 44px;
  width: auto;
  max-width: none;
}

@media (max-width: 640px) {
  .ijlsi-mh .ijm-logo { height: 36px; }
}


/* ------------------------------------------------------------------
 * Sticky offsets.
 *
 * .ijm-bar is `position: sticky; top: 0` at 69px tall with z-index 40. The
 * article rail was sticking at `top: 24px`, i.e. 45px UP INSIDE the masthead, so
 * once the page scrolled the "CONTENTS" heading and the top of the rail sat
 * behind the header.
 *
 * The same offset is needed for in-page jumps: clicking a Contents link scrolls
 * the target heading to y=0, which is behind the header, so every heading gets a
 * matching scroll-margin-top.
 *
 * Kept as a token so the header height is stated once. If the masthead height
 * changes, change it here.
 * ------------------------------------------------------------------ */
:root {
  --ijm-sticky-h: 69px;
}

/* Every sticky rail on the site, not just the article page: the issue listing
   uses .ijt-rail__inner and had the identical overlap. */
.ij2-rail__inner,
.ijt-rail__inner {
  top: calc(var(--ijm-sticky-h) + 24px);
}

#fulltext .ij2-prose h1,
#fulltext .ij2-prose h2,
#fulltext .ij2-prose h3,
#fulltext .ij2-prose h4,
#fulltext .ij2-prose h5,
#fulltext .ij2-prose h6,
.ij2 [id^="ft-"] {
  scroll-margin-top: calc(var(--ijm-sticky-h) + 16px);
}

@media (max-width: 640px) {
  /* the mobile masthead is shorter -- logo drops to 36px */
  :root { --ijm-sticky-h: 61px; }
}


/* ==================================================================
 * Archive page (.ij-arch)
 * Same design language as the issue listing: white ground, full bleed,
 * square corners, Spectral display / Barlow UI, blue accent.
 * ================================================================== */
.ij-arch { background: var(--paper); }

.ij-arch__hero {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.ij-arch__heroin {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 44px var(--gutter) 34px;
}
.ij-arch__title {
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.ij-arch__lede {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--muted);
  margin: 10px 0 0;
  max-width: 62ch;
}
.ij-arch__stats {
  display: flex;
  gap: 40px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.ij-arch__stat { display: flex; flex-direction: column; gap: 2px; }
.ij-arch__statn {
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--accent);
  line-height: 1;
}
.ij-arch__statl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.ij-arch__toolbar {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px var(--gutter) 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ij-arch__chip {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  border-radius: 7px;
  line-height: 1.4;
}
.ij-arch__chip:hover { border-color: var(--ink); }
.ij-arch__chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.ij-arch__vol {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 30px var(--gutter) 0;
}
.ij-arch__volhead {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.ij-arch__volttl {
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  margin: 0;
}
.ij-arch__volmeta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.ij-arch__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.ij-arch__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  background: var(--paper);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ij-arch__card:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 18px -12px var(--accent);
}
.ij-arch__cardlabel {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.ij-arch__cardtitle {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
}
.ij-arch__cardmeta {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
}

.ij-arch__empty {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px var(--gutter);
  font-family: var(--sans);
  color: var(--muted);
}

.ij-arch__pager {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px var(--gutter) 8px;
  display: flex;
  gap: 16px;
}
.ij-arch__pagerlink {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}
.ij-arch__pagerlink:hover { text-decoration: underline; }

/* the archive needs bottom breathing room before the footer */
.ij-arch__vol:last-of-type { padding-bottom: 44px; }

@media (max-width: 640px) {
  .ij-arch__heroin { padding: 30px var(--gutter) 24px; }
  .ij-arch__title { font-size: 30px; }
  .ij-arch__stats { gap: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
  .ij-arch__grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
 * Archive layout corrections.
 *
 * 1. The parent (default) theme styles bare <header> elements as
 *    `display:flex; align-items:flex-end`. .ij-arch__hero is a <header>, so its
 *    inner wrapper became a flex ITEM, shrink-wrapped to 605px, and the
 *    `margin: 0 auto` then centred that shrunken box — the title and stats sat
 *    ~300px right of the volume chips below them. Forcing block display puts the
 *    wrapper back in normal flow.
 *
 * 2. The default theme also puts 32px of padding on `.page`, which stacked on top
 *    of this page's own --gutter and pushed every band inward. The design is
 *    full-bleed with its own gutters, so the inherited padding is removed.
 * ------------------------------------------------------------------ */
.page.ij-arch {
  padding-left: 0;
  padding-right: 0;
}

.ij-arch__hero,
.ij-arch__vol {
  display: block;
}

/* ==================================================================
 * MOBILE DESIGN — archive page and masthead menu
 *
 * Authoritative and last in the file on purpose. The stylesheet still carries
 * IJLMH's own `.ij-arch__*` rules from the port, including a mobile block that
 * targets `.ij-arch__hero h1` — a descendant selector that outranks the class
 * selectors used here. Rather than unpick two competing systems, this block is
 * scoped under `.ij-arch` and states the phone layout outright.
 *
 * This is a phone layout, not a narrowed desktop one:
 *   - issue cards become compact ROWS, which is what a phone reads well; a
 *     six-card grid squeezed to one column is just a long stack of boxes
 *   - the volume filter is a horizontal scroll rail instead of 8 chips wrapping
 *     into a 350px-tall block that pushed the archive off the first screen
 *   - the volume heading sticks while its issues scroll past
 *   - every target is at least 44px
 * ================================================================== */

@media (max-width: 700px) {

  /* ── Hero ─────────────────────────────────────────────────────── */
  .ij-arch .ij-arch__heroin {
    padding: 22px 18px 18px;
  }
  .ij-arch .ij-arch__title,
  .ij-arch .ij-arch__hero h1 {
    font-size: 27px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em;
  }
  .ij-arch .ij-arch__lede {
    font-size: 14.5px;
    margin-top: 8px;
    /* two lines is context; more is a wall of text above the content */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Stats: one compact band, divided, rather than three floating columns */
  .ij-arch .ij-arch__stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 !important;
    margin-top: 18px;
    border-top: 1px solid var(--rule);
    padding-top: 14px;
  }
  .ij-arch .ij-arch__stat {
    text-align: left;
    padding-right: 10px;
  }
  .ij-arch .ij-arch__stat + .ij-arch__stat {
    border-left: 1px solid var(--rule);
    padding-left: 14px;
  }
  .ij-arch .ij-arch__statn { font-size: 23px; }
  .ij-arch .ij-arch__statl { font-size: 9.5px; letter-spacing: 0.1em; }

  /* ── Volume filter: a scroll rail that bleeds to both edges ────── */
  .ij-arch .ij-arch__toolbar {
    padding: 14px 0 4px;
    margin: 0;
    display: flex;
    /* The ported IJLMH mobile CSS turns the archive's flex containers into
       columns, which stacked the 8 volume chips into a 462px tower and stretched
       each to full width. The direction has to be stated, not just the wrap. */
    flex-direction: row !important;
    align-items: center;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
  }
  .ij-arch .ij-arch__toolbar::-webkit-scrollbar { display: none; }
  /* first and last chip sit against the page gutter */
  .ij-arch .ij-arch__toolbar::before,
  .ij-arch .ij-arch__toolbar::after {
    content: '';
    flex: 0 0 10px;
  }
  .ij-arch .ij-arch__chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    font-size: 13.5px;
    white-space: nowrap;
  }

  /* ── Volume sections ──────────────────────────────────────────────
     One volume has to end and the next begin unmistakably. With rows running
     edge to edge and the heading sticking, consecutive volumes ran together as
     one long list, so each group gets a shaded gap above it and its heading is
     a tinted band with an accent rule beneath. */
  .ij-arch .ij-arch__vol {
    padding: 0;
  }
  .ij-arch .ij-arch__vol + .ij-arch__vol {
    border-top: 1px solid var(--rule);
    margin-top: 0;
  }
  .ij-arch .ij-arch__vol::before {
    content: '';
    display: block;
    height: 14px;
    background: var(--paper-sunk);
    border-bottom: 1px solid var(--rule);
  }
  .ij-arch .ij-arch__vol:first-of-type::before {
    height: 8px;
  }

  .ij-arch .ij-arch__volhead {
    position: sticky;
    top: var(--ijm-sticky-h);
    z-index: 5;
    background: var(--paper-sunk);
    margin: 0;
    padding: 11px 18px 10px;
    border-bottom: 2px solid var(--accent);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }
  .ij-arch .ij-arch__volttl {
    font-size: 19px;
    letter-spacing: -0.005em;
  }
  .ij-arch .ij-arch__volmeta {
    font-size: 10px;
    letter-spacing: 0.05em;
    text-align: right;
    flex: 0 0 auto;
    color: var(--ink-soft);
  }

  /* the last issue of a volume should not butt against the next volume's band */
  .ij-arch .ij-arch__grid > .ij-arch__card:last-child {
    border-bottom: 0;
  }

  /* ── Issues as compact rows ───────────────────────────────────── */
  .ij-arch .ij-arch__grid {
    display: block !important;
    margin: 0;
  }
  .ij-arch .ij-arch__card {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'label chev'
      'title chev'
      'meta  chev';
    align-items: center;
    gap: 2px 12px;
    min-height: 64px;
    padding: 13px 18px;
    border: 0;
    border-bottom: 1px solid var(--rule);
    position: relative;
  }
  .ij-arch .ij-arch__card:hover,
  .ij-arch .ij-arch__card:active {
    box-shadow: none;
    background: var(--paper-sunk);
    border-color: var(--rule);
  }
  .ij-arch .ij-arch__cardlabel { grid-area: label; font-size: 9.5px; }
  .ij-arch .ij-arch__cardtitle { grid-area: title; font-size: 15.5px; line-height: 1.28; }
  .ij-arch .ij-arch__cardmeta  { grid-area: meta;  font-size: 12px; }

  /* chevron, so a row reads as tappable */
  .ij-arch .ij-arch__card::after {
    content: '';
    grid-area: chev;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--rule-strong);
    border-bottom: 1.5px solid var(--rule-strong);
    transform: rotate(-45deg);
  }

  .ij-arch .ij-arch__vol:last-of-type { padding-bottom: 28px; }
  .ij-arch .ij-arch__empty { padding: 28px 18px; }
}

/* ==================================================================
 * Mobile menu polish (both platforms use this markup)
 *
 * The drawer previously opened as a plain white block that ran under the page
 * and had no separation from the content behind it. It now reads as a panel:
 * it starts below the masthead, scrolls independently, has a divider per row and
 * 48px targets, and the submenu chevron rotates when open.
 * ================================================================== */
@media (max-width: 980px) {

  .ijlsi-mh .ijm-nav.is-open {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: block;
    background: var(--paper);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 18px 40px -28px oklch(0.2 0.02 265 / 0.55);
    max-height: calc(100vh - var(--ijm-sticky-h) - 38px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 18px 18px;
    z-index: 60;
  }

  .ijlsi-mh .ijm-bar { position: sticky; }
  .ijlsi-mh .ijm-bar__in { position: relative; }

  .ijlsi-mh .ijm-nav.is-open .ijm-menu {
    display: block;
    width: 100%;
  }
  .ijlsi-mh .ijm-nav.is-open .ijm-menu > li {
    display: block;
    border-bottom: 1px solid var(--rule);
  }
  .ijlsi-mh .ijm-nav.is-open .ijm-menu > li:last-child { border-bottom: 0; }
  .ijlsi-mh .ijm-nav.is-open .ijm-menu > li > a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0;
    font-size: 15.5px;
    font-weight: 500;
  }

  /* submenu parents get a chevron on the right that turns when open */
  .ijlsi-mh .ijm-nav.is-open .ijm-menu > li.menu-item-has-children > a {
    justify-content: space-between;
  }
  .ijlsi-mh .ijm-nav.is-open .ijm-menu > li.menu-item-has-children > a::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    transform: rotate(45deg);
    transition: transform .15s ease;
    margin-left: 12px;
  }
  .ijlsi-mh .ijm-nav.is-open .ijm-menu > li.ijm-open > a::after {
    transform: rotate(-135deg);
  }

  .ijlsi-mh .ijm-nav.is-open .sub-menu {
    padding: 0 0 8px 2px;
  }
  .ijlsi-mh .ijm-nav.is-open .sub-menu li { border: 0; }
  .ijlsi-mh .ijm-nav.is-open .sub-menu a {
    display: flex;
    align-items: center;
    min-height: 42px;
    font-size: 14px;
    color: var(--muted) !important;
  }

  /* the two CTAs, full width and thumb-sized */
  .ijlsi-mh .ijm-nav.is-open .ijm-mobile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
  }
  .ijlsi-mh .ijm-nav.is-open .ijm-mobile-actions .ijm-btn {
    width: 100%;
    min-height: 48px;
  }

  /* page must not scroll behind an open drawer */
  body.ijm-nav-lock { overflow: hidden; }
}

/* ------------------------------------------------------------------
 * Vertical rhythm under the masthead.
 *
 * The archive opened 131px below the header: a 43px breadcrumb band, then 36px
 * of top padding the parent theme puts on `.page` (an earlier fix zeroed only its
 * left and right), then 52px of hero padding. Three separate sources of space
 * stacking is what made it read as a gap rather than a margin.
 * ------------------------------------------------------------------ */
.page.ij-arch {
  padding-top: 0;
}

.ij-arch .ij-arch__hero {
  padding-top: 0;
}

.ij-arch .ij-arch__heroin {
  padding-top: 26px;
}

@media (max-width: 700px) {
  .ij-arch .ij-arch__heroin { padding-top: 18px; }
}


/* The breadcrumb band carries a 4px accent rule, matching WordPress. It replaces
   the 1px grey hairline the ported CSS gave it. */
.ijh-crumbband {
  border-bottom: 4px solid var(--accent);
}