/* JPSB header + search popup (from the original site header code) */
.jpsb-header{position:relative;isolation:isolate;font-family:'Inter',sans-serif;background:var(--parchment);color:var(--ink);-webkit-font-smoothing:antialiased;}
.jpsb-header{
  --ink:#0A1622;
  --ink2:#0F2036;
  --brass:#B08D46;
  --brass-light:#E8CD8F;
  --brass-deep:#8A6526;
  --parchment:#F7F1E2;
  --parchment2:#EFE6CE;
  --card:#FBF7EC;
  --teal:#1B6459;
  --teal-tint:#DCEAE3;
  --muted:#6B6252;
  --muted-dark:#C3CBDB;
  --line:#DCD1AF;
  --bar-bg-1:#123B37;
  --bar-bg-2:#0B2C29;
  --bar-bg-3:#051615;
}
.jpsb-header, .jpsb-header *{box-sizing:border-box;}
.jpsb-header a{color:inherit;text-decoration:none;}
.jpsb-header button{font-family:inherit;background:none;border:none;cursor:pointer;color:inherit;}

/* ---------- single-row bar ---------- */
.jpsb-header .bar{
  background:
    radial-gradient(rgba(232,205,143,.28) 1px, transparent 1.6px),
    linear-gradient(160deg, var(--bar-bg-1) 0%, var(--bar-bg-2) 60%, var(--bar-bg-3) 100%);
  background-size:24px 24px, 100% 100%;
  background-position:0 0, 0 0;
  width:100%;
  /* margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw); */
  border-bottom:2px solid var(--brass);
  box-shadow:0 1px 0 rgba(232,205,143,.35);
}
.jpsb-header .bar::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(900px 340px at 94% 0%, rgba(176,141,70,.38), transparent 68%);
  pointer-events:none;
}
.jpsb-header .bar::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(5,22,21,.55) 0%, rgba(5,22,21,0) 38%);
  pointer-events:none;
}
.jpsb-header .bar-inner{
  max-width:1400px;margin:0 auto;position:relative;z-index:2;
  padding:14px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.jpsb-header .nav-item > button:hover{background-color: #00000000;}
/* ---------- brand (left) ---------- */
.jpsb-header .brand-inner{
  display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 auto;
}
.jpsb-header .brand-mark{
  width:66px;height:66px;border-radius:50%;flex:0 0 auto;
  box-shadow:0 4px 10px rgba(0,0,0,.25);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.jpsb-header .brand-mark a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.jpsb-header .brand-mark img{width:100%;height:100%;object-fit:cover;display:block;}
.jpsb-header .brand-text{min-width:0;}
.jpsb-header .brand-text .eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass-light);margin:0 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.jpsb-header .brand-text .brand-title{
  font-family:"Fraunces",serif;font-weight:560;font-style:italic;
  font-size:clamp(16px,2.2vw,23px);line-height:1.15;color:#F4F1E4;margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- nav (right) ---------- */
.jpsb-header .nav-side{display:flex;align-items:center;gap:4px;flex:0 0 auto;}
.jpsb-header .nav-links{display:flex;align-items:center;gap:2px;}
.jpsb-header .nav-links > a{
  font-size:13.5px;font-weight:600;color:var(--muted-dark);
  padding:10px 14px;display:inline-flex;align-items:center;gap:5px;
  border-bottom:2px solid transparent;
  transition:.15s ease;white-space:nowrap;
}
.jpsb-header .nav-links > a:hover, .jpsb-header .nav-links > a.active{
  color:var(--brass-light);border-bottom-color:var(--brass);
}
.jpsb-header .caret{width:8px;height:8px;opacity:.7;transition:transform .15s ease;flex:0 0 auto;}

/* About dropdown */
.jpsb-header .nav-item{position:relative;}
.jpsb-header .nav-item > button{
  font-size:13.5px;font-weight:600;color:var(--muted-dark);
  padding:10px 14px;display:inline-flex;align-items:center;gap:5px;
  border-bottom:2px solid transparent;transition:.15s ease;white-space:nowrap;
}
.jpsb-header .nav-item > button:hover{color:var(--brass-light);}
.jpsb-header .nav-item.open > button{color:var(--brass-light);border-bottom-color:var(--brass);}
.jpsb-header .nav-item.open .caret{transform:rotate(180deg);}

.jpsb-header .dropdown{
  position:absolute;top:100%;right:0;margin-top:1px;
  background:var(--card);border:1px solid var(--line);
  box-shadow:0 16px 28px rgba(10,22,34,.25);
  display:none;z-index:30;min-width:220px;
}
.jpsb-header .nav-item.open .dropdown{display:block;}
.jpsb-header .dropdown-inner{padding:6px;display:flex;flex-direction:column;gap:1px;}
.jpsb-header .dropdown a{
  display:block;padding:10px 14px;font-size:13px;font-weight:600;
  color:var(--ink2);white-space:nowrap;border-radius:2px;
}
.jpsb-header .dropdown a:hover{background:var(--teal-tint);color:var(--teal);}

/* Hover-to-open About dropdown on desktop/pointer devices */
@media (hover:hover) and (pointer:fine){
  .jpsb-header .nav-item:hover .dropdown{display:block;}
  .jpsb-header .nav-item:hover > button{color:var(--brass-light);border-bottom-color:var(--brass);}
  .jpsb-header .nav-item:hover .caret{transform:rotate(180deg);}
}

.jpsb-header .nav-search{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600;color:var(--parchment);
  padding:9px 16px;border:1px solid rgba(232,205,143,.35);background:rgba(255,255,255,.04);
  cursor:pointer;transition:.15s ease;flex:0 0 auto;margin-left:8px;
}
.jpsb-header .nav-search:hover{border-color:var(--brass-light);color:var(--brass-light);background:rgba(255,255,255,.08);}
.jpsb-header .nav-search svg{width:14px;height:14px;flex:0 0 auto;}
.jpsb-header .nav-search .label{display:inline;}

/* hamburger (mobile only) - plain spans, not SVG, so external
   theme CSS resets (svg path{fill:...}) can never hide it */
.jpsb-header .menu-toggle{
  display:none;
  flex-direction:column;align-items:center;justify-content:center;
  gap:5px;
  width:34px;height:34px;flex:0 0 auto;
  background:none !important;border:none !important;padding:0 !important;
  opacity:1 !important;visibility:visible !important;
}
.jpsb-header .menu-toggle .menu-toggle-bar{
  display:block !important;
  width:20px;height:2px;
  background:var(--parchment) !important;
  border-radius:2px;
  opacity:1 !important;visibility:visible !important;
}

/* ============ LAPTOP ============ */
@media (max-width:1300px){
  .jpsb-header .bar-inner{padding:14px 22px;gap:14px;}
  .jpsb-header .nav-links > a{padding:10px 11px;font-size:13px;}
  .jpsb-header .nav-item > button{padding:10px 11px;font-size:13px;}
  .jpsb-header .nav-search{padding:9px 13px;margin-left:4px;}
}

/* ============ TABLET ============ */
@media (max-width:900px){
  .jpsb-header .dropdown{left:0;right:auto;}
  .jpsb-header .bar-inner{padding:12px 18px;gap:10px;}
  .jpsb-header .brand-text .eyebrow{font-size:8.5px;}
  .jpsb-header .nav-links{gap:0;}
  .jpsb-header .nav-links > a{padding:9px 8px;font-size:12.5px;}
  .jpsb-header .nav-item > button{padding:9px 8px;font-size:12.5px;}
  .jpsb-header .nav-search{padding:8px 10px;margin-left:2px;}
  .jpsb-header .nav-search .label{font-size:12.5px;}
}

/* ============ MOBILE ============ */
@media (max-width:680px){
  .jpsb-header .bar-inner{padding:12px 18px;}
  .jpsb-header .brand-mark{width:52px;height:52px;}
  .jpsb-header .brand-text .eyebrow{display:none;}

  .jpsb-header .menu-toggle{display:flex !important;}

  .jpsb-header .nav-search .label{display:none;}
  .jpsb-header .nav-search{padding:8px;border-color:transparent;background:none;margin-left:0;}

  /* collapse nav links into a full-width stacked panel */
  .jpsb-header .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--card);border-top:1px solid var(--line);
    box-shadow:0 16px 28px rgba(10,22,34,.25);z-index:40;
  }
  .jpsb-header .bar.menu-open .nav-links{display:flex;}
  .jpsb-header .nav-links > a{
    color:var(--ink2);
    padding:14px 18px;border-bottom:1px solid var(--line);border-left:2px solid transparent;
  }
  .jpsb-header .nav-links > a:hover, .jpsb-header .nav-links > a.active{
    color:var(--teal);border-bottom-color:var(--line);border-left-color:var(--teal);
  }

  .jpsb-header .nav-item{width:100%;position:static;}
  .jpsb-header .nav-item > button{
    width:100%;justify-content:space-between;padding:14px 18px;
    color:var(--ink2);border-bottom:1px solid var(--line);
  }
  .jpsb-header .dropdown{
    position:static;box-shadow:none;border:none;background:var(--parchment2);min-width:0;
  }
  .jpsb-header .dropdown-inner{padding:0;}
  .jpsb-header .dropdown a{padding:12px 18px 12px 30px;border-bottom:1px solid var(--line);border-radius:0;}
}

/* =====================================================
   SEARCH MODAL
   ===================================================== */
.jpsb-search-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(10,22,34,.55);
  display:none;align-items:flex-start;justify-content:center;
  padding:8vh 20px 40px;
  overflow-y:auto;
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}
.jpsb-search-overlay.open{display:flex;}
.jpsb-search-modal{
  background:#FBF7EC;
  width:100%;max-width:640px;
  border:1px solid #DCD1AF;
  box-shadow:0 30px 60px rgba(10,22,34,.35);
  position:relative;
  animation:jpsbPop .18s ease;
}
@keyframes jpsbPop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.jpsb-search-modal .jpsb-sm-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 26px 6px;
}
.jpsb-search-modal h2{
  font-family:"Fraunces",serif;font-weight:650;font-style:italic;
  font-size:26px;color:#0A1622;margin:0;
}

