/* Shared site header: used by the front page, blog, posts and pages. */
:root {
  --shared-yellow: #f0c400;
  --shared-yellow-dark: #c79f00;
  --shared-ink: #2a2a24;
  --shared-max: 1180px;
  --shared-button-height: 52px;
}
.container { width:min(calc(100% - 40px),var(--shared-max)); margin-inline:auto; }
.topbar { background:#26261f; color:#fff; font-size:.82rem; }
.topbar-inner { min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.topbar strong { font-size:.95rem; }
.topbar-note { opacity:.85; }
.header { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.96); backdrop-filter:blur(16px); border-bottom:1px solid rgba(199,159,0,.18); }
.nav { height:82px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
.brand-mark { width:48px; height:48px; display:grid; place-items:center; flex:0 0 auto; overflow:hidden; border:1px solid #ead778; border-radius:50%; background:#fff7c7; }
.brand-mark-image img { display:block; width:100%; height:100%; object-fit:cover; }
.brand-text { min-width:0; white-space:nowrap; }
.brand-text strong { display:block; color:var(--shared-yellow-dark); font-family:"Zen Kaku Gothic New",sans-serif; font-size:1.35rem; line-height:1.2; white-space:nowrap; }
.menu { display:flex; align-items:center; gap:25px; font-size:.89rem; font-weight:700; }
.menu a { position:relative; color:inherit; text-decoration:none; }
.menu a::after { content:""; position:absolute; left:0; right:100%; bottom:-7px; height:2px; background:var(--shared-yellow); transition:.25s; }
.menu a:hover::after { right:0; }
.header-actions { display:flex; gap:10px; }
.header .btn { display:inline-flex; align-items:center; justify-content:center; gap:.65rem; min-height:var(--shared-button-height); padding:0 24px; border:1px solid transparent; border-radius:999px; font-size:.9rem; font-weight:800; line-height:1; text-decoration:none; cursor:pointer; transition:.2s; }
.header .btn-primary { color:#29271f; background:var(--shared-yellow); border-color:var(--shared-yellow); }
.header .btn:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(96,79,0,.14); }
.menu-toggle { display:none; width:46px; height:46px; min-width:44px; min-height:44px; padding:10px; border:1px solid #d9c85e; border-radius:12px; background:#fffdf3; }
.menu-toggle span { display:block; height:2px; margin:5px 0; background:var(--shared-ink); border-radius:2px; }

@media(max-width:980px) {
  .header-actions { margin-left:auto; }
  .menu-toggle { display:block; }
  .menu { display:none; position:absolute; top:82px; left:20px; right:20px; padding:18px; flex-direction:column; align-items:stretch; gap:0; background:#fff; border:1px solid #eadf9a; border-radius:18px; box-shadow:0 18px 50px rgba(96,79,0,.16); }
  .menu.open { display:flex; }
  .menu a { padding:14px 8px; border-bottom:1px solid #f0ead0; }
  .menu a:last-child { border-bottom:0; }
  .menu a::after { display:none; }
}

@media(max-width:640px) {
  .container { width:min(calc(100% - 22px),var(--shared-max)); }
  .topbar { display:none; }
  .header { z-index:100; background:#fff; border-bottom:1px solid #eee5b6; }
  .nav { height:64px; gap:8px; }
  .brand { max-width:calc(100% - 54px); gap:8px; }
  .brand-mark { width:36px; height:36px; border-radius:10px; }
  .brand-text strong { font-size:.72rem; line-height:1.2; letter-spacing:-.035em; }
  .header-actions { display:none; }
  .menu-toggle { width:42px; height:42px; padding:8px; border-radius:10px; margin-left:auto; }
  .menu { top:66px; left:10px; right:10px; padding:10px; border-radius:16px; }
  .menu a { padding:13px 10px; font-size:.9rem; }
}