: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{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, select: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);}
.main-nav a.active{color:var(--accent); font-weight:600;}

.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;}

/* ---------- Page header band ---------- */
.page-band{
background:linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
color:#fff;
position:relative;
overflow:hidden;
}
.page-band::before{
content:"";
position:absolute; inset:0;
background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 120px);
pointer-events:none;
}
.page-band-inner{position:relative; padding:40px 32px 44px; max-width:1240px; margin:0 auto;}
.breadcrumb{
display:flex; align-items:center; gap:8px;
font-family:var(--mono); font-size:12px; color:#9cc4e4; margin-bottom:16px;
}
.breadcrumb a{color:#9cc4e4;}
.breadcrumb a:hover{color:#fff; text-decoration:underline;}
.page-band h1{
font-family:var(--serif); font-weight:600; font-size:clamp(28px, 3.4vw, 40px);
margin:0 0 10px; letter-spacing:-.01em;
}
.page-band p{font-size:15.5px; color:#cfe0ee; margin:0; max-width:640px; line-height:1.6;}

/* ---------- Content layout ---------- */
.browse-shell{
display:grid;
grid-template-columns:260px 1fr;
gap:40px;
padding:44px 0 80px;
}

/* ---- Sidebar filters ---- */
.filters{position:sticky; top:92px; align-self:start;}
.filter-group{padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--rule);}
.filter-group:last-child{border-bottom:none;}
.filter-group h3{
font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
color:var(--ink-faint); margin:0 0 14px;
}
.filter-option{
display:flex; align-items:center; gap:9px; margin-bottom:11px;
font-size:14px; color:var(--ink); cursor:pointer;
}
.filter-option input{width:16px;height:16px; accent-color:var(--navy); flex-shrink:0;}
.filter-option .count{color:var(--ink-faint); font-size:12.5px; margin-left:auto; font-family:var(--mono);}
.filter-option:hover{color:var(--navy);}

.range-row{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-muted); margin-bottom:10px;}
.range-row input[type="range"]{flex:1; accent-color:var(--accent);}
.if-value{font-family:var(--mono); font-size:12.5px; color:var(--navy); font-weight:600; min-width:28px; text-align:right;}

.clear-filters{
font-size:13px; font-weight:600; color:var(--accent);
display:inline-flex; align-items:center; gap:5px;
}
.clear-filters:hover{text-decoration:underline;}

/* ---- Results ---- */
.results-header{
display:flex; align-items:center; justify-content:space-between;
gap:20px; margin-bottom:24px; flex-wrap:wrap;
}
.results-count{font-size:14.5px; color:var(--ink-muted);}
.results-count b{color:var(--ink); font-weight:600;}
.results-controls{display:flex; align-items:center; gap:12px;}
.sort-select{
height:40px; padding:0 34px 0 14px; border:1px solid var(--rule-strong); border-radius:var(--radius);
font-size:13.5px; font-family:var(--sans); color:var(--ink); background:#fff;
appearance:none;
background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235c6670" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>');
background-repeat:no-repeat; background-position:right 12px center; background-size:15px;
}
.view-toggle{display:flex; border:1px solid var(--rule-strong); border-radius:var(--radius); overflow:hidden;}
.view-toggle button{
width:38px; height:38px; display:flex; align-items:center; justify-content:center;
background:#fff; border:none; color:var(--ink-faint);
}
.view-toggle button + button{border-left:1px solid var(--rule-strong);}
.view-toggle button.active{background:var(--navy); color:#fff;}
.view-toggle svg{width:17px;height:17px;}

.search-inline{
display:flex; align-items:center; gap:10px;
border:1px solid var(--rule-strong); border-radius:var(--radius);
padding:0 14px; height:44px; margin-bottom:28px; background:#fff;
}
.search-inline svg{width:18px;height:18px; color:var(--ink-faint); flex-shrink:0;}
.search-inline input{
border:none; outline:none; flex:1; font-size:14.5px; font-family:var(--sans); color:var(--ink);
}
.search-inline input::placeholder{color:var(--ink-faint);}

.active-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px;}
.active-chip{
display:flex; align-items:center; gap:7px;
background:var(--bg-soft-2); border:1px solid var(--rule);
border-radius:100px; padding:6px 8px 6px 13px; font-size:13px; color:var(--navy); font-weight:500;
}
.active-chip button{
width:16px;height:16px; border-radius:50%; background:var(--rule-strong); border:none;
display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0;
}
.active-chip button svg{width:9px;height:9px;}
.active-chip button:hover{background:var(--accent);}

/* ---- Journal list rows ---- */
.journal-details{ padding:10px; border:1px solid var(--rule); border-radius:4px; }

.journal-list{display:flex; flex-direction:column; gap:1px; *background:var(--rule); *border:1px solid var(--rule); border-radius:4px; overflow:hidden;}
.journal-row{
background:#fff; padding:24px; display:grid;
grid-template-columns:88px 1fr auto; gap:22px; align-items:start;
}
.journal-row:hover{background:var(--bg-soft);}
.row-cover{
width:88px; height:112px; border-radius:2px; flex-shrink:0;
background:linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 65%, #2a4f6e 100%);
display:flex; flex-direction:column; justify-content:space-between; padding:10px;
position:relative; overflow:hidden;
}
.row-cover::before{
content:""; position:absolute; inset:0;
background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 14px);
}
.row-cover .bar{position:relative; height:3px; width:22px; background:var(--accent);}
.row-cover .initial{position:relative; font-family:var(--serif); font-style:italic; font-size:26px; color:rgba(255,255,255,.9);}

