/* =====================================================================
   Premier Academic Publishers — app.css
   Ported from the approved demo. Design tokens are the contract:
   see CLAUDE.md. Component classes are prefixed pap- where they could
   collide with anything generic.
   ===================================================================== */
/* ============================================================
   PREMIER ACADEMIC PUBLISHERS — design tokens
   Ink Green / Brass / Cool Paper. Identifiers are always mono.
   ============================================================ */
:root{
  --ink:#0C332C; --ink-deep:#06201B; --ink-mid:#12463C; --ink-line:#1D5A4E;
  --brass:#C08A2E; --brass-lt:#E4C77E; --brass-wash:#F5EAD2;
  --paper:#F3F6F4; --card:#FFFFFF; --line:#DBE4E0; --line-soft:#EAF0ED;
  --text:#14201D; --muted:#5B6B66; --faint:#8A9A94;
  --ok:#1D6B4C; --ok-bg:#E4F1EA;
  --warn:#9C6608; --warn-bg:#FAEEDA;
  --danger:#95292B; --danger-bg:#F8E6E6;
  --info:#1F5476; --info-bg:#E3EEF6;
  --violet:#5B4A87; --violet-bg:#ECE8F5;
  --r:4px; --rlg:8px;
  /* Brand fonts (2026 rebrand): Playfair Display for headings, Plus Jakarta Sans for all body text.
     --serif used to be a separate reading serif; it now points at the body font so abstracts,
     article text and references read in Plus Jakarta Sans too. Titles use --disp. */
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:var(--sans);
  --disp:'Playfair Display',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --shadow:0 1px 2px rgba(12,51,44,.06),0 8px 24px -12px rgba(12,51,44,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--disp);font-weight:600;line-height:1.15;letter-spacing:-.015em}
h1{font-size:clamp(2rem,4.4vw,3.4rem)}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
h3{font-size:1.15rem}
.prose{font-family:var(--serif);font-size:1.05rem;line-height:1.75;color:#22302C}
.prose p+p{margin-top:.9em}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);font-weight:500}
.eyebrow.dim{color:var(--muted)}
.mono{font-family:var(--mono);font-size:.8rem}
.muted{color:var(--muted)}
.small{font-size:.82rem}

/* ---------- layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 22px}
.sec{padding:64px 0}
.sec-tight{padding:38px 0}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.row{display:flex;gap:12px;align-items:center}
.row-b{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:14px}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- signature: the record strip ---------- */
.record{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--muted);
  display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:7px 0;margin:14px 0}
.record b{font-weight:500;color:var(--ink)}
.record span:not(:last-child):after{content:"·";margin-left:8px;color:var(--brass)}
.record.on-dark{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.62)}
.record.on-dark b{color:#fff}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:var(--r);
  padding:10px 18px;font-size:.9rem;font-weight:500;cursor:pointer;background:var(--ink);color:#fff;transition:.15s}
.btn:hover{background:var(--ink-mid)}
.btn.brass{background:var(--brass);color:#231704}.btn.brass:hover{background:#D79E3D}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink);background:#fff}
.btn.on-dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#fff}
.btn.on-dark:hover{background:rgba(255,255,255,.16)}
.btn.sm{padding:6px 12px;font-size:.8rem}
.btn.block{width:100%;justify-content:center}
.btn:disabled{opacity:.45;cursor:not-allowed}
.link{color:var(--ink);border-bottom:1px solid var(--brass-lt);cursor:pointer}
.link:hover{border-color:var(--brass)}

/* ---------- cards / tags ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--rlg);padding:20px}
.card.pad0{padding:0;overflow:hidden}
.card.hoverable{cursor:pointer;transition:.15s}
.card.hoverable:hover{border-color:var(--ink);box-shadow:var(--shadow);transform:translateY(-2px)}
.tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 8px;border-radius:3px;background:var(--line-soft);color:var(--muted);white-space:nowrap}
.tag.ok{background:var(--ok-bg);color:var(--ok)} .tag.warn{background:var(--warn-bg);color:var(--warn)}
.tag.danger{background:var(--danger-bg);color:var(--danger)} .tag.info{background:var(--info-bg);color:var(--info)}
.tag.violet{background:var(--violet-bg);color:var(--violet)} .tag.brass{background:var(--brass-wash);color:#7A5510}
.oa{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:.68rem;color:var(--ok);
  text-transform:uppercase;letter-spacing:.08em}
.oa:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.divider{height:1px;background:var(--line);margin:22px 0}

/* ---------- header ---------- */
.topbar{background:var(--ink-deep);color:rgba(255,255,255,.72);font-size:.78rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:34px;gap:16px}
.topbar a:hover{color:#fff}
header.site{background:var(--ink);color:#fff;position:sticky;top:0;z-index:140}
header.site .bar{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
nav.main{display:flex;gap:22px;align-items:center;background:transparent}
nav.main a{font-size:.88rem;color:rgba(255,255,255,.82);padding:6px 0;border-bottom:2px solid transparent;cursor:pointer}
nav.main a:hover,nav.main a.active{color:#fff;border-color:var(--brass)}
.burger{display:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);border-radius:4px;padding:8px 12px;color:#fff;cursor:pointer;font-size:.82rem}
.navback{display:none}
.navclose{display:none}
.drawer-only{display:none}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding:76px 0 0}
.hero:after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--brass),transparent)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:end;padding-bottom:56px}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:32px}}
.hero h1{color:#fff;font-size:clamp(2.2rem,4.6vw,3.6rem)}
.hero h1 em{font-style:italic;color:var(--brass-lt);font-weight:400}
.hero p.lede{font-family:var(--serif);font-size:1.12rem;color:rgba(255,255,255,.78);max-width:52ch;margin-top:18px}
.searchbar{display:flex;margin-top:26px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);border-radius:var(--r)}
.searchbar input{flex:1;background:none;border:0;padding:13px 16px;color:#fff;font-size:.92rem}
.searchbar input::placeholder{color:rgba(255,255,255,.45)}
.ticker{border-top:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.18)}
.ticker .wrap{display:flex;gap:0;overflow-x:auto}
.ticker div{flex:1;min-width:160px;padding:18px 0;border-right:1px solid rgba(255,255,255,.1)}
.ticker div:last-child{border:0}
.ticker b{display:block;font-family:var(--disp);font-size:1.8rem;color:#fff;font-weight:600;line-height:1}
.ticker span{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.55)}