/* --- FIX 1: close (X) button, built from two CSS bars instead of an
   SVG <path>, since the site's global theme forces svg path{fill:...}
   which made the stroke-only X icon invisible --- */
.jpsb-search-modal .jpsb-sm-close{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  position:relative;
  color:#6B6252;border-radius:50%;flex:0 0 auto;
  border-color: #f5d36e;
  background-color: #00000000 !important;
}
.jpsb-search-modal .jpsb-sm-close:hover{background:#EFE6CE;color:#0A1622;}
.jpsb-search-modal .jpsb-sm-close .jpsb-x-bar{
  position:absolute;top:50%;left:50%;
  width:14px;height:2px;
  background:#6B6252 !important;
  border-radius:1px;
  display:block !important;
  pointer-events:none;
}
.jpsb-search-modal .jpsb-sm-close .jpsb-x-bar:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
.jpsb-search-modal .jpsb-sm-close .jpsb-x-bar:nth-child(2){ transform:translate(-50%,-50%) rotate(-45deg); }
.jpsb-search-modal .jpsb-sm-close:hover .jpsb-x-bar{ background:#0A1622 !important; }

.jpsb-search-modal form{padding:14px 26px 26px;}
.jpsb-search-modal .jpsb-sm-input-wrap{position:relative;margin-bottom:16px;}
.jpsb-search-modal .jpsb-sm-input-wrap svg{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:#8A8163;pointer-events:none;
}
.jpsb-search-modal input[type="text"], .jpsb-search-modal input[type="search"]{
  width:100%;font-family:'Inter',sans-serif;font-size:15px;
  padding:13px 14px 13px 40px;border:1px solid #DCD1AF;background:#fff;color:#0A1622;
  outline:none;transition:.15s ease;
}
.jpsb-search-modal input[type="text"]:focus, .jpsb-search-modal input[type="search"]:focus{
  border-color:#B08D46;box-shadow:0 0 0 3px rgba(176,141,70,.15);
}

/* --- FIX 2: "Advanced filters" chevron, built from a CSS triangle
   instead of an SVG <path> for the same fill-override reason --- */
.jpsb-search-modal .jpsb-adv-toggle{
  display:flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:600;color:#1B6459;
  padding:4px 0 14px;
  border-color: #00000000 !important;
  background-color: #00000000 !important;
}
#jpsb-adv-toggle:hover{
  background-color: #00000000 !important;
}
.jpsb-search-modal .jpsb-adv-toggle .jpsb-chevron{
  display:inline-block !important;
  width:0;height:0;
  flex:0 0 auto;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  border-left:6px solid #1B6459 !important;
  transition:transform .15s ease;
}
.jpsb-search-modal .jpsb-adv-toggle.open .jpsb-chevron{ transform:rotate(90deg); }

.jpsb-search-modal .jpsb-adv-panel{
  display:none;
  border:1px solid #DCD1AF;background:#F7F1E2;
  padding:18px 20px 20px;margin-bottom:18px;
}
.jpsb-search-modal .jpsb-adv-panel.open{display:block;}
.jpsb-search-modal .jpsb-field-row{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:16px;
}
.jpsb-search-modal .jpsb-field-row:last-child{margin-bottom:0;}
.jpsb-search-modal .jpsb-field label{
  display:block;font-size:12.5px;font-weight:700;color:#0F2036;margin-bottom:7px;
}
.jpsb-search-modal .jpsb-date-group{display:flex;gap:6px;}
.jpsb-search-modal select{
  font-family:'Inter',sans-serif;font-size:13px;color:#0A1622;
  border:1px solid #DCD1AF;background:#fff;padding:8px 6px;outline:none;flex:1 1 0;min-width:0;
}
.jpsb-search-modal select:focus{border-color:#B08D46;}
.jpsb-search-modal .jpsb-field input[type="text"]{padding:9px 10px;font-size:13.5px;}
.jpsb-search-modal .jpsb-sm-actions{
  display:flex;justify-content:flex-end;
}
.jpsb-search-modal .jpsb-sm-submit{
  display:inline-flex;align-items:center;gap:8px;
  background:#0F2036;color:#F7F1E2;font-weight:600;font-size:14px;
  padding:11px 22px;border:none;cursor:pointer;transition:.15s ease;
}
.jpsb-search-modal .jpsb-sm-submit:hover{background:#B08D46;color:#0A1622;}
.jpsb-search-modal .jpsb-sm-submit svg{width:15px;height:15px;}

@media (max-width:560px){
  .jpsb-search-overlay{padding:0;}
  .jpsb-search-modal{max-width:none;min-height:100%;}
  .jpsb-search-modal .jpsb-field-row{grid-template-columns:1fr;gap:16px;}
}

/* active state for the About menu and its current page */
.jpsb-header .nav-item.active > button{color:var(--brass-light);border-bottom-color:var(--brass);}
.jpsb-header .dropdown a.active{background:var(--teal-tint);color:var(--teal);}
.jpsb-header{z-index:100;}

/* Mobile: let the journal name wrap onto two lines instead of being cut off */
@media (max-width:680px){
  .jpsb-header .brand-text .brand-title{white-space:normal;overflow:visible;text-overflow:clip;font-size:15.5px;line-height:1.2;}
}
@media (max-width:360px){
  .jpsb-header .brand-mark{width:44px;height:44px;}
  .jpsb-header .brand-text .brand-title{font-size:14px;}
}
