/* Phone header, middle way: old look, but Menu + search folded into icons beside the name. */
.p-icons { display: none; }
@media (max-width: 860px) {
  .mast .wrap { flex-wrap: wrap; align-items: center; gap: 12px 8px; padding-top: 14px; padding-bottom: 14px; }
  .mast .wm { flex: 1; min-width: 0; }
  .mast .wm small { font-size: 13px; }
  .mast .wm span { font-size: min(19px, 4.8vw); white-space: nowrap; }
  .p-icons { display: flex; margin-right: -8px; }
  .p-icons button { width: 42px; height: 42px; display: grid; place-items: center; background: none; border: 0; color: #fff; border-radius: 6px; cursor: pointer; }
  .p-icons button:active, .p-icons button[aria-expanded="true"] { background: rgba(255, 255, 255, .12); }
  .p-icons .ic { width: 21px; height: 21px; }
  .mast .side { width: 100%; margin: 0; }
  .mast .side .issn { display: none; }
  .mast .side .acts .btn { padding: 10px 8px; font-size: 14.5px; }
  /* the old Menu bar is hidden until the menu or search icon is tapped; then it opens in place as before */
  .menu { display: none; }
  body.nav-open .menu { display: block; }
  .menu .tog { display: none !important; }
  .menu .wrap { padding-top: 12px; padding-bottom: 6px; }
  .menu form { order: -1; flex: 1 1 100%; margin: 0 0 4px; }
  body.nav-open #jmenu { display: flex; }
}

/* owner: only the hamburger beside the name; search lives inside the menu */
@media (max-width: 860px) { .p-icons .p-search { display: none; } .mast .wm span { font-size: min(20px, 5.1vw); } }

/* owner: slimmer publisher bar on phones */
@media (max-width: 860px) { .pbar .wrap { height: 36px; } .pbar .brand img { height: 22px; } .pbar nav { font-size: 13px; } .pbar nav .ic { width: 13px; height: 13px; } }

/* homepage on phones: one "Current issue" card instead of the call strip + latest issue; metrics in two columns */
.ph-only { display: none; }
@media (min-width: 861px) { .ph-only { display: none !important; } }   /* desktop rules like .latest a / .latest span must not show them */
@media (max-width: 860px) {
  body .notice { display: none; }
  .open { padding-top: 16px; }
  .open .wrap { grid-template-columns: 1fr; gap: 14px; }
  .latest { display: grid !important; grid-template-columns: 78px minmax(0, 1fr); gap: 16px; align-items: center; background: #fff; border: 1px solid var(--rule); border-radius: 8px; padding: 14px; box-shadow: var(--shadow-sm); }
  .latest .cv { width: 78px; }
  .latest > div { display: flex; flex-wrap: wrap; column-gap: 18px; }
  .latest b { flex-basis: 100%; margin: 0 0 2px !important; font-size: 13px; font-weight: 600; color: var(--navy-md); text-transform: none; }
  .latest span { flex-basis: 100%; font-size: 15px; line-height: 1.4; color: var(--ink); }
  .latest span:nth-of-type(1) { font: 600 18px/1.3 var(--serif); }
  .latest span:nth-of-type(2) { color: var(--mu); font-size: 14px; }
  .latest .ph-only { display: block; }
  .latest .dl { margin-top: 6px; font-size: 14px; color: var(--body); }
  .latest .dl b { display: inline; flex-basis: auto; font: 600 14px var(--sans); color: var(--navy); }
  .latest a { margin-top: 8px; font-size: 15px; font-weight: 600; }
  .metrics { padding: 16px 16px 10px; }
  .metrics ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .metrics li { padding: 10px 0; }
  .metrics li:nth-child(2) { border-top: 0; }
  .metrics li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .metrics .ic { width: 19px; height: 19px; }
  .metrics b { font-size: 19px; }
  .metrics span { line-height: 1.35; display: block; font-size: 13px; }
}

@media (max-width: 860px) { .aboutblk p { text-align: left; hyphens: manual; } .aboutblk .top { padding: 22px 18px 16px; } }

/* page-head facts on phones (About, CFP, Charges, Indexing ...): an even 2-column grid of tiles */
@media (max-width: 860px) {
  .ph .ph-f { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1px; padding: 0 !important; margin-top: 6px; background: var(--rule); border: 1px solid var(--rule) !important; border-radius: 8px; overflow: hidden; }
  .ph .ph-f div { background: #fff; padding: 11px 14px !important; border: 0 !important; }
  .ph .ph-f div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ph .ph-f dt { font-size: 12.5px; }
  .ph .ph-f dd { font-size: 16px; }
}

@media (max-width: 860px) { .ph .ph-a { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ph .ph-a .btn:only-child { grid-column: 1 / -1; } .ph .ph-a .btn { padding: 12px 8px; font-size: 14.5px; white-space: normal; text-align: center; } }

/* journal metrics on phones: impact factor as a full-width lead tile, the other four as an even 2x2 grid */
@media (max-width: 860px) {
  .metrics { padding: 16px; }
  .metrics h2 { margin-bottom: 12px; }
  .metrics ul { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; column-gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
  .metrics li, .metrics li:first-child { display: block; background: #fff; padding: 12px 14px !important; border: 0 !important; }
  .metrics li:last-child:nth-child(odd) { grid-column: auto; }
  .metrics li:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; background: #eaf2f9; }
  .metrics li:first-child .ic { grid-row: span 2; width: 26px; height: 26px; margin: 0; }
  .metrics li:first-child b { font-size: 24px; }
  .metrics .ic { display: block; width: 18px; height: 18px; margin: 0 0 6px; }
  .metrics b { font-size: 19px; line-height: 1.2; }
  .metrics span { font-size: 13px; line-height: 1.35; margin-top: 2px; }
}

@media (max-width: 860px) { .metrics { background: none; border: 0; padding: 0; } .metrics h2 { font-size: 17px; } }

/* homepage article lists on phones: clean meta lines, compact caption, tighter cards */
@media (max-width: 860px) {
  .panel .cap { text-align: left; font-size: 13.5px; padding: 10px 16px; }
  .arts li { padding: 16px 16px 18px; }
  .arts .meta { font-size: 13px; row-gap: 3px; }
  .arts .meta > span:nth-child(3) { flex-basis: 100%; color: var(--mu); }
  .arts .meta > span:nth-child(3)::before { display: none; }
  .arts h3 { font-size: 17.5px; line-height: 1.35; margin: 6px 0 4px; }
  .arts .by { font-size: 14.5px; }
  .arts.mread li { grid-template-columns: 28px minmax(0, 1fr); }
  .arts.mread .rank { font-size: 18px; }
  .tabs button { font-size: 14.5px; padding: 12px 4px; }
  .panel .foot { padding: 14px 16px; }
}

/* owner: the article meta on ONE line on phones: Open access · Article · Vol. IX (2026) (pages dropped) */
@media (max-width: 860px) {
  .arts .meta { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
  .arts .meta > span:nth-child(3) { flex-basis: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .arts .meta > span + span::before, .arts .meta > span:nth-child(3)::before { display: inline-block; content: "\00b7"; width: auto; height: auto; background: none; margin: 0 7px; color: var(--fnt); }
  .arts .meta .pp { display: none; }
}

/* footer: plain columns on desktop, tap-to-open sections on phones (owner preferred the newer phone footer) */
.fcol summary { list-style: none; pointer-events: none; }
.fcol summary::-webkit-details-marker { display: none; }
@media (max-width: 860px) {
  .ftr .top { display: flex; flex-direction: column; gap: 0; padding-top: 8px; padding-bottom: 20px; }
  .ftr .wm { order: -1; text-align: left; padding: 22px 0 18px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .ftr .wm span { font-size: 24px; }
  .ftr .social { justify-content: flex-start; }
  .fcol { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .fcol summary { pointer-events: auto; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 15px 0; }
  .fcol summary h4 { margin: 0; font-size: 16px; }
  .fcol summary::after { content: "+"; font-size: 22px; line-height: 1; color: #c3cfdb; }
  .fcol[open] summary::after { content: "\2212"; }
  .fcol ul { padding: 0 0 12px; }
  .fcol li { padding: 7px 0; }
  .ftr .pubby .wrap { flex-direction: column; align-items: flex-start; }
  .ftr .base .wrap { flex-direction: column; gap: 10px; }
}

/* owner: running text stays JUSTIFIED on phones too (hyphenated so spacing stays even) */
@media (max-width: 860px) {
  .aboutblk p, .prose p, .prose .abstract { text-align: justify !important; hyphens: auto !important; -webkit-hyphens: auto !important; }
}

/* phone type scale: everything steps down from the laptop sizes in proportion */
@media (max-width: 860px) {
  body { font-size: 15.5px; }
  .prose, .prose p, .aboutblk p, .sec-h p, .sub, .lede, .ph .lead { font-size: 15.5px; line-height: 1.62; }
  .ph h1, .ihead h1 { font-size: 26px; line-height: 1.22; }
  .ahead h1 { font-size: 23px; line-height: 1.3; }
  .h2, .dsec > h2, .prose h2, .split2 h2, .aboutblk h2, .isec h2.h2 { font-size: 21px !important; line-height: 1.3; }
  .prose h3, .dsec > h3, .dsec h3.sub3, .sc-h h3, .cols3 h3, .scope h3 { font-size: 17px !important; }
  .steps h3, .tline h3, .cards h3 { font-size: 16px !important; }
  .steps p, .tline p, .cards p, .sc-d, .note, .faq details p { font-size: 14.5px !important; }
  .faq summary { font-size: 15.5px; }
  .fgrid dd, .glance dd { font-size: 15px; }
  .fgrid dt, .glance dt, .info div { font-size: 13.5px; }
  .tbl table { font-size: 14px; }
  .ilist h3 { font-size: 17.5px; }
  .ilist .au { font-size: 14.5px; }
  .ilist .af { font-size: 13.5px; }
  .btn { font-size: 15px; }
  .crumb { font-size: 13.5px; }
  .ptabs a { font-size: 14.5px; }
}

/* ===== phone structure pass (12 Oct 2026) ===== */
@media (max-width: 860px) {
  /* full-width panels, lighter inner padding: the text column gains ~60px */
  .doc .wrap, .doc.solo .wrap { padding-left: 0 !important; padding-right: 0 !important; padding-top: 10px; gap: 10px; }
  .doc .dmain { gap: 10px; }
  .doc .dsec, .doc .dsec:first-child { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; padding: 22px 16px 20px; }
  .dtoc { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
  .steps > div, .steps.cards2 > div { padding: 14px 14px; box-shadow: none; }
  .glance dl div { padding: 9px 12px; }
  .glance .gh { padding: 10px 12px; }
  .form .fs-body { padding: 14px 12px 16px; }
  .note { padding: 12px 14px; }
  .note p, .note > div, .helpln p { text-align: left !important; }
  .helpln { padding: 14px 16px !important; align-items: flex-start; }
  .pull { padding: 14px 16px; }
  .tbl th, .tbl td { padding: 8px 9px !important; font-size: 13.5px; }
  .tbl.fees td:not(:first-child) { font-size: 14.5px; }
  .tbl th { white-space: normal; }

  /* About block: its four links as one list, arrow on the right */
  .aboutblk .bar { display: block; padding: 4px 18px; }
  .aboutblk .bar a { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
  .aboutblk .bar a:first-child { border-top: 0; }

  /* issue page head: small cover beside the title */
  .ihead .wrap { grid-template-columns: 72px minmax(0, 1fr); gap: 14px 16px; align-items: center; }
  .ihead img { width: 72px; }
  .ihead dl { grid-column: 1 / -1; display: grid !important; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; padding: 0; }
  .ihead dl div { display: block !important; background: #fff; padding: 10px 14px; }
  .ihead dt, .ihead dd { border: 0 !important; padding: 0 !important; text-align: left !important; }
  .ihead dt { font-size: 12.5px; }
  .ihead dd { font-size: 16px; }

  /* archives */
  .arch-cur { grid-template-columns: 68px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .arch-cur img { width: 68px; }
  .arch-cur .acts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .arch-cur .acts .btn { padding: 11px 8px; }
  .vol-h { flex-direction: column; align-items: flex-start; gap: 2px; }
  .vol-h h2 { font-size: 20px; }

  /* article head: buttons in a 2x2 grid, page numbers off the top line */
  .ahead .kick > span:nth-child(4) { display: none; }
  .ahead .row { flex-direction: column; align-items: stretch; gap: 14px; }
  .ahead .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ahead .acts .btn { padding: 11px 8px; }
  .ahead .stat { justify-content: flex-start; }
}

@media (max-width: 860px) { .fgrid, .fgrid.c2, .fgrid.c3, .fgrid.c4 { grid-template-columns: 1fr 1fr !important; } .fgrid:has(small) { grid-template-columns: 1fr !important; } .fgrid > div:last-child:nth-child(odd) { grid-column: 1 / -1; } .fgrid div { padding: 11px 13px; } }

/* issue page article cards on phones: title, authors, pp · views, DOI line, then two equal buttons */
@media (max-width: 860px) {
  .ilist li { display: flex !important; flex-direction: column; gap: 0; padding: 18px 0 20px; }
  .ilist li > div:first-child { display: contents; }
  .ilist h3 { order: 1; margin: 0 0 6px; }
  .ilist .au, .ilist .af { order: 2; }
  .ilist .side { order: 3; display: flex !important; align-items: center; gap: 0; margin: 8px 0 0; font-size: 13.5px; color: var(--mu); text-align: left; }
  .ilist .side b { display: inline; font: 400 13.5px var(--sans); color: var(--mu); margin: 0 0 0 4px; }
  .ilist .side .v { margin: 0; }
  .ilist .side .v::before { content: "\00b7"; margin: 0 8px; }
  .ilist .side .v .ic { display: none; }
  .ilist .acts { order: 4; display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
  .ilist .acts .doi { grid-column: 1 / -1; order: -1; font-size: 13.5px; margin-bottom: 4px; }
  .ilist .acts > a:not(.doi) { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 11px 8px; border: 1.5px solid var(--navy); border-radius: 5px; font-size: 14.5px; font-weight: 600; color: var(--navy); background: #fff; text-decoration: none !important; }
  .ilist .acts > a:first-child { background: var(--navy); color: #fff; }
  .ilist .acts > a:first-child .ic { color: #fff; }
  .ilist .acts > a.abs-tog:only-of-type { grid-column: auto; }
  .ilist .abs { order: 5; margin-top: 12px; }
}

/* article page on phones: publication line under the stats; contents near the top (not 30,000px down); rail boxes trimmed */
@media (max-width: 860px) {
  .ahead .apub { display: block; font-size: 13.5px; color: var(--mu); margin-top: 8px; }
  .mtoc { display: block; margin: 0 0 22px; border: 1px solid var(--rule); border-radius: 8px; background: var(--tint); }
  .mtoc summary { list-style: none; cursor: pointer; padding: 13px 16px; font-weight: 600; font-size: 15px; display: flex; justify-content: space-between; color: var(--ink); }
  .mtoc summary::-webkit-details-marker { display: none; }
  .mtoc summary::after { content: "+"; font-weight: 400; color: var(--mu); }
  .mtoc[open] summary::after { content: "\2212"; }
  .mtoc[open] summary { border-bottom: 1px solid var(--rule); }
  .mtoc .toc { padding: 8px 16px 12px; }
  .mtoc .toc a { padding: 8px 0 8px 12px; font-size: 14.5px; text-decoration: none !important; }
  body .rail .box:has(.toc) { display: none; }
}

@media (max-width: 860px) { .prose .abstract { font-size: 15.5px !important; line-height: 1.62; } }

/* ===== justification (owner, 12 Oct 2026): all running text justified, at every width ===== */
.ph .lead, .sub, .lede, .sec-h p, .steps p, .tline p, .cards p, .sc-d, .faq details p, .note > div, .note p, .pull p,
.helpln p, .rnote, .cta p, .fgrid dd small, .numbered span, .ticks li > div, .prose li, .prose .abstract, .prose p,
.aboutblk p, .ilist .abs, .holdings + p, .dsec p {
  text-align: justify !important; hyphens: auto; -webkit-hyphens: auto;
}
/* reference-type text stays ragged-right: references, citations, tables, chips, affiliations, narrow side boxes */
.refs li, .citebox, .tbl td, .tbl th, .chips span, .sc-tags li, .ilist .af, .ilist .au, .rail .rnote, .rail p, .s-b .fgrid dd,
.relinks li, .kw span, .meta, .by, .toc a, .info dd, .glance dd { text-align: left !important; }
.scope p, .note-line, .libbig p, .holdings p { text-align: justify !important; hyphens: auto; }

/* gated pages (Author dashboard, Certificate) on phones: icon beside the heading, not alone on a row */
@media (max-width: 860px) {
  .gate { grid-template-columns: 40px minmax(0, 1fr) !important; gap: 12px !important; padding: 18px 16px !important; }
  .gate .ic { width: 32px !important; height: 32px !important; margin-top: 2px; }
  .gate .btnrow { display: grid; grid-template-columns: 1fr; gap: 8px; }
}
/* the help line is a short note: never justified */
.helpln p { text-align: left !important; }

/* forms on phones: full-width action buttons, 16px inputs (no iOS zoom) */
@media (max-width: 860px) { .form .acts { display: grid; grid-template-columns: 1fr; } .form .acts .btn, .form .acts button { width: 100%; padding: 13px; } .form input:not([type=checkbox]):not([type=radio]), .form select, .form textarea { font-size: 16px; } .tr-gate .btn { padding: 13px; } }

/* headings inside list items are never justified (fix: the justify rule on .prose li stretched step titles) */
.prose li h3, .prose li b, .tline h3, .numbered b, .steps h3, .prose li strong { text-align: left !important; display: block; }
.tline li > div, .numbered li { text-align: left; }
/* ...except the page range in an issue listing, which follows its column (right on a wide screen, left on a phone) */
.prose .ilist .side b { text-align: inherit !important; }

/* phones: give each section a clear start: wider grey break between sections, a short navy rule above every section heading */
@media (max-width: 860px) {
  .doc .dmain { gap: 14px !important; }
  .doc { background: #e8edf2 !important; }
  .doc .dsec, .doc .dsec:first-child { border-top: 0; border-bottom: 0; }
  .doc .dsec > h2::before, .doc .dsec > .skick + h2::before { content: ""; display: block; width: 36px; height: 3px; background: var(--navy); border-radius: 2px; margin-bottom: 12px; }
  .doc .dsec > .skick { margin-bottom: 4px; }
  .doc .dsec > .skick + h2::before { display: none; }
  .doc .dsec > .skick::before { content: ""; display: block; width: 36px; height: 3px; background: var(--navy); border-radius: 2px; margin-bottom: 12px; }
  .doc .dsec h3.sub3, .doc .dsec > h3 { padding-top: 14px; border-top: 1px solid var(--rule); margin-top: 26px; }
}

/* phones: the journal's name is the strongest thing in the masthead (owner, 12 Oct 2026). The menu button sits up beside
   the short first line ("International Journal of"), so the name below has the full width, on one line; the two buttons
   sit directly under the name; the publisher's logo above steps back. The name is 14.4em wide at text sizes (Source Serif 4 widens as it shrinks: optical sizing),
   so it is sized to the width less the gutters. (ijlmh.css ends with an unconditional .pbar logo height of 29px that
   overrode the phone size; restated here.) */
@media (max-width: 860px) {
  .pbar .wrap { height: 38px; }
  .pbar .brand img { height: 19px; }
  .mast .wrap { position: relative; padding-top: 16px; padding-bottom: 0; row-gap: 0; }
  .mast .wm { padding-right: 0; }
  .mast .wm small { font-size: min(15px, 4vw); color: #cfdbe7; margin-bottom: 2px; padding-right: 48px; }
  .mast .wm span { font-size: min(26px, calc((100vw - 36px) / 14.6)); font-weight: 600; line-height: 1.15; white-space: nowrap; }
  .mast .p-icons { position: absolute; top: 9px; right: 8px; margin: 0; }   /* centred on the first line */
  .mast .p-icons button { width: 40px; height: 32px; }
  .mast .p-icons button[aria-expanded="true"], .mast .p-icons button:active { background: none; }   /* no pressed box: it would sit on the name */
  .mast .side { margin: 12px 0 0; width: 100%; padding: 0 0 14px; }
  .mast .side .acts { gap: 8px; }
  .mast .side .acts .btn { padding: 7px 6px; min-height: 0; font-size: 13.5px; font-weight: 600; border-radius: 4px; }
  .mast .side .acts .btn.line { border-color: rgba(255, 255, 255, .4); }
}

/* the menu button shows × while the menu is open (owner, 12 Oct 2026) */
.p-menu .i-close { display: none; }
.p-menu[aria-expanded="true"] .i-open { display: none; }
.p-menu[aria-expanded="true"] .i-close { display: block; }

/* phones: once the masthead has scrolled away, a slim bar with the journal's name and the menu button stays at the top
   (owner, 12 Oct 2026); the menu then opens over the page, under the bar. Desktop: unchanged, no bar. */
.mbar { display: none; }
@media (max-width: 860px) {
  .mbar { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 9990; background: #1f5585; color: #fff;
    transform: translateY(-105%); transition: transform .22s ease; box-shadow: 0 2px 12px rgba(16, 36, 56, .28); }
  body.mbar-on .mbar { transform: none; }
  .mbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 58px; }
  .mbar-wm { color: #fff; display: block; white-space: nowrap; }
  .mbar-wm small { display: block; font: 400 12.5px/1.2 var(--serif); color: #cfdbe7; margin-bottom: 2px; }
  .mbar-wm span { display: block; font: 600 min(19px, calc((100vw - 84px) / 14.6)) / 1.1 var(--serif); }
  .mbar-wm:hover { color: #fff; text-decoration: none; }
  .mbar-menu { width: 40px; height: 40px; margin-right: -8px; display: grid; place-items: center; background: none; border: 0; color: #fff; cursor: pointer; }
  .mbar-menu .ic { width: 21px; height: 21px; }
  body.mbar-on.nav-open .menu { position: fixed; top: 58px; left: 0; right: 0; bottom: 0; overflow-y: auto; z-index: 9989; }
}

/* IJLSI: four metrics on the phone = the impact factor on top, the other three in one row */
@media (max-width: 860px) { .metrics ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } .metrics b { font-size: 17px; } .metrics span { font-size: 12.5px; } }