.hdr { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 24 * var(--uh)); left: 50%; transform: translateX(-50%); z-index: 30;
  box-sizing: border-box; width: calc(884 * var(--uh)); height: calc(60 * var(--uh)); padding: 0 calc(32 * var(--uh)); border-radius: calc(32 * var(--uh));
  display: flex; align-items: center; justify-content: space-between; color: #1A1D26;
  background: rgba(22, 22, 26, 0); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
  transition: background .6s ease, box-shadow .6s ease, color .6s ease, -webkit-backdrop-filter .6s ease, backdrop-filter .6s ease; }
.hdr-g { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; transition: opacity .6s ease;
  background: linear-gradient(180deg, rgba(255, 255, 255, .4) 10%, rgba(255, 255, 255, .8)); }                       
.hdr::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 0; transition: opacity .6s ease;
  background: linear-gradient(180deg, rgba(255, 255, 255, .64), rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 95%, rgba(255, 255, 255, .64));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }   
.hdr::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; box-shadow: inset 0 0 0 1px rgba(26, 29, 38, .06); transition: box-shadow .6s ease; }   
:root:not([data-hdr="inv"])[data-bg="sumi"] .hdr, :root[data-hdr="inv"]:not([data-bg="sumi"]) .hdr { color: #FFFFFF; background: rgba(22, 22, 26, .8); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
:root:not([data-hdr="inv"])[data-bg="sumi"] .hdr-g, :root:not([data-hdr="inv"])[data-bg="sumi"] .hdr::before, :root[data-hdr="inv"]:not([data-bg="sumi"]) .hdr-g, :root[data-hdr="inv"]:not([data-bg="sumi"]) .hdr::before { opacity: 0; }
:root:not([data-hdr="inv"])[data-bg="sumi"] .hdr::after, :root[data-hdr="inv"]:not([data-bg="sumi"]) .hdr::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.hdr .nav a { color: inherit; text-decoration: none; }   
.hdr .logo { position: relative; z-index: 1; display: block; width: calc(53 * var(--uh)); height: calc(24 * var(--uh)); color: inherit; }
.hdr .logo svg { display: block; width: 100%; height: 100%; }
.hdr .nav { position: relative; z-index: 1; display: flex; gap: calc(48 * var(--uh)); margin: 0; padding: 0; list-style: none; font-family: var(--font); font-weight: 700; font-size: calc(14 * var(--uh)); line-height: 1.7; letter-spacing: .05em; white-space: nowrap; }   
.hdr .menu { display: none; }   
@media (max-width: 1023px) {   
  .hdr { top: calc(env(safe-area-inset-top, 0px) + 12px); width: min(var(--sp-max), calc(100% - 2 * var(--sp-gutter))); height: 44px; padding: 0 16px; border-radius: 22px; }
  .hdr .logo { width: 45px; height: 20px; }
  .hdr .nav { display: none; }
  .hdr .menu { position: relative; z-index: 1; display: block; width: 20px; height: 20px; margin: 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
  .hdr .menu svg { display: block; width: 100%; height: 100%; }
}

.mnu { display: none; }
@media (max-width: 1023px) {
  .mnu { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; box-sizing: border-box; padding: calc(env(safe-area-inset-top, 0px) + 120px) 0 calc(env(safe-area-inset-bottom, 0px) + 40px); color: #FFFFFF;
    background: rgba(26, 29, 38, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    opacity: 0; transform: translateY(-8px); visibility: hidden; transition: opacity .25s var(--ease-out-cubic), transform .25s var(--ease-out-cubic), visibility 0s linear .25s; }
  .mnu.is-open { opacity: 1; transform: none; visibility: visible; transition: opacity .25s var(--ease-out-cubic), transform .25s var(--ease-out-cubic), visibility 0s; }
  .mnu-bar { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 50%; transform: translateX(-50%); box-sizing: border-box; width: min(var(--sp-max), calc(100% - 2 * var(--sp-gutter))); height: 44px; padding: 0 16px; border-radius: 22px;
    display: flex; align-items: center; justify-content: space-between; background: rgba(22, 22, 26, .8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 8px 24px rgba(0, 0, 0, .25); }
  .mnu-bar .logo { display: block; width: 45px; height: 20px; color: #FFFFFF; }
  .mnu-bar .logo svg { display: block; width: 100%; height: 100%; }
  .mnu .close { display: block; width: 20px; height: 20px; margin: 0; padding: 0; border: 0; background: none; color: #FFFFFF; cursor: pointer; }
  .mnu .close svg { display: block; width: 100%; height: 100%; }
  .mnu-in { box-sizing: border-box; width: min(var(--sp-max), calc(100% - 2 * var(--sp-gutter))); margin: 0 auto; padding: 0 16px; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: auto; }
  .mnu-nav { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 24px; font-family: var(--heading); font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 500; letter-spacing: var(--ls-h1); }
  .mnu-nav a, .mnu-nav span { color: inherit; text-decoration: none; }
  .mnu-nav span { opacity: .5; }   
  .mnu-foot { margin-top: auto; padding-top: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
  .mnu .pill { background: #FFFFFF; color: #1A1D26; }
  .mnu .copy { margin: 0; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); letter-spacing: var(--ls-body-sm); color: #C9CCD3; }
  html.menu-open, html.menu-open body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .mnu { transition: none; transform: none; } }