.row-body h3{font-family:var(--serif); font-size:19px; font-weight:600; margin:0 0 6px; color:var(--ink);}
.row-body a.row-title:hover h3{color:var(--accent);}
.row-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; font-family:var(--mono); color:var(--ink-faint); margin-bottom:10px;}
.row-desc{font-size:14px; color:var(--ink-muted); line-height:1.55; margin:0 0 12px; max-width:600px;}
.row-tags{display:flex; gap:8px; flex-wrap:wrap;}
.row-tag{
font-size:12px; padding:4px 10px; border-radius:100px; background:var(--bg-soft-2);
color:var(--ink-muted); border:1px solid var(--rule);
}

.row-stats{
display:flex; flex-direction:column; align-items:flex-end; gap:10px; text-align:right; min-width:150px;
}
.if-badge{
font-family:var(--mono); font-size:11px; color:var(--ink-faint); letter-spacing:.03em;
}
.if-badge b{display:block; font-family:var(--serif); font-size:22px; font-weight:600; color:var(--navy); letter-spacing:0;}
.oa-badge{
background:var(--oa-tint); color:var(--oa-green); font-weight:600; padding:3px 9px;
border-radius:100px; font-family:var(--sans); font-size:11px;
}
.row-view-btn{
font-size:13px; font-weight:600; color:var(--accent);
display:flex; align-items:center; gap:5px;
}
.row-view-btn:hover{text-decoration:underline;}
.row-view-btn svg{width:14px;height:14px;}

/* ---- Pagination ---- */
.pagination{
display:flex; align-items:center; justify-content:center; gap:6px; margin-top:40px;
}
.pagination button{
min-width:38px; height:38px; padding:0 8px; border-radius:var(--radius);
border:1px solid var(--rule-strong); background:#fff; color:var(--ink-muted); font-size:14px; font-weight:500;
}
.pagination button:hover{border-color:var(--navy); color:var(--navy);}
.pagination button.active{background:var(--navy); border-color:var(--navy); color:#fff;}
.pagination button:disabled{color:var(--ink-faint); cursor:not-allowed; background:var(--bg-soft);}
.pagination button.nav-arrow{display:flex; align-items:center; justify-content:center;}
.pagination button.nav-arrow svg{width:16px;height:16px;}

/* ---------- 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){
.browse-shell{grid-template-columns:220px 1fr; gap:28px;}
.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;}
.page-band-inner{padding:32px 20px 36px;}
.browse-shell{grid-template-columns:1fr; padding:32px 0 60px;}
.filters{
  position:static; display:flex; flex-wrap:wrap; gap:0 28px;
  padding-bottom:8px; margin-bottom:28px; border-bottom:1px solid var(--rule);
}
.filter-group{flex:1 1 200px; border-bottom:none; padding-bottom:16px;}
.journal-row{grid-template-columns:64px 1fr; }
.row-cover{width:64px; height:82px;}
.row-stats{grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; text-align:left; margin-top:14px; padding-top:14px; border-top:1px solid var(--rule);}
.if-badge{text-align:left;}
.footer-grid{grid-template-columns:1fr 1fr; padding:40px 0 24px;}
.footer-brand{grid-column:1 / -1;}
}

@media (max-width:520px){
.page-band h1{font-size:26px;}
.results-header{flex-direction:column; align-items:flex-start;}
.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;}
}
.side-menu{ padding:5px;}