/* bunseki-lab.com: masthead and science-inspired page gutters, v1.0.4.
   Layout only: keeps content, TOC, and accessibility unaltered. */

/* Masthead */
#header-container {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f5ffff;
  background: linear-gradient(116deg,#0b2c43 0%,#103e54 47%,#0c6872 100%);
  border-bottom: 4px solid #20a79f;
  box-shadow: 0 9px 24px rgba(7,35,50,.14);
}
#header-container::before,#header-container::after {
  content:"";
  position:absolute;
  top:-5px;
  bottom:-5px;
  width:min(33vw,420px);
  background: url("header-science.svg") center center / contain no-repeat;
  opacity:.28;
  pointer-events:none;
  z-index:0;
}
#header-container::before{left:1%;transform:scaleX(-1)}
#header-container::after{right:1%}
#header-container .header-container-in,
#header-container #header,
#header-container #navi {position:relative;z-index:1;background:transparent!important}
#header-container #header-in {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:190px;
  padding:30px 18px 27px;
  gap:6px;
  max-width:1220px;
  text-align:center;
}
#header-container #header-in::before {
  content:"ANALYTICAL INSTRUMENTS  /  LABWARE";
  order:0;
  display:block;
  font-size:11px;
  letter-spacing:.19em;
  font-weight:800;
  color:#9be7df;
  line-height:1.65;
}
#header-container #header .logo {
  order:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  text-align:center;
  padding:0;
  margin:0;
}
#header-container #header .logo::before {
  content:"";
  display:inline-block;
  flex:none;
  width:55px;
  height:55px;
  background:url("header-flask.svg") center/contain no-repeat;
}
#header-container #header .site-name-text,
#header-container #header .site-name,
#header-container #header .site-name:hover {
  color:#fff!important;
  text-decoration:none!important;
}
#header-container #header .site-name-text {
  font-size:clamp(26px,3vw,39px);
  font-weight:800;
  letter-spacing:.075em;
  text-shadow:0 2px 16px rgba(0,0,0,.15);
}
#header-container #header .tagline {
  order:2;
  margin:0;
  font-size:clamp(12px,1.2vw,15px);
  line-height:1.65;
  font-weight:500;
  letter-spacing:.045em;
  color:#d9f2ef!important;
}
#header-container #navi:empty,
#header-container #navi .navi-in:empty {display:none!important}

/* Soft instrument-inspired patterns in the empty left/right outer margins. */
body.single-post,body.page {background:#eef3f5}
body.single-post .content,body.page .content {
  position:relative;
  isolation:isolate;
  background:linear-gradient(180deg,#f1f6f7 0%,#eaf2f3 100%);
  min-height:calc(100vh - 260px);
}
body.single-post .content::before,body.single-post .content::after,
body.page .content::before,body.page .content::after {
  content:"";
  position:absolute;
  top:70px;
  width:min(12vw,200px);
  height:680px;
  z-index:0;
  pointer-events:none;
  opacity:.19;
  background:url("side-molecule.svg") center top/contain no-repeat;
}
body.single-post .content::before,body.page .content::before {left:max(0px,calc((100vw - 1600px)/2))}
body.single-post .content::after,body.page .content::after {right:max(0px,calc((100vw - 1600px)/2));transform:scaleX(-1)}
body.single-post .content-in,body.page .content-in{position:relative;z-index:1}
body.single-post #main,body.page #main{
  border-radius:16px;
  box-shadow:0 9px 30px rgba(17,50,65,.045);
}
body.single-post #sidebar{border-radius:16px}
@media(max-width:1400px){
 body.single-post .content::before,body.single-post .content::after,
 body.page .content::before,body.page .content::after {width:8vw;opacity:.12}
}
@media(max-width:1100px){
 body.single-post .content::before,body.single-post .content::after,
 body.page .content::before,body.page .content::after{display:none}
}
@media(max-width:640px){
 #header-container #header-in{min-height:133px;padding:23px 14px 20px;gap:4px}
 #header-container #header-in::before{font-size:9px;letter-spacing:.105em}
 #header-container #header .logo{gap:9px}
 #header-container #header .logo::before{width:38px;height:38px}
 #header-container #header .site-name-text{font-size:clamp(21px,6vw,29px);letter-spacing:.035em}
 #header-container #header .tagline{font-size:11px;line-height:1.55}
 #header-container::before,#header-container::after{width:160px;opacity:.12}
 body.single-post #main,body.page #main{border-radius:10px}
}
@media(prefers-reduced-motion:reduce){
 #header-container{scroll-behavior:auto}
}

/* Header navigation: clear contrast over navy/teal masthead */
#header-container #navi {
  background: rgba(5,32,51,.43)!important;
  border-top: 1px solid rgba(155,231,223,.20);
}
#header-container #navi .navi-in .menu-top {
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  justify-content:center;
  gap:0 3px;
}
#header-container #navi .navi-in .menu-top > li {
  float:none;
  width:auto;
  flex:0 0 auto;
}
#header-container #navi .navi-in .menu-top > li > a {
  color:#f1fbfb!important;
  background:transparent!important;
  text-decoration:none!important;
  border-radius:7px;
  font-size:clamp(12px,.9vw,15px);
  font-weight:650;
  padding:4px 13px;
}
#header-container #navi .menu-top .item-label {
  color:inherit!important;
}
#header-container #navi .navi-in .menu-top > li > a:hover,
#header-container #navi .navi-in .menu-top > li > a:focus-visible,
#header-container #navi .navi-in .menu-top > li.current-menu-item > a {
  color:#fff!important;
  background:rgba(84,217,209,.23)!important;
  outline-offset:-2px;
}
#header-container #navi .navi-in .menu-top > li > a:hover .item-label,
#header-container #navi .navi-in .menu-top > li.current-menu-item > a .item-label {
  color:#fff!important;
}
@media (max-width:1023px) {
 #header-container #navi {background:transparent!important;border-top:0}
}

/* Mobile uses the Cocoon bottom menu; suppress duplicated 3-row masthead nav. */
@media(max-width:834px){#header-container #navi{display:none!important}}