/* One header for every page: home, /en/ and all sub-pages. Edit here only (page files keep only their own positioning).
   55px bar, content frame 1024px wide so the logo starts where the home hero text starts, hamburger below 960px with the language switch inside the menu. */
header{display:flex; align-items:center; justify-content:space-between; gap:13px; box-sizing:border-box; height:55px; padding:0 max(var(--hdr-pad,21px), calc((100vw - 1024px) / 2)); background:var(--paper,#FBFCF5); border-bottom:1px solid var(--stone-line,rgba(0,0,0,0.14));}
header .wrap{display:flex; align-items:center; justify-content:space-between; gap:13px; width:100%; height:100%; max-width:none; margin:0; padding:0;}
header .head-right{display:flex; align-items:center; gap:13px;}
header .brand{display:flex; align-items:center; text-decoration:none; cursor:pointer;}
header .brand img{height:15px; width:auto; display:block;}
header nav{display:flex; align-items:center; gap:4px 13px;}
header nav a{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic Medium','Yu Gothic','Noto Sans JP','Meiryo',sans-serif; font-size:11px; color:rgba(0,0,0,0.6); text-decoration:none; padding:8px 0; white-space:nowrap;}
header nav a:hover, header nav a[aria-current]{color:var(--ink,#000); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px;}
/* one call to action (shop), outlined like the footer button */
header nav a.head-cta{color:var(--ink,#000); border:1px solid var(--ink,#000); padding:6px 13px; text-decoration:none;}
@media (hover:hover){ header nav a.head-cta:hover{background:var(--ink,#000); color:var(--paper,#FBFCF5); text-decoration:none;} }
header nav a.head-cta[aria-current]{text-decoration:none;}
/* language switch: used in the header and inside the phone menu */
.lang-switch{display:flex; align-items:center; gap:2px; border:1px solid var(--stone-line,rgba(0,0,0,0.14)); padding:2px;}
.lang-switch button{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic Medium','Yu Gothic','Noto Sans JP','Meiryo',sans-serif; font-size:11px; padding:5px 8px; color:rgba(0,0,0,0.6); letter-spacing:.03em; border:none; background:none; cursor:pointer;}
.lang-switch button.active{background:var(--ink,#000); color:#fff;}
/* phone menu button (home and sub-pages) */
header .menu-toggle, header .m-toggle{display:none; flex:none; flex-direction:column; justify-content:center; align-items:stretch; gap:5px; width:44px; height:44px; margin-right:-11px; padding:0 11px; background:none; border:0; cursor:pointer; color:var(--ink,#000); -webkit-tap-highlight-color:transparent;}
header .menu-toggle span, header .m-toggle span{display:block; height:1.5px; background:currentColor; transition:transform .25s ease, opacity .25s ease;}
header .menu-toggle[aria-expanded="true"] span:nth-child(1), header .m-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
header .menu-toggle[aria-expanded="true"] span:nth-child(2), header .m-toggle.open span:nth-child(2){opacity:0;}
header .menu-toggle[aria-expanded="true"] span:nth-child(3), header .m-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
/* phone menu panel: sub-pages build .m-menu (chrome.js), the home page has .mobile-menu */
.m-menu, .mobile-menu{position:fixed; top:0; left:0; right:0; bottom:0; background:var(--paper,#FBFCF5); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:13px; padding:89px 0 34px; overflow-y:auto; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;}
.m-menu{z-index:1001;} .mobile-menu{z-index:59;}
.m-menu.open, .mobile-menu.open{opacity:1; visibility:visible;}
.m-menu a, .mobile-menu a{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic Medium','Yu Gothic','Noto Sans JP','Meiryo',sans-serif; font-weight:600; font-size:22px; color:var(--ink,#000); text-decoration:none; padding:4px 8px;}
.m-menu a[aria-current="page"]{text-decoration:underline; text-underline-offset:6px;}
.m-menu .lang-switch, .mobile-menu .lang-switch{margin-top:21px;}
@media (min-width:961px){ .m-menu, .mobile-menu{display:none;} }
@media (max-width:960px){
  header nav, header .lang-switch{display:none;}
  header .menu-toggle, header .m-toggle{display:flex;}
}
@media (max-width:600px){ header .brand img{height:14px;} }
@media (prefers-reduced-motion: reduce){ header .menu-toggle span, header .m-toggle span{transition:none;} }