/* ---------- workflow rail (signature, reused in dashboard) ---------- */
.rail{display:flex;gap:2px;margin:16px 0}
.rail .st{flex:1;min-width:0}
.rail .st i{display:block;height:4px;background:var(--line);border-radius:2px}
.rail .st.done i{background:var(--ink)} .rail .st.now i{background:var(--brass)}
.rail .st.rej i{background:var(--danger)}
.rail .st b{display:block;font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:400;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail .st.now b{color:var(--brass);font-weight:500} .rail .st.done b{color:var(--ink)}

/* ---------- article list ---------- */
.art{border-top:1px solid var(--line);padding:22px 0}
.art:first-child{border-top:0}
.art h3{font-family:var(--disp);font-weight:500;font-size:1.12rem;letter-spacing:0;line-height:1.4;cursor:pointer}
.art h3:hover{color:var(--ink-mid);text-decoration:underline;text-decoration-color:var(--brass-lt);text-underline-offset:3px}
.art .authors{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:.95rem;margin-top:4px}
.abs{font-family:var(--serif);color:#3A4744;font-size:.97rem;margin-top:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- subject tiles ---------- */
.subj{background:var(--card);border:1px solid var(--line);border-radius:var(--rlg);padding:18px;cursor:pointer;transition:.15s;position:relative}
.subj:hover{border-color:var(--ink);box-shadow:var(--shadow)}
.subj b{display:block;font-family:var(--disp);font-size:1.02rem;font-weight:600;margin-bottom:4px}
.subj i{position:absolute;top:16px;right:16px;font-family:var(--mono);font-style:normal;font-size:.72rem;color:var(--brass)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);font-weight:500;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--paper)}
td{padding:14px;border-bottom:1px solid var(--line-soft);font-size:.9rem;vertical-align:top}
tr.clickable{cursor:pointer} tr.clickable:hover td{background:#FAFCFB}
.tbl-wrap{overflow-x:auto}

/* ---------- forms ---------- */
label.f{display:block;margin-bottom:16px}
label.f>span{display:block;font-size:.82rem;font-weight:500;margin-bottom:6px}
label.f>span em{font-style:normal;color:var(--muted);font-weight:400}
.inp{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:#fff;font-size:.92rem}
.inp:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(12,51,44,.08)}
textarea.inp{min-height:100px;resize:vertical;font-family:var(--serif);font-size:1rem}
.hint{font-size:.78rem;color:var(--muted);margin-top:5px}
.drop{border:1.5px dashed var(--line);border-radius:var(--rlg);padding:28px;text-align:center;background:#FAFCFB;cursor:pointer}
.drop:hover{border-color:var(--brass);background:var(--brass-wash)}
.check{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;font-size:.9rem;cursor:pointer}
.check input{margin-top:4px}

/* ---------- steps ---------- */
.steps{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--rlg);overflow:hidden;background:#fff;margin-bottom:24px}
.steps div{flex:1;padding:12px 14px;border-right:1px solid var(--line);font-size:.8rem;color:var(--muted);position:relative}
.steps div:last-child{border:0}
.steps div.on{background:var(--ink);color:#fff}
.steps div.ok{background:var(--brass-wash);color:#6E4B0C}
.steps div b{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;opacity:.7}
@media(max-width:760px){.steps{display:none}}

/* ---------- app shell (dashboard + admin) ---------- */
.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.side{background:var(--ink-deep);color:#fff;padding:20px 0;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .brandline{padding:0 20px 20px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:14px}
.side .grp{font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.38);padding:16px 20px 6px}
.side a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 20px;font-size:.87rem;
  color:rgba(255,255,255,.74);cursor:pointer;border-left:2px solid transparent}
.side a:hover{background:rgba(255,255,255,.05);color:#fff}
.side a.on{background:rgba(192,138,46,.14);border-left-color:var(--brass);color:#fff}
.side a .n{font-family:var(--mono);font-size:.7rem;background:rgba(255,255,255,.12);padding:1px 6px;border-radius:8px}
.appmain{min-width:0;background:var(--paper)}
.apphead{background:#fff;border-bottom:1px solid var(--line);padding:16px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px;position:sticky;top:0;z-index:20}
.appbody{padding:28px}
.pipeline{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:14px}
.pipeline > div{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px;min-width:0}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--rlg);padding:16px 18px}
.stat b{display:block;font-family:var(--disp);font-size:1.9rem;font-weight:600;line-height:1.1}
.stat span{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;
  font-family:var(--mono);font-size:.75rem;flex-shrink:0}


/* ---------- timeline ---------- */
.tl{border-left:2px solid var(--line);margin-left:8px;padding-left:20px}
.tl .ev{position:relative;padding-bottom:20px}
.tl .ev:before{content:"";position:absolute;left:-27px;top:5px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--line)}
.tl .ev.hi:before{background:var(--brass);border-color:var(--brass)}
.tl .ev time{font-family:var(--mono);font-size:.7rem;color:var(--muted);display:block}
.tl .ev b{font-size:.9rem;font-weight:600}

/* ---------- footer ---------- */
footer.site{background:var(--ink-deep);color:rgba(255,255,255,.66);margin-top:auto;padding:52px 0 0;font-size:.87rem}
footer.site h4{color:#fff;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;margin-bottom:14px}
footer.site a{display:block;padding:4px 0;cursor:pointer}
footer.site a:hover{color:var(--brass-lt)}
.footbar{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding:18px 0;font-family:var(--mono);font-size:.72rem;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.notice{background:var(--brass-wash);border:1px solid var(--brass-lt);border-radius:var(--r);padding:12px 14px;font-size:.85rem;color:#6E4B0C}
.empty{text-align:center;padding:52px 20px;border:1.5px dashed var(--line);border-radius:var(--rlg);background:#fff}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 20px;
  border-radius:var(--r);font-size:.88rem;z-index:200;box-shadow:var(--shadow);border-left:3px solid var(--brass)}

/* ============================================================
   RESPONSIVE PASS — nav drawer, split layouts, app shell
   ============================================================ */

/* --- shared split layouts (replaces inline grid-template-columns) --- */
.split{display:grid;grid-template-columns:1fr 320px;gap:40px}
.split-sm{display:grid;grid-template-columns:1fr 300px;gap:44px}
.split-lg{display:grid;grid-template-columns:1.6fr .9fr;gap:44px}
.split-form{display:grid;grid-template-columns:1fr 360px;gap:44px}
.split-half{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.split-wizard{display:grid;grid-template-columns:1fr 300px;gap:28px}

/* --- app shell sidebar becomes a scrollable pill row on small screens --- */
.sidenav{display:block}

@media(max-width:1080px){
  .split,.split-sm,.split-lg,.split-form,.split-wizard{grid-template-columns:1fr;gap:30px}
  aside [style*="sticky"]{position:static!important}
  aside{order:2}
}

/* ---------------- tablet and below: drawer nav ---------------- */
@media(max-width:1024px){
  header.site .bar{height:64px}
  nav.main{position:fixed;inset:0 0 0 auto;width:min(330px,86vw);background:var(--ink-deep);
    flex-direction:column;align-items:stretch;gap:0;padding:22px;z-index:120;overflow-y:auto;
    transform:translateX(100%);transition:transform .24s ease;box-shadow:-20px 0 50px -20px rgba(0,0,0,.5);display:flex}
  nav.main.open{transform:translateX(0)}
  nav.main a{font-size:1rem;padding:15px 2px;border-bottom:1px solid rgba(255,255,255,.1);border-left:0;color:rgba(255,255,255,.88)}
  nav.main a:hover,nav.main a.active{border-bottom-color:var(--brass);color:#fff}
  .drawer-only{display:block}
  .navclose{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;
    margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.14)}
  .navclose span{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5)}
  .navclose button{background:none;border:1px solid rgba(255,255,255,.28);border-radius:4px;color:#fff;
    padding:5px 11px;cursor:pointer;font-size:.9rem}
  .navback{display:block;position:fixed;inset:0;background:rgba(4,20,17,.55);z-index:120;opacity:0;
    pointer-events:none;transition:opacity .24s}
  .navback.on{opacity:1;pointer-events:auto}
  .burger{display:block}
  .header-cta{display:none}
}

/* ---------------- phones ---------------- */
@media(max-width:640px){
  body{font-size:14.5px}
  .wrap,.wrap-narrow{padding:0 16px}
  .sec{padding:44px 0}
  .topbar .wrap{height:auto;padding:7px 16px;font-size:.72rem}
  .topbar .wrap > span:first-child{display:none}
  .hero{padding-top:48px}
  .hero-grid{padding-bottom:38px;gap:26px}
  .hero p.lede{font-size:1rem}
  .searchbar{flex-direction:column;align-items:stretch}
  .searchbar .btn{border-radius:0 0 4px 4px!important;justify-content:center}
  .ticker div{min-width:132px;padding:14px 0}
  .ticker b{font-size:1.4rem}
  .grid.g4{grid-template-columns:repeat(2,1fr)}
  .rail .st b{font-size:.55rem;letter-spacing:.02em}
  .record{font-size:.66rem}
  .card{padding:16px}
  .btn{padding:9px 15px}
  .art h3{font-size:1.05rem}
  .divider{margin:18px 0}
  footer.site{padding-top:38px}
  .footbar{flex-direction:column;gap:6px}
}

/* --- keep wide tables usable instead of crushing them --- */
@media(max-width:820px){
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl-wrap table{min-width:600px}
  th,td{padding:11px 12px}
}

/* --- wizard step bar scrolls rather than disappearing --- */
@media(max-width:760px){
  .steps{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .steps div{min-width:132px;flex:0 0 auto}
}

/* --- auth split --- */
@media(max-width:880px){
  .split-half{grid-template-columns:1fr;min-height:0}
  .authside{padding:26px 20px!important}
  .authside .authcopy{display:none}
  .authform{padding:32px 20px!important}
}

/* flash message variant */
.notice-error{background:var(--danger-bg);border-color:#E9C6C6;color:var(--danger)}
a.subj{display:block;text-decoration:none;color:inherit}
a.card.hoverable{display:block;text-decoration:none;color:inherit}
.art h3 a{color:inherit}
.art h3 a:hover{color:var(--ink-mid);text-decoration:underline;text-decoration-color:var(--brass-lt);text-underline-offset:3px}

/* =====================================================================
   HOME REDESIGN — compact hero, stats strip, subject browser, two columns
   Modelled on the structure of the reference publisher sites, in our brand.
   ===================================================================== */

/* --- compact hero: about a third the height of the old one --- */
.hero.compact{padding:34px 0 0}
.hero.compact .hero-grid{grid-template-columns:1.35fr .65fr;gap:36px;align-items:center;padding-bottom:30px}
.hero.compact h1{font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.15}
.hero.compact p.lede{font-size:1rem;margin-top:10px;max-width:56ch}
.hero.compact .searchbar{margin-top:16px}
@media(max-width:900px){.hero.compact .hero-grid{grid-template-columns:1fr;gap:22px}}

/* --- the four quick-action cards under the hero --- */
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#fff;
  border:1px solid var(--line);border-radius:var(--rlg);overflow:hidden;margin-top:-26px;position:relative;z-index:2;
  box-shadow:var(--shadow)}
.quick a{padding:18px 20px;border-right:1px solid var(--line);display:block;transition:.15s}
.quick a:last-child{border-right:0}
.quick a:hover{background:var(--paper)}
.quick b{display:block;font-family:var(--disp);font-size:.98rem;font-weight:600;margin-bottom:3px}
.quick span{font-size:.8rem;color:var(--muted);display:block;line-height:1.45}
.quick i{font-style:normal;color:var(--brass);font-family:var(--mono);font-size:.7rem}
@media(max-width:900px){.quick{grid-template-columns:repeat(2,1fr);margin-top:18px}
 .quick a:nth-child(2){border-right:0}.quick a:nth-child(1),.quick a:nth-child(2){border-bottom:1px solid var(--line)}}
@media(max-width:560px){.quick{grid-template-columns:1fr}.quick a{border-right:0;border-bottom:1px solid var(--line)}
 .quick a:last-child{border-bottom:0}}

/* --- subject browser: tabs on the left, journals on the right --- */
.browse{display:grid;grid-template-columns:250px 1fr;gap:0;border:1px solid var(--line);
  border-radius:var(--rlg);overflow:hidden;background:#fff}
.browse-tabs{background:var(--paper);border-right:1px solid var(--line);padding:8px 0}
.browse-tabs button{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:11px 18px;font-size:.87rem;color:var(--text);border-left:3px solid transparent;line-height:1.35}
.browse-tabs button:hover{background:#fff}
.browse-tabs button[aria-selected="true"]{background:#fff;border-left-color:var(--brass);font-weight:600}
.browse-tabs button em{font-style:normal;font-family:var(--mono);font-size:.68rem;color:var(--muted);float:right}
.browse-panels{padding:20px;min-width:0}
.browse-panels .panel{display:none}
.browse-panels .panel.on{display:block}
.jrow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.jcard{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:block;transition:.15s}
.jcard:hover{border-color:var(--ink);box-shadow:var(--shadow)}
.jcard .jbody > b{display:block;font-family:var(--disp);font-size:.98rem;font-weight:600;line-height:1.3;margin:8px 0 6px}
@media(max-width:900px){.browse{grid-template-columns:1fr}
 .browse-tabs{border-right:0;border-bottom:1px solid var(--line);display:flex;overflow-x:auto;padding:6px}
 .browse-tabs button{width:auto;white-space:nowrap;border-left:0;border-bottom:2px solid transparent;padding:9px 14px}
 .browse-tabs button[aria-selected="true"]{border-left:0;border-bottom-color:var(--brass)}
 .browse-tabs button em{display:none}}
@media(max-width:620px){.jrow{grid-template-columns:1fr}.browse-panels{padding:14px}}

/* --- two columns: latest and most read --- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:40px}
@media(max-width:960px){.two-col{grid-template-columns:1fr;gap:30px}}
.col-head{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:6px}
.col-head h2{font-size:1.25rem}
.col-head a{font-family:var(--mono);font-size:.72rem;color:var(--brass);text-transform:uppercase;letter-spacing:.08em}

/* --- ranked list for most read --- */
.ranked{border-top:1px solid var(--line);padding:16px 0;display:flex;gap:14px}
.ranked:first-of-type{border-top:0}
.ranked .n{font-family:var(--disp);font-size:1.5rem;font-weight:600;color:var(--brass-lt);line-height:1;min-width:32px}
.ranked h3{font-family:var(--disp);font-weight:500;font-size:1rem;line-height:1.4;letter-spacing:0}
.ranked h3 a{color:inherit}
.ranked h3 a:hover{color:var(--ink-mid);text-decoration:underline;text-decoration-color:var(--brass-lt);text-underline-offset:3px}
.ranked .meta{font-family:var(--mono);font-size:.68rem;color:var(--muted);margin-top:6px}

/* --- status tabs on the author dashboard --- */
.tabs{display:flex;gap:0;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:20px}
.tabs a{padding:11px 16px;font-size:.86rem;color:var(--muted);white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--text)}
.tabs a.on{color:var(--ink);border-bottom-color:var(--brass);font-weight:600}
.tabs a span{font-family:var(--mono);font-size:.72rem;color:var(--muted)}

/* --- article page: jump-to sections rail --- */
.sections{position:sticky;top:96px}
.sections a{display:block;padding:7px 0 7px 12px;font-size:.85rem;color:var(--muted);
  border-left:2px solid var(--line)}
.sections a:hover{color:var(--ink);border-left-color:var(--brass)}

/* --- hero facts list, replaces the search bar --- */
.hero-facts{list-style:none;padding:0;margin:0;border-left:2px solid rgba(255,255,255,.16)}
.hero-facts li{padding:9px 0 9px 18px;font-size:.88rem;color:rgba(255,255,255,.72);line-height:1.5}
.hero-facts li b{color:#fff;font-weight:500}
@media(max-width:900px){.hero-facts{border-left:0;border-top:1px solid rgba(255,255,255,.16);padding-top:6px}}

/* Tighter hero now there is no search field in it. */
.hero.compact{padding:40px 0 0}
.hero.compact .hero-grid{grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;padding-bottom:36px}
.hero.compact h1{font-size:clamp(1.7rem,3.1vw,2.6rem);max-width:16ch}

/* =====================================================================
   REVIEW ROUND 1 — journal covers, matched columns, author table
   ===================================================================== */

/* --- journal cover images --- */
.cover{display:block;border-radius:3px;box-shadow:0 2px 8px rgba(12,51,44,.18);flex-shrink:0;background:var(--ink)}
.cover-sm{width:48px;height:64px}
.cover-md{width:66px;height:88px}
.cover-lg{width:120px;height:160px}

/* --- journal card with a cover beside it --- */
.jcard{display:flex;gap:14px;align-items:flex-start}
.jcard .jbody{min-width:0;flex:1}
.jcard .jbody > b{display:block;font-family:var(--disp);font-size:.96rem;font-weight:600;line-height:1.3;margin:6px 0 5px}

/* --- Latest and Most read must match: same card, same height --- */
.two-col > div{display:flex;flex-direction:column}
.artlist{display:flex;flex-direction:column}
.artlist .art{padding:18px 0}
.artlist .art:first-child{padding-top:14px}
.artlist .art h3{font-size:1.02rem}
.artlist .art .abs{-webkit-line-clamp:2}
.col-foot{margin-top:auto;padding-top:16px}

/* --- co-author table on the submission form --- */
.authors-table{width:100%;border-collapse:collapse;margin-top:6px}
.authors-table th{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);font-weight:500;padding:8px 8px 8px 0;border-bottom:1px solid var(--line);text-align:left;background:none}
.authors-table td{padding:6px 8px 6px 0;border:0;vertical-align:middle}
.authors-table td:last-child{width:34px;padding-right:0}
.authors-table .inp{padding:8px 10px;font-size:.88rem}
.rowdel{background:none;border:1px solid var(--line);border-radius:4px;color:var(--muted);
  width:30px;height:34px;cursor:pointer;font-size:1rem;line-height:1}
.rowdel:hover{border-color:var(--danger);color:var(--danger)}
.addrow{margin-top:10px}
.filerow{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.filerow .inp{flex:1}
@media(max-width:720px){
  .authors-table thead{display:none}
  .authors-table tr{display:block;border:1px solid var(--line);border-radius:var(--r);padding:10px;margin-bottom:10px}
  .authors-table td{display:block;padding:4px 0;width:auto!important}
  .authors-table td:before{content:attr(data-label);display:block;font-family:var(--mono);font-size:.62rem;
    text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:3px}
  .jcard{flex-direction:column}
}

/* --- the signed-in person, at the top of both sidebars --- */
.sideuser{display:flex;gap:11px;align-items:center;padding:14px 20px;
  border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:6px}
.sideuser b{display:block;font-size:.88rem;color:#fff;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px){.sideuser{padding:8px 0 12px;margin:0}}

/* =====================================================================
   JOURNAL MICRO-SITES — each journal gets its own banner colour and menu
   ===================================================================== */
.jbanner{color:#fff;padding:40px 0 34px}
.jbanner h1{color:#fff;font-size:clamp(1.4rem,2.8vw,2.1rem);line-height:1.2;max-width:26ch;margin-top:10px}
.jbanner .eyebrow a:hover{color:#fff}

.jnav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.jnav .wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.jnav .wrap::-webkit-scrollbar{display:none}
.jnav a{padding:13px 14px;font-size:.84rem;color:var(--muted);white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.jnav a:hover{color:var(--text)}
.jnav a.on{color:var(--ink);border-bottom-color:var(--brass);font-weight:600}

.jstats{position:sticky;top:76px}
.jstats .row-b:first-of-type{border-top:0}

/* issue and archive cards */
.issue-card{border:1px solid var(--line);border-radius:var(--rlg);padding:16px;display:block;transition:.15s}
.issue-card:hover{border-color:var(--ink);box-shadow:var(--shadow)}
.issue-card b{display:block;font-family:var(--disp);font-size:1.05rem;font-weight:600}

/* article page tab strip: Abstract | Full-text | PDF | References | Authors | Cite */
.atabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);margin:22px 0 0;scrollbar-width:none}
.atabs::-webkit-scrollbar{display:none}
.atabs a,.atabs button{background:none;border:0;cursor:pointer;padding:11px 16px;font-size:.87rem;
  color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:inherit}
.atabs a:hover,.atabs button:hover{color:var(--text)}
/* Active tab: underline + colour only. The client asked for no bold. */
.atabs a[aria-selected="true"],.atabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--brass);font-weight:400}
.apanel{display:none;padding-top:22px}
.apanel.on{display:block}

/* the article's identifying block, like the reference site */
.aident{font-family:var(--mono);font-size:.76rem;color:var(--muted);line-height:1.9;margin-top:14px}
.aident b{color:inherit;font-weight:400}

/* --- admin: which journal am I working on --- */
.jcontext{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:var(--rlg);padding:16px 18px}
.jswitch{max-width:280px;padding:7px 10px;font-size:.82rem}
@media(max-width:900px){.jswitch{max-width:160px}}
@media(max-width:620px){.apphead .row{width:100%}.jswitch{max-width:100%}}

/* =====================================================================
   BACK-END SHELL — sidebar is a drawer below 1024px, fixed above it
   ===================================================================== */
.appburger{display:none;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  font-size:1.05rem;line-height:1;padding:9px 12px;cursor:pointer;color:var(--ink);flex-shrink:0}
.appburger:hover{border-color:var(--ink)}
.appback{display:none}

@media(max-width:1024px){
  .app{grid-template-columns:1fr;min-height:0}

  .side{position:fixed;inset:0 auto 0 0;width:min(280px,84vw);height:100vh;z-index:120;
    transform:translateX(-100%);transition:transform .24s ease;overflow-y:auto;
    box-shadow:20px 0 50px -20px rgba(0,0,0,.5);padding:18px 0}
  .side.open{transform:translateX(0)}

  .appback{display:block;position:fixed;inset:0;background:rgba(4,20,17,.55);z-index:110;
    opacity:0;pointer-events:none;transition:opacity .24s}
  .appback.on{opacity:1;pointer-events:auto}

  .appburger{display:block}
  .apphead{position:sticky;top:0;padding:12px 16px;gap:12px;flex-wrap:wrap}
  .apphead h2{font-size:1.1rem}
  .appbody{padding:16px;overflow-x:hidden}
}

@media(max-width:640px){
  .apphead{padding:10px 14px}
  .apphead > .row{width:100%;justify-content:space-between}
  .appbody{padding:12px}
  .jcontext{padding:14px}
  .jswitch{max-width:100%;width:100%}
  .stat{padding:13px 14px}
  .stat b{font-size:1.45rem}
  .stat span{font-size:.6rem;letter-spacing:.06em}
  .row{flex-wrap:wrap}
  .tl{padding-left:16px;margin-left:6px}
}

/* --- tables become cards on phones, using the data-label on each cell --- */
@media(max-width:760px){
  .tbl-wrap table{min-width:0}
  .tbl-wrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl-wrap tbody tr{display:block;border-bottom:1px solid var(--line);padding:12px 14px}
  .tbl-wrap tbody tr:last-child{border-bottom:0}
  .tbl-wrap td{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
    border:0;padding:5px 0;width:auto!important;text-align:left!important}
  .tbl-wrap td:before{content:attr(data-label);font-family:var(--mono);font-size:.62rem;
    text-transform:uppercase;letter-spacing:.09em;color:var(--muted);flex-shrink:0;padding-top:3px}
  .tbl-wrap td:empty{display:none}
  .tbl-wrap td[data-label=""]:before{display:none}
  .tbl-wrap td > *{min-width:0}
  tr.clickable:hover td{background:none}
}

/* --- forms: never let a grid squeeze inputs below readable --- */
@media(max-width:760px){
  .grid.g4,.grid.g3,.grid.g2{grid-template-columns:1fr}
  .grid.g4.stats-row{grid-template-columns:repeat(2,1fr)}
  form .card{padding:16px}
  .inp{font-size:16px}          /* stops iOS zooming in on focus */
}

/* --- public site tidy-ups --- */
@media(max-width:900px){
  .jbanner{padding:30px 0 26px}
  .jbanner h1{font-size:clamp(1.25rem,5vw,1.7rem)}
  .jstats{position:static}
  .split,.split-sm,.split-lg,.split-form{grid-template-columns:1fr}
}
@media(max-width:620px){
  .atabs a,.atabs button{padding:10px 12px;font-size:.82rem}
  .aident{font-size:.72rem}
  .ranked .n{font-size:1.2rem;min-width:26px}
  .col-head h2{font-size:1.1rem}
  .browse-panels{padding:12px}
}

/* =====================================================================
   HERO — the compact rule above has no breakpoint of its own, so it was
   overriding the mobile stack further up the file. This puts it back.
   ===================================================================== */
@media(max-width:900px){
  .hero.compact .hero-grid{grid-template-columns:1fr;gap:24px;align-items:start;padding-bottom:30px}
  .hero.compact h1{max-width:none}
  .hero-facts{border-left:0;border-top:1px solid rgba(255,255,255,.16);padding-top:6px;margin-top:4px}
  .hero-facts li{padding:8px 0}
}
@media(max-width:560px){
  .hero.compact{padding-top:30px}
  .hero.compact .hero-grid{padding-bottom:26px}
  .hero.compact h1{font-size:clamp(1.45rem,7vw,1.9rem)}
  .hero.compact p.lede{font-size:.95rem}
  .hero-facts li{font-size:.85rem;line-height:1.55}
  .hero .row .btn{flex:1 1 auto;justify-content:center}
}

/* =====================================================================
   REVIEW ROUND 2
   ===================================================================== */

/* --- ISSN line on journal cards: one straight line, same size.
       The old ".jcard b" rule also hit the <b> tags in this line and blew
       the ISSN and the article count up into big block text — the count
       then sat beside the ISSN looking like a superscript. --- */
.jcard .record b{display:inline;font-family:var(--mono);font-size:inherit;font-weight:500;margin:0;line-height:inherit}
.record.jrec span{white-space:nowrap}
img.cover{object-fit:cover}

/* --- journal banner with its logo --- */
.jbanner-in{display:flex;gap:22px;align-items:center}
.jbanner-logo{flex-shrink:0}
.jbanner-logo .cover{box-shadow:0 4px 16px rgba(0,0,0,.35)}
.jbanner-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-family:var(--mono);font-size:.72rem;color:rgba(255,255,255,.72)}

/* --- journal pages: left menu · content · stats --- */
.jgrid{display:grid;grid-template-columns:220px minmax(0,1fr) 280px;gap:28px;align-items:start}
.jside{background:#fff;border:1px solid var(--line);border-radius:var(--rlg);padding:14px 0;position:sticky;top:64px}
.jside .eyebrow{padding:0 16px 8px}
.jside a{display:block;padding:8px 16px;font-size:.88rem;color:var(--text);border-left:3px solid transparent}
.jside a:hover{background:var(--paper);color:var(--ink)}
.jside a.on{border-left-color:var(--brass);background:var(--brass-wash);font-weight:600;color:var(--ink)}
.jside a.jside-cta{margin-top:8px;border-top:1px solid var(--line-soft);padding-top:12px;color:var(--brass);font-weight:600}

.jinfo{display:flex;gap:22px;align-items:flex-start}
.jinfo-logo{flex-shrink:0}
.jinfo-body{min-width:0;flex:1}
.jinfo-name{font-size:1.25rem;line-height:1.3;text-transform:uppercase;letter-spacing:.01em}
.jinfo-list{margin:14px 0 18px}
.jinfo-list div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:6px 0;border-top:1px solid var(--line-soft);font-size:.9rem}
.jinfo-list dt{color:var(--muted)}
.jinfo-list dd{font-weight:500;word-break:break-word}
.jscope{margin-top:24px}
.jscope h3{margin-bottom:8px}

.jstat-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-top:1px solid var(--line-soft)}
.jstat-row b{font-size:.78rem;text-align:right;word-break:break-word}
.jstats .jstat-row:first-of-type{border-top:0}

/* Recent publications and Most read — side by side */
.jlists{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.jlists > div{min-width:0}

.boardlist{margin-top:22px;border-top:1px solid var(--line)}
.boardrow{display:grid;grid-template-columns:1.2fr .8fr 1.4fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:.9rem}

@media(max-width:1100px){
  .jgrid{grid-template-columns:200px minmax(0,1fr)}
  .jgrid-stats{grid-column:2}
}
@media(max-width:820px){
  .jgrid{grid-template-columns:1fr}
  .jgrid-stats{grid-column:auto}
  .jside{position:static}
  .jlists{grid-template-columns:1fr;gap:30px}
  .jinfo{flex-direction:column}
  .jbanner-logo{display:none}
  .boardrow{grid-template-columns:1fr}
}

/* --- editorial office --- */
.side .jlink{font-size:.82rem;padding:7px 20px}
.side .jlink b{color:var(--brass-lt);font-weight:500;margin-right:4px}
.side .sidenote{padding:4px 20px 8px;font-size:.76rem;color:rgba(255,255,255,.5)}
.side .sidebtn{display:block;width:100%;text-align:left;background:none;border:0;border-left:2px solid transparent;
  padding:9px 20px;font:inherit;font-size:.87rem;color:rgba(255,255,255,.74);cursor:pointer}
.side .sidebtn:hover{background:rgba(255,255,255,.05);color:#fff}
.jswitch{max-width:300px}

.wshead{background:#fff;border-bottom:1px solid var(--line);padding:14px 28px 0;display:flex;flex-direction:column;gap:12px}
.wsid{display:flex;gap:12px;align-items:center}
.wsid b{display:block;font-family:var(--disp);font-size:1.05rem}
.wstabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin:0 -4px}
.wstabs::-webkit-scrollbar{display:none}
.wstabs a{padding:10px 14px;font-size:.87rem;color:var(--muted);white-space:nowrap;border-bottom:3px solid transparent}
.wstabs a:hover{color:var(--text)}
.wstabs a.on{color:var(--ink);border-bottom-color:var(--brass);font-weight:600}
.wstabs .n{font-family:var(--mono);font-size:.68rem;background:var(--brass-wash);color:#6E4B0C;padding:1px 6px;border-radius:8px}

a.stat{display:block;color:inherit;text-decoration:none;transition:.15s}
a.stat:hover{border-color:var(--ink);box-shadow:var(--shadow)}
.wscard{display:flex;gap:14px;align-items:flex-start}
.wscard b{display:block;font-family:var(--disp);font-size:.98rem;line-height:1.3;margin:6px 0 4px}
.listrow{display:block;padding:12px 16px;border-top:1px solid var(--line-soft);color:inherit}
.listrow:first-child{border-top:0}
.listrow:hover{background:var(--paper)}
.listrow b{display:block;font-weight:500;font-size:.9rem;line-height:1.4;margin:4px 0 2px}

.issuebox{scroll-margin-top:90px}
.issuebox:target{border-color:var(--brass);box-shadow:0 0 0 3px var(--brass-wash)}
.issuearts{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.artrow{padding:9px 0;border-top:1px solid var(--line-soft);gap:12px}

.personcard{margin-top:12px;scroll-margin-top:90px}
.jchecks{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:4px 16px;margin:14px 0 10px}
.jchecks .check{margin:0;font-size:.86rem}

@media(max-width:1024px){
  .wshead{padding:12px 16px 0}
  .jswitch-wrap{order:3;width:100%}
  .jswitch{max-width:none;flex:1}
}

/* =====================================================================
   REVIEW ROUND 3
   ===================================================================== */

/* --- journal banner: compact, name on ONE line (long names end in "…"; full name on hover) --- */
.jbanner{padding:18px 0 16px}
.jbanner h1{margin:0;max-width:none;font-size:clamp(1.15rem,2vw,1.55rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jbanner-in{gap:16px}
.jbanner-logo .cover-sm{width:40px;height:54px}
.jbanner-meta{margin-top:5px;font-size:.68rem}

/* --- journal home: scirp-style info card with a big logo --- */
.cover-xl{width:170px;height:227px}
.jinfo{gap:26px}
.jinfo-logo{display:flex;flex-direction:column;gap:12px;width:170px}
.jinfo-name{text-transform:none;font-size:1.35rem;letter-spacing:0;line-height:1.25}
.jinfo-list{margin:12px 0 0}
.jinfo-list div{grid-template-columns:100px minmax(0,1fr);border-top:0;padding:3px 0}
.jinfo-list dt{font-weight:600;color:var(--text)}
.jinfo-list dd{font-weight:400}
.jabout{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.jabout h3{font-size:1rem;margin-bottom:6px}
.jabout p{font-family:var(--serif);font-size:1rem;line-height:1.7;color:var(--text)}

/* --- "Journal information" card under the left menu --- */
.jfacts .jfact{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--line-soft);font-size:.82rem}
.jfacts .jfact:first-of-type{border-top:0}
.jfacts .jfact span:first-child{color:var(--muted)}
.jfacts .jfact span:last-child{text-align:right;word-break:break-word}
.jfacts .jside-cta{display:block;margin-top:10px;font-size:.84rem;color:var(--brass);font-weight:600}
.jside .jside-cta{display:none}
.jstat-row .mono{font-size:.82rem}

/* --- archives: Volume 11, 2026  + --- */
.pagetitle{font-size:clamp(1.4rem,2.6vw,2rem)}
.volumes{border-top:1px solid var(--line)}
.vol{border-bottom:1px solid var(--line)}
.vol summary{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;cursor:pointer;list-style:none;
  font-family:var(--disp);font-size:1.08rem;font-weight:600}
.vol summary::-webkit-details-marker{display:none}
.vol summary:hover{color:var(--brass)}
.vol-toggle::before{content:"+";font-family:var(--mono);font-size:1.3rem;font-weight:400;color:var(--brass)}
.vol[open] .vol-toggle::before{content:"−"}
.vol-issues{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 4px 16px}
.vol-issues a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:#fff;font-size:.9rem}
.vol-issues a:hover{border-color:var(--brass)}

/* --- article page --- */
.atitle{font-family:var(--disp);font-weight:500;font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.3;letter-spacing:0;margin:12px 0 10px}
.aauthors{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:1rem}
.atabs a{display:inline-block;text-decoration:none}
.rich p{margin:0 0 1em}
.rich h2,.rich h3,.rich h4{font-family:var(--disp);margin:1.3em 0 .5em}
.rich ul,.rich ol{margin:0 0 1em 1.4em}
.rich table{border-collapse:collapse;margin:1em 0;display:block;overflow-x:auto}
.rich th,.rich td{border:1px solid var(--line);padding:6px 10px;font-size:.9rem}
.reflist p,.reflist li{font-family:var(--serif);font-size:.95rem;line-height:1.6;padding-left:24px;text-indent:-24px;margin:0 0 .7em}
.pdfview{width:100%;height:78vh;min-height:520px;border:1px solid var(--line);border-radius:var(--rlg);background:#fff}
.citebox{border:1px solid var(--line);border-radius:var(--rlg);background:#fff;padding:12px 14px;margin-bottom:10px}
.citebox p{font-family:var(--serif);font-size:.95rem;margin-top:4px;user-select:all}
.authrow{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line-soft)}
.authname{display:block}

/* --- rich-text editor in the office --- */
.rte{border:1px solid var(--line);border-radius:var(--r);background:#fff}
.rte:focus-within{border-color:var(--ink)}
.rte-bar{display:flex;flex-wrap:wrap;gap:2px;padding:5px;border-bottom:1px solid var(--line);background:var(--paper)}
.rte-bar button{background:#fff;border:1px solid var(--line);border-radius:3px;padding:3px 9px;font-size:.82rem;cursor:pointer;min-width:32px;color:var(--text)}
.rte-bar button:hover{border-color:var(--ink)}
.rte-area{border:0 !important;border-radius:0;min-height:96px;overflow-y:auto;max-height:60vh;line-height:1.6;outline:none}
.rte-inline .rte-area{min-height:0}
.rte-area p{margin:0 0 .6em}
.rte-area h3{font-size:1.05rem;margin:.6em 0 .3em}
.rte-area ul,.rte-area ol{margin-left:1.3em}
.rte-area.is-empty:before{content:attr(data-placeholder);color:var(--faint)}

/* --- article / page forms: one column, the save bar at the end --- */
.artform{max-width:980px}
.publishbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;border-left:3px solid var(--brass)}

/* --- staff: volumes & issues list, one issue --- */
.volhead{padding:12px 16px;border-bottom:1px solid var(--line-soft);font-family:var(--disp);font-weight:600;display:flex;gap:10px;align-items:baseline}
.issuerow{display:flex;align-items:center;gap:14px;padding:12px 16px;border-top:1px solid var(--line-soft);color:inherit}
.issuerow:first-of-type{border-top:0}
.issuerow:hover{background:var(--paper)}
.issuerow > b{min-width:170px;font-weight:500}
.issuerow .issuetitle{flex:1;min-width:0}
.issuerow > .small{flex:1}
.issuego{color:var(--faint);font-size:1.2rem;margin-left:auto}
.issuenav{margin-bottom:16px;flex-wrap:wrap;gap:10px}

/* --- header "Others" drop-down --- */
.navdrop{position:relative}
.navdrop-btn{background:none;border:0;color:var(--brass-lt);font:inherit;font-size:.88rem;cursor:pointer;padding:6px 0}
.navdrop-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:250px;background:#fff;border:1px solid var(--line);
  border-radius:var(--rlg);box-shadow:var(--shadow);padding:6px 0;z-index:200}
.navdrop:hover .navdrop-menu,.navdrop:focus-within .navdrop-menu,.navdrop.open .navdrop-menu{display:block}
nav.main .navdrop-menu a{display:block;color:var(--text);padding:8px 16px;border:0;font-size:.87rem}
nav.main .navdrop-menu a:hover{background:var(--paper);color:var(--ink)}

/* --- general pages: wide, with the scirp-style sidebar --- */
.pagehero{background:var(--ink);color:#fff;padding:34px 0 30px}
.pagehero h1{color:#fff;margin:8px 0;font-size:clamp(1.6rem,3vw,2.3rem)}
.pagehero .lede{max-width:80ch}
.sec-tight{padding:34px 0}
.sitegrid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;align-items:start}
.sitemain .prose{max-width:none}
.sitebar .card{padding:12px 0}
.sitebar-h{font-weight:600;font-size:.9rem;padding:0 16px 8px;margin:0 16px 4px 16px;padding-left:0;border-bottom:2px solid var(--brass)}
.sitebar a{display:block;padding:6px 16px;font-size:.86rem;color:var(--ink-mid)}
.sitebar a:hover,.sitebar a.on{background:var(--paper);color:var(--ink);font-weight:600}
.sitebar-top{font-weight:600;font-size:.95rem;padding:12px 16px !important}
.authorcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.authorcard h2{font-size:1.15rem;margin-bottom:8px}
.authorcard p{font-size:.92rem;color:var(--muted);margin-bottom:10px}

/* --- homepage: tighter --- */
.steps6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.steps6 .card{padding:14px}
.home-tight .art{padding:14px 0}

@media(max-width:1100px){ .steps6{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:1024px){
  .navdrop-menu{position:static;transform:none;box-shadow:none;border:0;background:transparent;display:block;padding:0 0 0 12px;min-width:0}
  nav.main .navdrop-menu a{color:rgba(255,255,255,.75);padding:7px 0}
  .navdrop-btn{padding:10px 0;color:#fff}
}
@media(max-width:820px){
  .sitegrid{grid-template-columns:1fr}
  .sitegrid > aside{order:2}
  .authorcards{grid-template-columns:1fr}
  .vol-issues{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jinfo-logo{width:auto;flex-direction:row;align-items:flex-end}
  .cover-xl{width:120px;height:160px}
  .jbanner h1{white-space:normal}
  .issuerow{flex-wrap:wrap}
  .issuerow > b{min-width:0}
}
@media(max-width:560px){ .steps6{grid-template-columns:repeat(2,minmax(0,1fr))} }
.jinfo-list div{grid-template-columns:118px minmax(0,1fr)}
.jinfo-list dt{white-space:nowrap}
.jfacts .jfact{flex-direction:column;gap:1px}
.jfacts .jfact span:first-child{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;font-family:var(--mono)}
.jfacts .jfact span:last-child{text-align:left}
/* All six article tabs must always be visible — wrap instead of scrolling off. */
.atabs{flex-wrap:wrap;overflow:visible}
.atabs a{padding:10px 11px;font-size:.84rem}
.atabs a{padding:10px 8px;font-size:.8rem}
.atabs a + a{border-left:0}
@media(min-width:1100px){ .atabs{flex-wrap:nowrap;justify-content:space-between} }

/* === Brand fonts: Playfair Display is wider and higher-contrast than Fraunces —
   slightly lighter weights and no negative tracking keep headings crisp. === */
h1,h2,h3,h4{font-weight:600;letter-spacing:0}
.atitle,.art h3,.ranked h3{font-weight:600}
.aauthors,.art .authors{font-style:italic}
.brandlogo{max-width:100%}
@media(max-width:1024px){ header.site .brandlogo{height:42px !important} }
@media(max-width:560px){ header.site .brandlogo{height:36px !important} }

/* =====================================================================
   JOURNAL PAGES — academicjournals.org structure (final round)
   ===================================================================== */

/* --- header band in the journal's own colour, name centred --- */
.jhead{background:var(--jc,var(--ink));color:#fff;padding:30px 0 0;position:relative}
.jhead::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.22));pointer-events:none}
.jhead-in{position:relative;text-align:center}
.jhead-name{margin:0;color:#fff;font-weight:400;line-height:1.1}
.jhead-small{display:block;font-family:var(--sans);font-size:clamp(.95rem,1.6vw,1.3rem);text-transform:uppercase;letter-spacing:.06em;font-weight:400;opacity:.92}
.jhead-big{display:block;font-family:var(--disp);font-size:clamp(1.7rem,3.6vw,2.7rem);font-weight:700;text-transform:uppercase;letter-spacing:.01em;margin-top:4px}
.jhead-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;margin:14px auto 0;font-size:.85rem;color:rgba(255,255,255,.85)}
.jhead-meta span{padding:0 12px;border-left:1px solid rgba(255,255,255,.35)}
.jhead-meta span:first-child{border-left:0}
.jhead-meta b{color:#fff;font-weight:600}
.jhead-nav{position:relative;display:flex;flex-wrap:wrap;justify-content:center;background:#fff;border:1px solid var(--line);
  border-bottom:0;margin-top:24px;max-width:900px;padding:0 10px;border-radius:var(--r) var(--r) 0 0}
.jhead-nav a{color:var(--text);font-size:.86rem;font-weight:600;padding:14px 16px;border-bottom:3px solid transparent;position:relative}
.jhead-nav a + a::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:1px;background:var(--line)}
.jhead-nav a:hover{color:var(--ink)}
.jhead-nav a.on{border-bottom-color:var(--jc,var(--brass));color:var(--ink)}

/* --- featured slider --- */
.feat-wrap{background:#fff;border-bottom:1px solid var(--line);padding:24px 0}
.feat{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:stretch;border:1px solid var(--line);
  border-radius:var(--rlg);padding:14px;background:#fff}
.feat-cover .cover-xl{width:150px;height:200px}
.feat-slides{position:relative;min-height:200px}
.feat-slide{display:none;padding:6px 0}
.feat-slide.on{display:block;animation:featin .35s ease}
@keyframes featin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){ .feat-slide.on{animation:none} }
.feat-slide h2{font-family:var(--sans);font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1.4}
.feat-slide h2 a{color:var(--ink)}
.feat-meta{font-size:.78rem;color:var(--muted);margin:6px 0 10px}
.feat-abs{font-size:.93rem;line-height:1.65;color:var(--text)}
.feat-more{display:inline-block;margin-top:10px;font-weight:700;font-size:.9rem;color:var(--ink);border-bottom:2px solid var(--brass)}
.feat-arrows{display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:8px}
.feat-arrows button{background:var(--paper);border:1px solid var(--line);border-radius:3px;width:30px;height:30px;cursor:pointer;font-size:.72rem;color:var(--ink)}
.feat-arrows button:hover{border-color:var(--ink)}
.feat-count{font-family:var(--mono);font-size:.7rem;color:var(--muted);writing-mode:vertical-rl}

/* --- main column + right sidebar --- */
.jsec{background:var(--paper)}
.jlayout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:28px;align-items:start}
.jmain{min-width:0}

.alist-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px;font-size:.88rem}
.alist-view,.alist-sort{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.alist-view span,.alist-sort span{font-weight:700}
.alist-bar a{color:var(--muted)}
.alist-bar a.on{color:var(--ink);font-weight:600;border-bottom:2px solid var(--brass)}
.alist{display:flex;flex-direction:column;gap:16px}
.acard{background:#fff;border:1px solid var(--line);border-radius:var(--rlg);padding:20px 22px}
.acard-title{font-family:var(--sans);font-size:1.12rem;font-weight:600;line-height:1.45;letter-spacing:0;margin:0}
.acard-title a{color:var(--text)}
.acard-title a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--brass)}
.acard-date{font-size:.88rem;color:var(--muted);margin:8px 0 6px}
.acard-authors{font-size:.86rem;color:var(--text);margin-bottom:6px}
.acard-ids{font-size:.82rem;display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:14px;color:var(--text)}
.acard-ids .link{color:#1F6FB2;border:0;word-break:break-all}
.acard-ids .sep{color:var(--faint)}
.pager{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:22px;font-size:.9rem}
.pager a{border:1px solid var(--line);background:#fff;border-radius:var(--r);padding:7px 14px;color:var(--ink)}

.jsb{display:flex;flex-direction:column;gap:12px;position:sticky;top:90px}
.jsb-search{display:flex;background:var(--jc,var(--ink));border-radius:var(--r);overflow:hidden}
.jsb-search input{flex:1;min-width:0;border:0;background:transparent;color:#fff;padding:10px 12px;font:inherit;font-size:.86rem}
.jsb-search input::placeholder{color:rgba(255,255,255,.75)}
.jsb-search button{border:0;background:rgba(0,0,0,.18);color:#fff;width:42px;font-size:1.1rem;cursor:pointer}
.jsb-go{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:11px 14px;font-weight:700;font-size:.9rem;color:var(--text)}
.jsb-go small{display:block;font-weight:400;font-size:.74rem;color:var(--muted)}
.jsb-go i{font-style:normal;font-size:1.2rem;color:var(--ink)}
.jsb-go:hover{border-color:var(--ink)}
.jsb-pages{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:6px 0}
.jsb-pages a{display:block;padding:9px 14px;font-size:.88rem;color:var(--text);border-top:1px solid var(--line-soft)}
.jsb-pages a:first-child{border-top:0}
.jsb-pages a:hover,.jsb-pages a.on{background:var(--paper);color:var(--ink);font-weight:600}
.jsb-stats{display:flex;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.jsb-stats div{flex:1;text-align:center;padding:10px 4px;border-left:1px solid var(--line-soft)}
.jsb-stats div:first-child{border-left:0}
.jsb-stats b{display:block;font-family:var(--mono);font-size:.9rem}
.jsb-stats span{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* --- footer: action bar + six columns --- */
footer.site{padding:0}
.footcta{background:#061f1b;border-bottom:1px solid rgba(255,255,255,.08);padding:22px 0}
.footcta-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:18px;align-items:center}
.footcta-in > a{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.07);color:#fff;
  padding:11px 14px;border-radius:var(--r);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.footcta-in > a:hover{background:rgba(255,255,255,.14)}
.footcta-in > a i{font-style:normal;font-size:1.1rem}
.footbadges{display:flex;gap:18px;align-items:center;color:#fff}
.badge-oa{display:flex;align-items:center;gap:6px;font-weight:800;font-size:.72rem;line-height:1}
.badge-cc{font-weight:800;font-size:.72rem;line-height:1}
.badge-cc b{display:inline-flex;align-items:center;justify-content:center;border:2px solid #fff;border-radius:50%;width:24px;height:24px;margin-right:4px;font-size:.72rem;vertical-align:middle}
.footcols{display:grid;grid-template-columns:1.4fr repeat(6,minmax(0,1fr));gap:26px;padding:40px 0 30px}
.footcols h4{font-family:var(--sans);font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#fff;margin-bottom:12px}
.footcols a{display:block;font-size:.84rem;color:rgba(255,255,255,.72);padding:4px 0}
.footcols a:hover{color:#fff}
.footbrand p{font-size:.82rem;color:rgba(255,255,255,.6);margin-top:12px;max-width:26ch}
.footbar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;border-top:1px solid rgba(255,255,255,.1);padding:18px 0 26px;font-size:.78rem;color:rgba(255,255,255,.55)}

@media(max-width:1100px){
  .footcols{grid-template-columns:repeat(4,minmax(0,1fr))}
  .footbrand{grid-column:1 / -1}
}
@media(max-width:900px){
  .jlayout{grid-template-columns:1fr}
  .jsb{position:static}
  .feat{grid-template-columns:1fr auto}
  .feat-cover{display:none}
  .footcta-in{grid-template-columns:1fr}
  .footbadges{justify-content:center}
}
@media(max-width:640px){
  .jhead-nav{border-radius:0;padding:0;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;scrollbar-width:none}
  .jhead-nav::-webkit-scrollbar{display:none}
  .jhead-nav a{white-space:nowrap;padding:12px 12px;font-size:.82rem}
  .jhead-meta{font-size:.76rem}
  .jhead-meta span{padding:0 8px}
  .footcols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .alist-bar{flex-direction:column;align-items:flex-start}
}
/* footer: beat the older generic `footer.site a` / `footer.site h4` rules */
footer.site .footcta-in > a{display:flex;justify-content:space-between;align-items:center;padding:11px 14px}
footer.site .footcols h4{font-family:var(--sans);font-size:.8rem;font-weight:800;letter-spacing:.06em}
footer.site .footbrand p{max-width:30ch}
.ftstatus{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 10px}

/* =====================================================================
   ARTICLE PAGE — academicjournals.org structure
   ===================================================================== */
.ahead{background:#fff;border-bottom:1px solid var(--line)}
.ahead-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;padding-top:26px;padding-bottom:18px}
.ahead-cover .cover-xl{width:190px;height:253px;box-shadow:0 6px 20px rgba(12,51,44,.18)}
.atype{display:inline-block;background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:6px 14px;font-size:.88rem}
.ahead .atitle{font-family:var(--disp);font-weight:600;font-size:clamp(1.45rem,2.6vw,2.05rem);line-height:1.3;margin:18px 0 16px}

/* authors with hover/tap card */
.aulist{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 16px;padding:0}
.au{position:relative}
.au-name{background:none;border:0;padding:0;font:inherit;font-weight:700;font-size:.97rem;color:var(--text);cursor:pointer;
  border-bottom:1px dotted var(--faint)}
.au-name:hover,.au-name:focus-visible{color:var(--ink);border-bottom-color:var(--brass)}
.au-card{display:none;position:absolute;left:0;top:calc(100% + 8px);z-index:50;width:min(360px,80vw);background:#fff;
  border:1px solid var(--line);border-radius:6px;box-shadow:0 12px 32px rgba(0,0,0,.14);padding:12px 14px;font-size:.84rem;line-height:1.45}
.au-card::before{content:"";position:absolute;top:-7px;left:18px;width:12px;height:12px;background:#fff;
  border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.au:hover .au-card,.au:focus-within .au-card,.au.open .au-card{display:block}
.au-card b{display:block}
.au-aff{display:block;color:var(--text);margin-top:3px}
.au-orcid{display:block;font-family:var(--mono);font-size:.74rem;color:var(--ok);margin-top:4px}
.au-search{display:block;margin-top:10px;padding-top:8px;border-top:1px solid var(--line-soft)}
.au-search a{color:#1F6FB2}

.aids,.adates{display:flex;flex-wrap:wrap;gap:4px 0;font-size:.92rem;color:var(--text);margin:0 0 6px}
.aids span,.adates span{padding:0 12px;border-left:1px solid var(--line)}
.aids span:first-child,.adates span:first-child{padding-left:0;border-left:0}
.adates span{display:inline-flex;align-items:center;gap:6px}
.adates svg{color:var(--muted)}
.aids .link{color:#1F6FB2;border:0;word-break:break-all}
.acopy{font-size:.86rem;color:var(--text);margin-top:12px;line-height:1.5}
.acopy .link{color:#1F6FB2;border:0}

/* tab bar across the page */
.ahead .atabs{justify-content:center;background:var(--paper);border:1px solid var(--line);border-bottom:0;border-radius:6px 6px 0 0;
  margin-top:8px;padding:0 10px;flex-wrap:wrap}
.ahead .atabs a{font-size:.88rem;padding:12px 14px;position:relative;color:var(--text);border-bottom:3px solid transparent}
.ahead .atabs a + a::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:var(--line)}
.ahead .atabs a[aria-selected="true"]{font-weight:700;color:var(--ink);border-bottom-color:var(--brass)}

/* body: content + sidebar */
.abody{background:var(--paper);padding:26px 0 50px}
.abody-in{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
.amain{min-width:0}
.amain h2{font-family:var(--disp);font-size:1.7rem;margin:0 0 12px}
/* Abstract justified; keywords the same size as the abstract. */
.abstract,.abstract p{font-family:var(--sans);font-size:1.06rem;line-height:1.8;text-align:justify;hyphens:auto;-webkit-hyphens:auto;color:var(--text)}
.akeywords{font-size:1.06rem;line-height:1.8;margin-top:18px;color:var(--text)}
.akeywords b{font-weight:700}
.fulltext,.fulltext p{font-size:1.02rem;line-height:1.8;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.fulltext h3{font-family:var(--disp);font-size:1.25rem;margin:1.6em 0 .5em;text-align:left}
.ftnote{background:#fff;border-left:3px solid var(--brass);padding:10px 14px;font-size:.86rem;color:var(--muted);margin-bottom:18px}
.alinks{margin:10px 0 0 1.2em}
.ametrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ametrics div{background:#fff;border:1px solid var(--line);border-radius:6px;padding:16px;text-align:center}
.ametrics b{display:block;font-family:var(--disp);font-size:1.8rem}
.ametrics span{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.abottom{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.abottom a{background:#fff;border:1px solid var(--line);border-radius:4px;padding:7px 12px;font-size:.88rem;color:var(--text)}
.abottom a:hover{border-color:var(--ink)}
.amain > .acopy{margin-top:18px}

.asb{display:flex;flex-direction:column;gap:12px;position:sticky;top:90px}
.asb-go{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:11px 14px;font-weight:700;font-size:.92rem;color:var(--text)}
.asb-go i{font-style:normal;font-size:1.15rem}
.asb-go:hover{border-color:var(--ink)}
.asb-card{background:#fff;border:1px solid var(--line);border-radius:4px;padding:8px 14px}
.asb-links a{display:block;padding:10px 0;font-size:.9rem;color:var(--text);border-top:1px solid var(--line-soft)}
.asb-links a:first-child{border-top:0}
.asb-card > a{display:block;font-size:.9rem;color:var(--text);padding:3px 0}
.asb-card > a:hover,.asb-links a:hover{color:var(--ink);text-decoration:underline}
.asb-h{font-weight:700;font-size:.9rem;margin:10px 0 4px;padding-top:8px;border-top:1px solid var(--line-soft)}
.asb-h:first-child{border-top:0;padding-top:0;margin-top:4px}
.asb-author{font-style:italic}

@media(max-width:900px){
  .ahead-in{grid-template-columns:1fr}
  .ahead-cover{display:none}
  .abody-in{grid-template-columns:1fr}
  .asb{position:static}
  .ahead .atabs{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;border-radius:0;padding:0}
  .ahead .atabs::-webkit-scrollbar{display:none}
  .ahead .atabs a{white-space:nowrap}
  .abstract,.abstract p,.fulltext,.fulltext p{text-align:left}   /* justified text rivers badly on narrow screens */
}
@media(max-width:560px){ .ametrics{grid-template-columns:1fr} .aids span,.adates span{padding:0 8px} }

/* =====================================================================
   HOMEPAGE — five quick-action BUTTONS under the hero
   ===================================================================== */
.quick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;background:none;border:0;box-shadow:none;
  border-radius:0;overflow:visible;margin-top:-26px;position:relative;z-index:2}
.quick a.qbtn{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;background:#fff;color:var(--text);
  border:1.5px solid var(--line);border-bottom-width:3px;border-radius:10px;box-shadow:0 6px 18px rgba(12,51,44,.10);
  cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s,background .15s;text-decoration:none;min-height:78px}
.quick a.qbtn:hover{transform:translateY(-2px);border-color:var(--ink);box-shadow:0 10px 24px rgba(12,51,44,.16);background:#fff}
.quick a.qbtn:active{transform:translateY(1px);box-shadow:0 3px 8px rgba(12,51,44,.12);border-bottom-width:1.5px}
.quick a.qbtn:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.qicon{flex-shrink:0;display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:var(--brass-wash);color:var(--ink)}
.qtext{min-width:0;flex:1}
.quick .qtext b{display:block;font-family:var(--sans);font-size:.93rem;font-weight:700;line-height:1.25;margin:0;color:var(--ink)}
.quick .qtext span{display:block;font-size:.76rem;color:var(--muted);line-height:1.35;margin-top:3px}
.qarrow{flex-shrink:0;font-size:1.05rem;color:var(--brass);transition:transform .15s}
.quick a.qbtn:hover .qarrow{transform:translateX(3px)}
/* the main action: filled */
.quick a.qbtn.primary{background:var(--brass);border-color:#a8781f;color:var(--ink)}
.quick a.qbtn.primary .qicon{background:rgba(255,255,255,.35)}
.quick a.qbtn.primary .qtext span{color:rgba(12,51,44,.78)}
.quick a.qbtn.primary .qarrow{color:var(--ink)}
.quick a.qbtn.primary:hover{background:#cb9636;border-color:var(--ink)}
.hero.compact .hero-grid{padding-bottom:52px}

@media(max-width:1100px){ .quick{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:760px){ .quick{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:-20px} .quick a.qbtn.primary{grid-column:1 / -1} }
@media(max-width:460px){ .quick{grid-template-columns:1fr} .quick a.qbtn{min-height:64px} }
/* Icon boxes: an older ".quick span {display:block}" rule was beating the centring — be specific. */
.quick .qicon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;margin:0;line-height:0;font-size:0}
.quick .qicon svg{display:block;width:22px;height:22px;flex-shrink:0}
.quick .qarrow{display:flex;align-items:center;font-size:1.05rem;margin:0}
.mastprev{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:4px;background:#F2F3F1}

/* Quick-action buttons, calmer (client: "too busy"): icon + one short label, one line, no descriptions. */
.quick{gap:10px;margin-top:-28px}
.quick a.qbtn{min-height:0;padding:12px 14px;gap:10px;border-width:1px;border-bottom-width:1px;border-radius:999px;
  box-shadow:0 4px 14px rgba(12,51,44,.10);justify-content:flex-start}
.quick a.qbtn:active{border-bottom-width:1px}
.quick .qicon{width:34px;height:34px;border-radius:50%}
.quick .qicon svg{width:18px;height:18px}
.quick .qtext b{font-size:.92rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quick .qarrow{margin-left:auto;font-size:.95rem;opacity:.7}
.quick a.qbtn:hover .qarrow{opacity:1}
.quick a.qbtn.primary{box-shadow:0 6px 18px rgba(192,138,46,.35)}
@media(max-width:760px){ .quick a.qbtn{border-radius:12px} }
@media(max-width:1100px) and (min-width:761px){
  .quick{display:flex;flex-wrap:wrap;justify-content:center}
  .quick a.qbtn{flex:0 1 calc(33.333% - 7px)}
}

/* =====================================================================
   USER GUIDE (staff /staff/guide, authors /guide) — signed-in only
   ===================================================================== */
.guide{display:grid;grid-template-columns:230px minmax(0,1fr);gap:32px;align-items:start;max-width:1100px}
.guide-toc{position:sticky;top:96px;background:#fff;border:1px solid var(--line);border-radius:var(--rlg);padding:14px 0 14px}
.guide-toc .eyebrow{padding:0 16px 6px}
.guide-toc a{display:block;padding:6px 16px;font-size:.86rem;color:var(--text);border-left:3px solid transparent}
.guide-toc a:hover{background:var(--paper);border-left-color:var(--brass);color:var(--ink)}
.guide-toc .btn{margin-left:14px;margin-right:14px;width:auto}
.guide-body{background:#fff;border:1px solid var(--line);border-radius:var(--rlg);padding:30px 34px;min-width:0}
.guide-intro{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:8px}
.guide-intro h1{font-size:2rem;margin:6px 0 10px}
.guide-intro p{color:var(--muted);max-width:70ch}
.guide-body section{padding:22px 0 8px;border-bottom:1px solid var(--line-soft);scroll-margin-top:90px}
.guide-body section:last-child{border-bottom:0}
.guide-body h2{font-size:1.3rem;margin:0 0 10px}
.guide-body p,.guide-body li,.guide-body dd{font-size:.95rem;line-height:1.7;color:var(--text)}
.guide-body p{margin:0 0 10px;max-width:75ch}
.guide-body ol,.guide-body ul{margin:0 0 12px 1.3em;max-width:75ch}
.guide-body li{margin-bottom:6px}
.guide-body li ul{margin-top:6px}
.guide-body .tip{background:var(--brass-wash);border-left:3px solid var(--brass);padding:10px 14px;border-radius:0 6px 6px 0;font-size:.9rem}
.guide-dl{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:8px 18px;margin:6px 0 12px}
.guide-dl dt{font-weight:700;font-size:.92rem}
.guide-dl dd{margin:0}
.guide-part{margin:30px -34px 0;padding:18px 34px;background:var(--ink);color:#fff}
.guide-part h2{color:#fff}
.guide-part .eyebrow{color:var(--brass-lt)}
.guide .tbl-wrap{margin:6px 0 12px}
@media(max-width:900px){
  .guide{grid-template-columns:1fr}
  .guide-toc{position:static}
  .guide-body{padding:22px 18px}
  .guide-part{margin:24px -18px 0;padding:16px 18px}
  .guide-dl{grid-template-columns:1fr;gap:2px}
  .guide-dl dd{margin-bottom:8px}
}
@media print{
  .side,.apphead,.appback,.wshead,.portal-side,.portal-head,header.site,footer.site,.guide-toc,.notice{display:none !important}
  .app,.appmain,.appbody{display:block !important;margin:0 !important;padding:0 !important}
  .guide{display:block;max-width:none}
  .guide-body{border:0;padding:0}
  .guide-body section{break-inside:auto}
  .guide-body h2,.guide-dl dt{break-after:avoid}
  .guide-body li,.guide-body .tip,.guide .tbl-wrap tr{break-inside:avoid}
  .guide-part{background:none;color:#000;margin:20px 0 0;padding:0;border-top:2px solid #000}
  .guide-part h2,.guide-part .eyebrow{color:#000}
  a{color:inherit;text-decoration:none}
  /* keep tables as tables on paper (the narrow page would otherwise trigger the phone layout) */
  .guide table{display:table !important;width:100%;border-collapse:collapse}
  .guide thead{display:table-header-group !important}
  .guide tr{display:table-row !important}
  .guide th,.guide td{display:table-cell !important;text-align:left !important;padding:5px 8px !important;border-bottom:1px solid #ddd}
  .guide td::before{content:none !important;display:none !important}
}
/* links inside page/article text */
.rich a[href],.prose a[href]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--brass);text-underline-offset:2px}
.rich a[href]:hover,.prose a[href]:hover{color:var(--brass)}
footer.site .footbar a{display:inline;padding:0;color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:2px}
footer.site .footbar a:hover{color:#fff}

/* =====================================================================
   FINAL REVIEW — hero: headline + Submit (left), Join our team (right)
   ===================================================================== */
.hero.hero-v2{padding:46px 0 50px}
.hero2-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center}
.hero2-main h1{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.18;max-width:20ch;margin:0 0 24px;color:#fff}
.hero2-main h1 em{color:var(--brass-lt);font-style:italic;font-weight:500}
.hero2-btn{padding:14px 24px;font-size:1rem;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.hero2-btn span{margin-left:8px}
.hero2-join{display:flex;align-items:center;gap:14px;padding:16px 22px;border:1.5px solid rgba(255,255,255,.35);border-radius:14px;
  color:#fff;background:rgba(255,255,255,.06);min-width:260px;transition:background .15s,border-color .15s}
.hero2-join:hover{background:rgba(255,255,255,.12);border-color:var(--brass-lt)}
.hero2-join b{display:block;font-size:1.05rem}
.hero2-join small{display:block;font-size:.8rem;color:rgba(255,255,255,.7);margin-top:2px}
.hero2-join > span:last-child{margin-left:auto;color:var(--brass-lt);font-size:1.1rem}
.hero2-join-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);color:var(--brass-lt)}
@media(max-width:760px){
  .hero2-grid{grid-template-columns:1fr;gap:20px}
  .hero2-join{min-width:0}
}
.browse-title{font-size:clamp(1.4rem,2.4vw,1.8rem);margin:0}
.seeall{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:10px 16px;border:1.5px solid var(--ink);border-radius:999px;
  font-weight:600;font-size:.9rem;color:var(--ink);background:#fff}
.seeall:hover{background:var(--ink);color:#fff}
.catgroup{margin-bottom:18px}
.catgroup-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--paper)}
.catgroup-head h3{margin:0;font-size:1.05rem}

/* ---- final review: journal name in normal case, smaller page titles, left-aligned article tabs ---- */
.jhead-name{font-family:var(--disp);font-size:clamp(1.5rem,3vw,2.3rem);font-weight:700;text-transform:none;letter-spacing:0;line-height:1.2;max-width:28ch;margin:0 auto}
.jpage-title{font-size:clamp(1.25rem,2vw,1.55rem);margin:0 0 14px;line-height:1.3}
.ahead .atabs{justify-content:flex-start}

/* ---- Word-style content (pages, abstracts, full text): tables, figures, images ---- */
.rich img{max-width:100%;height:auto;display:block;margin:14px auto;border-radius:2px}
.rich figure{margin:20px 0;text-align:center}
.rich figcaption{font-size:.88rem;color:var(--muted);margin-top:6px}
.rich table{border-collapse:collapse;margin:16px 0;width:100%;display:table;font-size:.92rem}
.rich-table-wrap{overflow-x:auto}
.rich th,.rich td{border:1px solid var(--line);padding:7px 10px;vertical-align:top;text-align:left}
.rich th{background:var(--paper);font-weight:700}
.rich caption{caption-side:top;text-align:left;font-weight:600;padding:6px 0}
.rich hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.rich blockquote{border-left:3px solid var(--brass);padding:4px 0 4px 14px;margin:14px 0;color:var(--muted)}
.rich ol,.rich ul{margin:0 0 1em 1.4em}
.jpage-body{font-size:1rem;line-height:1.75}
.jpage-body p{margin:0 0 1em}
.ft-refs-title{margin-top:30px}
@media(max-width:760px){ .rich table{display:block;overflow-x:auto} }
/* article lists: no Abstract button, date on the ID line; slider title in normal case */
.acard-ids{margin-bottom:0}
.acard-authors{margin:8px 0 6px}
.feat-slide h2{text-transform:none;font-family:var(--disp);font-size:1.15rem;font-weight:600;letter-spacing:0}
/* footer — client layout: brand + Author / Important Links / Policies */
footer.site{padding-top:44px}
.footcols3{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:34px;padding-bottom:30px}
footer.site .footcols3 h4{font-family:var(--sans);font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#fff;margin:0 0 12px}
footer.site .footcols3 a{display:block;font-size:.88rem;color:rgba(255,255,255,.75);padding:4px 0}
footer.site .footcols3 a:hover{color:#fff}
.footcols3 .footbrand p{font-size:.88rem;line-height:1.6;color:rgba(255,255,255,.7);margin-top:14px;max-width:32ch}
.footbadges-mini{display:inline-flex;align-items:center;gap:6px}
@media(max-width:900px){ .footcols3{grid-template-columns:1fr 1fr} .footcols3 .footbrand{grid-column:1/-1} }
@media(max-width:520px){ .footcols3{grid-template-columns:1fr} }
/* tables inside articles/pages: normal text, not the admin table style */
.rich th,.rich td{font-family:inherit;text-transform:none;letter-spacing:0;font-size:.92rem}
.rich th{color:var(--text)}
.apanel .fulltext{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
footer.site .footbar a.footcredit{color:var(--brass-lt);text-decoration:none}
footer.site .footbar a.footcredit:hover{color:#fff;text-decoration:underline}