/* Header: a single, large hamburger on white, no filled box. The search
   field lives inside the menu panel. */
body.js #hearder .menu-toggle{width:64px;height:64px;min-width:64px;flex:0 0 64px;padding:0;margin-right:-8px;border:0;background:#fff;color:var(--ink)}
body.js #hearder .menu-toggle .menu-drawing{width:64px;height:64px;flex:0 0 64px}
@media(max-width:760px){
 body.js #hearder .menu-toggle{width:56px;height:56px;min-width:56px;flex-basis:56px;margin-right:-6px}
 body.js #hearder .menu-toggle .menu-drawing{width:56px;height:56px;flex-basis:56px}
}
@media(hover:hover) and (pointer:fine){
 body.js #hearder .menu-toggle:hover{background:#fff;color:var(--accent);border:0}
}
body.js #hearder .menu-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* Mobile drawer close matches the hamburger: large, no box, on white. */
body.js .drawer-close{width:56px;height:56px;min-width:56px;padding:0;margin-right:-6px;border:0;background:#fff;color:var(--accent)}
body.js .drawer-close svg{width:36px;height:36px;stroke-width:1.9}
@media(hover:hover) and (pointer:fine){body.js .drawer-close:hover{background:#fff;color:var(--ink);border:0}}
body.js .drawer-close:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* Breadcrumb: always a single line. Desktop truncates the current page with
   an ellipsis; mobile scrolls sideways with a soft fade on the right. */
#nav .breadcrumb{flex:1 1 100%;width:100%;max-width:100%;min-width:0}
#nav .breadcrumb ol{flex-wrap:nowrap;white-space:nowrap;min-width:0;overflow:hidden}
#nav .breadcrumb li{flex:0 0 auto;white-space:nowrap}
#nav .breadcrumb li:last-child{flex:0 1 auto;min-width:0}
@media(max-width:760px){
 #nav .breadcrumb ol{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;padding-right:28px;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
 #nav .breadcrumb ol::-webkit-scrollbar{display:none}
 #nav .breadcrumb li:last-child{flex:0 0 auto}
 #nav .breadcrumb li:last-child span{overflow:visible;text-overflow:clip;max-width:none}
}
/* Same breadcrumb size on every page. */
#nav .breadcrumb li{font-size:14px}
@media(max-width:760px){#nav .breadcrumb li{font-size:13px}}