:root{
--bg:#ffffff;
--bg-soft:#f6f7f9;
--bg-soft-2:#eef1f4;
--navy:#0f2940;
--navy-2:#163a57;
--ink:#1a1f26;
--ink-muted:#5c6670;
--ink-faint:#8b94a0;
--rule:#e2e6ea;
--rule-strong:#c9d0d7;
--accent:#c8442d;
--accent-dark:#a8351f;
--accent-tint:#fbe9e5;
--oa-green:#1f7a4d;
--oa-tint:#e7f4ed;
--radius:3px;
--serif:'Source Serif 4', Georgia, serif;
--sans:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--mono:'IBM Plex Mono', 'SFMono-Regular', monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;
font-family:var(--sans);
color:var(--ink);
background:var(--bg);
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}

.wrap{max-width:1240px; margin:0 auto; padding:0 32px;}

.skip-link{position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff; padding:10px 16px; z-index:200;}
.skip-link:focus{left:16px; top:16px;}
a:focus-visible, button:focus-visible, input:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* ---------- Utility bar / header (shared) ---------- */
.utility-bar{background:var(--navy); color:#cfe0ee; font-size:13px;}
.utility-bar .wrap{display:flex; justify-content:space-between; align-items:center; height:36px;}
.utility-bar a{color:#cfe0ee; opacity:.85;}
.utility-bar a:hover{opacity:1; text-decoration:underline;}
.utility-links{display:flex; gap:20px;}
.utility-links li{display:flex;}
.utility-secondary{display:flex; gap:20px;}

.site-header{background:#fff; border-bottom:1px solid var(--rule); position:sticky; top:0; z-index:100;}
.header-inner{display:flex; align-items:center; gap:32px; height:76px;}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:700; font-size:24px; color:var(--navy); white-space:nowrap; flex-shrink:0;}
.logo-mark{width:34px; height:34px; border:2px solid var(--navy); border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:15px; position:relative;}
.logo-mark::after{content:""; position:absolute; width:1px;height:18px; background:var(--navy);}
.logo-mark span{font-family:var(--serif); font-style:italic;}
.main-nav{flex:1; display:flex;}
.main-nav ul{display:flex; gap:4px;}
.main-nav a{display:block; padding:10px 14px; font-size:15px; font-weight:500; color:var(--ink); border-radius:var(--radius);}
.main-nav a:hover{background:var(--bg-soft); color:var(--navy);}
.header-actions{display:flex; align-items:center; gap:14px; flex-shrink:0;}
.icon-btn{width:38px;height:38px; display:flex;align-items:center;justify-content:center; border-radius:50%; color:var(--navy); border:1px solid transparent;}
.icon-btn:hover{background:var(--bg-soft); border-color:var(--rule);}
.btn{display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:var(--radius); font-size:14px; font-weight:600; border:1px solid transparent; white-space:nowrap;}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-dark);}
.btn-outline{border-color:var(--navy); color:var(--navy);}
.btn-outline:hover{background:var(--navy); color:#fff;}
.nav-toggle{display:none; background:none; border:none; padding:8px;}
.nav-toggle svg{width:26px;height:26px; color:var(--navy);}

.mobile-nav{display:none; position:fixed; inset:0 0 0 auto; width:min(320px, 84vw); background:#fff; z-index:300; transform:translateX(100%); transition:transform .25s ease; box-shadow:-12px 0 40px rgba(0,0,0,.25); overflow-y:auto;}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav-head{display:flex;justify-content:space-between;align-items:center; padding:20px; border-bottom:1px solid var(--rule);}
.mobile-nav-head button{background:none;border:none;padding:8px;}
.mobile-nav-head svg{width:24px;height:24px;color:var(--navy);}
.mobile-nav ul{padding:8px 12px;}
.mobile-nav a{display:block; padding:14px 12px; font-size:16px; font-weight:500; border-bottom:1px solid var(--rule);}
.scrim{display:none; position:fixed; inset:0; background:rgba(15,41,64,.45); z-index:290;}
.scrim.open{display:block;}

/* ---------- Breadcrumb ---------- */
.breadcrumb-bar{border-bottom:1px solid var(--rule); background:var(--bg-soft);}
.breadcrumb{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-faint); padding:14px 0;}
.breadcrumb a:hover{color:var(--navy); text-decoration:underline;}
.breadcrumb span.sep{color:var(--rule-strong);}
.breadcrumb span.current{color:var(--ink-muted);}

/* ---------- Article header ---------- */
.article-header{padding:40px 0 32px; border-bottom:1px solid var(--rule);}
.article-topline{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
.journal-pill{
font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:var(--navy);
background:var(--bg-soft-2); border:1px solid var(--rule); border-radius:100px; padding:5px 12px;
}
.oa-badge{background:var(--oa-tint); color:var(--oa-green); font-weight:600; padding:5px 12px; border-radius:100px; font-size:12px;}
.article-type{font-family:var(--mono); font-size:12px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em;}

.article-header h1{
font-family:var(--serif); font-weight:600; font-size:clamp(26px, 3.2vw, 38px);
line-height:1.22; margin:0 0 20px; color:var(--navy); letter-spacing:-.01em; max-width:900px;
}

.author-list{display:flex; flex-wrap:wrap; gap:4px 0; margin-bottom:10px;}
.author-list a{
font-size:15.5px; color:var(--navy); font-weight:600; border-bottom:1px dotted var(--rule-strong);
}
.author-list a:hover{color:var(--accent); border-color:var(--accent);}
.author-list .sep{color:var(--ink-faint); margin:0 6px; font-weight:400;}
.author-list sup{font-size:10px; color:var(--ink-faint); margin-left:1px;}

.affil-list{font-size:13px; color:var(--ink-muted); line-height:1.7; margin-bottom:22px;}
.affil-list .num{font-family:var(--mono); color:var(--ink-faint); margin-right:6px;}

.article-meta-row{
display:flex; flex-wrap:wrap; gap:18px; align-items:center;
font-size:13px; color:var(--ink-muted); padding-top:18px; border-top:1px solid var(--rule);
}
.article-meta-row .item{display:flex; align-items:center; gap:6px;}
.article-meta-row svg{width:15px;height:15px; color:var(--ink-faint); flex-shrink:0;}
.article-meta-row .doi{font-family:var(--mono); color:var(--navy);}
.article-meta-row .doi:hover{text-decoration:underline;}

/* ---------- Action bar ---------- */
.action-bar{
display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:24px;
}
.btn-action{
display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px;
border-radius:var(--radius); font-size:14px; font-weight:600; border:1px solid var(--rule-strong);
background:#fff; color:var(--navy);
}
.btn-action:hover{border-color:var(--navy); background:var(--bg-soft);}
.btn-action svg{width:16px;height:16px;}
.btn-action.primary{background:var(--accent); color:#fff; border-color:var(--accent);}
.btn-action.primary:hover{background:var(--accent-dark); border-color:var(--accent-dark);}

/* ---------- Metrics strip ---------- */
.metrics-strip{display:flex; flex-wrap:wrap; gap:36px; margin-top:28px; padding-top:24px; border-top:1px solid var(--rule);}
.metric{display:flex; flex-direction:column; gap:2px;}
.metric .num{font-family:var(--serif); font-size:24px; font-weight:600; color:var(--navy);}
.metric .label{font-size:12.5px; color:var(--ink-faint);}

/* ---------- Content layout ---------- */
.content-shell{display:grid; grid-template-columns:1fr 320px; gap:48px; padding:44px 0 80px; align-items:start;}

/* ---- Tabs ---- */
.tab-bar{display:flex; gap:4px; border-bottom:1px solid var(--rule); margin-bottom:32px;}
.tab-btn{
padding:12px 4px; margin-right:24px; font-size:14.5px; font-weight:600; color:var(--ink-faint);
border-bottom:2px solid transparent; background:none; border-top:none; border-left:none; border-right:none;
}
.tab-btn.active{color:var(--navy); border-bottom-color:var(--accent);}
.tab-btn:hover{color:var(--navy);}

.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ---- Abstract ---- */
.abstract-block{
background:var(--bg-soft); border:1px solid var(--rule); border-radius:4px; padding:26px 28px; margin-bottom:36px;
}
.abstract-block h2{font-family:var(--serif); font-size:15px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin:0 0 14px; font-weight:700;}
.abstract-block p{font-size:15.5px; line-height:1.75; color:var(--ink); margin:0 0 14px;}
.abstract-block p:last-child{margin-bottom:0;}
.keyword-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; padding-top:18px; border-top:1px solid var(--rule-strong);}
.keyword-row span.label{font-size:12.5px; color:var(--ink-faint); padding-top:6px;}
.keyword-chip{font-size:12.5px; padding:5px 12px; border-radius:100px; background:#fff; border:1px solid var(--rule-strong); color:var(--navy); font-weight:500;}

/* ---- Article body ---- */
.article-body{font-size:16px; line-height:1.8; color:var(--ink);}
.article-body h2{
font-family:var(--serif); font-size:22px; font-weight:600; color:var(--navy);
margin:38px 0 16px; padding-top:6px;
}
.article-body h2:first-child{margin-top:0;}
.article-body h3{font-family:var(--serif); font-size:18px; font-weight:600; color:var(--ink); margin:26px 0 12px;}
.article-body p{margin:0 0 18px;}
.article-body p sup{
font-family:var(--mono); font-size:11px; color:var(--accent); font-weight:600;
}
.article-body p sup a{color:var(--accent);}
.article-body p sup a:hover{text-decoration:underline;}

.figure-block{margin:30px 0; border:1px solid var(--rule); border-radius:4px; overflow:hidden;}
.figure-media{
height:280px; background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 60%, #2a4f6e 100%);
position:relative; display:flex; align-items:center; justify-content:center;
}
.figure-media::before{content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 14px);}
.figure-media span{position:relative; font-family:var(--mono); font-size:12px; color:rgba(255,255,255,.65); letter-spacing:.05em;}
.figure-caption{padding:16px 20px; font-size:13.5px; color:var(--ink-muted); line-height:1.6; background:var(--bg-soft);}
.figure-caption b{color:var(--ink); font-weight:600;}

.data-table{width:100%; border-collapse:collapse; margin:28px 0; font-size:14px;}
.data-table caption{text-align:left; font-size:13.5px; color:var(--ink-muted); margin-bottom:10px; caption-side:top;}
.data-table th{
text-align:left; padding:10px 14px; background:var(--navy); color:#fff; font-weight:600; font-size:12.5px;
text-transform:uppercase; letter-spacing:.04em;
}
.data-table td{padding:10px 14px; border-bottom:1px solid var(--rule); color:var(--ink-muted);}
.data-table tr:nth-child(even) td{background:var(--bg-soft);}
.data-table td:first-child{color:var(--ink); font-weight:500;}

.callout{
border-left:3px solid var(--accent); background:var(--accent-tint); padding:16px 20px;
margin:24px 0; font-size:14.5px; color:var(--ink); line-height:1.65; border-radius:0 4px 4px 0;
}

/* ---- References ---- */
.reference-list{counter-reset:ref;}
.reference-item{
display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--rule); font-size:14px; color:var(--ink-muted); line-height:1.65;
}
.reference-item:first-child{padding-top:0;}
.reference-item .ref-num{
counter-increment:ref; font-family:var(--mono); font-size:13px; color:var(--ink-faint); flex-shrink:0; width:26px;
}
.reference-item .ref-num::before{content:"[" counter(ref) "]";}
.reference-item b{color:var(--ink); font-weight:600;}
.reference-item .ref-link{color:var(--accent); font-weight:600; margin-left:4px;}
.reference-item .ref-link:hover{text-decoration:underline;}

/* ---- Sidebar ---- */
.sidebar{position:sticky; top:92px; display:flex; flex-direction:column; gap:24px;}
.side-card{border:1px solid var(--rule); border-radius:4px; padding:22px;}
.side-card h3{font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin:0 0 16px;}

.cite-formats{display:flex; gap:6px; margin-bottom:14px;}
.cite-fmt-btn{
flex:1; height:34px; font-size:12.5px; font-weight:600; border:1px solid var(--rule-strong);
background:#fff; color:var(--ink-muted); border-radius:var(--radius);
}
.cite-fmt-btn.active{background:var(--navy); color:#fff; border-color:var(--navy);}
.cite-text{
font-family:var(--mono); font-size:12px; line-height:1.7; color:var(--ink-muted);
background:var(--bg-soft); border:1px solid var(--rule); border-radius:var(--radius); padding:14px; margin-bottom:12px;
}
.copy-cite-btn{
width:100%; height:38px; font-size:13px; font-weight:600; background:var(--bg-soft-2);
border:1px solid var(--rule-strong); border-radius:var(--radius); color:var(--navy);
display:flex; align-items:center; justify-content:center; gap:7px;
}
.copy-cite-btn:hover{background:var(--bg-soft);}
.copy-cite-btn svg{width:14px;height:14px;}

.side-list{display:flex; flex-direction:column; gap:12px;}
.side-list a{
display:flex; align-items:center; justify-content:space-between; gap:10px;
font-size:13.5px; color:var(--ink-muted); padding:9px 0; border-bottom:1px solid var(--rule);
}
.side-list a:last-child{border-bottom:none; padding-bottom:0;}
.side-list a:hover{color:var(--navy);}
.side-list svg{width:14px;height:14px; color:var(--ink-faint); flex-shrink:0;}

.related-article{padding:14px 0; border-bottom:1px solid var(--rule);}
.related-article:last-child{border-bottom:none; padding-bottom:0;}
.related-article .tag{font-family:var(--mono); font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.03em; margin-bottom:6px; display:block;}
.related-article a.title{font-family:var(--serif); font-size:14.5px; font-weight:600; line-height:1.4; color:var(--ink); display:block; margin-bottom:6px;}
.related-article a.title:hover{color:var(--accent);}
.related-article .authors{font-size:12px; color:var(--ink-faint);}

.license-note{font-size:12.5px; color:var(--ink-muted); line-height:1.6; display:flex; align-items:flex-start; gap:8px;}
.license-note svg{width:16px;height:16px; color:var(--oa-green); flex-shrink:0; margin-top:1px;}

/* ---------- Footer (shared) ---------- */
footer{background:#fff; border-top:1px solid var(--rule); margin-top:20px;}
.footer-grid{display:grid; grid-template-columns:1.4fr repeat(4, 1fr); gap:32px; padding:56px 0 36px;}
.footer-brand .logo{margin-bottom:14px;}
.footer-brand p{font-size:13.5px; color:var(--ink-muted); line-height:1.6; max-width:260px; margin:0 0 18px;}
.footer-social{display:flex; gap:10px;}
.footer-social a{width:34px;height:34px; border:1px solid var(--rule); border-radius:50%; display:flex;align-items:center;justify-content:center; color:var(--ink-muted);}
.footer-social a:hover{border-color:var(--navy); color:var(--navy);}
.footer-col h4{font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin:0 0 16px; font-weight:600;}
.footer-col ul li{margin-bottom:11px;}
.footer-col a{font-size:14px; color:var(--ink-muted);}
.footer-col a:hover{color:var(--accent);}
.footer-bottom{border-top:1px solid var(--rule); padding:22px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
.footer-bottom p{margin:0; font-size:12.5px; color:var(--ink-faint);}
.footer-bottom-links{display:flex; gap:20px;}
.footer-bottom-links a{font-size:12.5px; color:var(--ink-faint);}
.footer-bottom-links a:hover{color:var(--navy);}

/* =====================================================
 RESPONSIVE
===================================================== */
@media (max-width:1080px){
.content-shell{grid-template-columns:1fr; gap:36px;}
.sidebar{position:static; display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.footer-grid{grid-template-columns:1fr 1fr 1fr;}
}
@media (max-width:860px){
.wrap{padding:0 20px;}
.main-nav, .header-actions .btn-outline{display:none;}
.nav-toggle{display:flex;}
.header-inner{height:64px;}
.utility-secondary{display:none;}
.article-header{padding:28px 0 24px;}
.metrics-strip{gap:24px;}
.sidebar{grid-template-columns:1fr;}
.figure-media{height:200px;}
.footer-grid{grid-template-columns:1fr 1fr; padding:40px 0 24px;}
.footer-brand{grid-column:1 / -1;}
}
@media (max-width:520px){
.article-header h1{font-size:23px;}
.action-bar .btn-action span.full{display:none;}
.footer-grid{grid-template-columns:1fr;}
.footer-bottom{flex-direction:column; align-items:flex-start;}
}

@media (prefers-reduced-motion: reduce){
*{transition:none !important; scroll-behavior:auto !important;}
}