/* Hatsumei header. Measured from oimachi.co on 6 Oct 2026 and rebuilt:
   fixed, no bar, separate chips 3.2px radius, 12.8px medium text, 3.2px gaps. */
:root{
  --font:"General Sans","Aeonik",Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
}
html[data-theme="dark"]{--bg:#181818;--fg:#ffffff;--chip:#000000;--chip-hover:#2c2b2a;--toggle:#000000;--overlay:rgba(0,0,0,.6)}
html[data-theme="light"]{--bg:#f0f0f0;--fg:#000000;--chip:#ffffff;--chip-hover:#e0e0e0;--toggle:#ffffff;--overlay:rgba(0,0,0,.25)}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-weight:400;transition:background-color .3s,color .3s}

.nav{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;justify-content:space-between;align-items:flex-start;padding:.5rem;pointer-events:none}
.nav__left,.nav__right{display:flex;align-items:center;gap:.2rem;pointer-events:auto}

.nav__logo{display:flex;align-items:center;justify-content:center;width:1.84rem;height:1.75rem;color:var(--fg);text-decoration:none}
.nav__logo svg{width:1.62rem;height:1.62rem;display:block;overflow:visible}
.nav__logo .spark-dot{transform-origin:9px 9px;transition:transform 1.7s cubic-bezier(.19,1,.22,1)}
.nav__logo:hover .spark-dot,.nav__logo:focus-visible .spark-dot{transform:rotate(360deg)}

.nav__item{display:inline-flex;align-items:center;height:1.5rem;padding:.18rem .5rem;border:0;border-radius:.2rem;
  background:var(--chip);color:var(--fg);font:550 .8rem/1.4 var(--font);letter-spacing:-.02em;text-decoration:none;cursor:pointer;
  transition:background-color .2s}
.nav__item:hover,.nav__item[aria-expanded="true"]{background:var(--chip-hover)}
.nav__item:focus-visible,.nav__logo:focus-visible{outline:1px solid var(--fg);outline-offset:2px}
.nav__right .nav__item{height:1.75rem}
.nav__theme{width:1.6rem;justify-content:center;padding:0;background:var(--toggle)}
.nav__theme svg{width:1.2rem;height:1.2rem}
.nav__plus{display:none;width:1.1rem;height:1.1rem}

/* Contact dropdown */
.nav__drop{position:relative}
.nav__panel{position:absolute;right:0;top:calc(100% + .2rem);min-width:15rem;padding:.25rem;border-radius:.2rem;background:var(--chip);
  display:flex;flex-direction:column;gap:.1rem;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .2s,transform .2s}
.nav__drop.is-open .nav__panel{opacity:1;transform:none;pointer-events:auto}
.nav__panel a{display:flex;justify-content:space-between;gap:1rem;padding:.45rem .5rem;border-radius:.2rem;color:var(--fg);text-decoration:none;font:550 .8rem/1.4 var(--font);letter-spacing:-.02em}
.nav__panel a span{opacity:.55;font-weight:400}
.nav__panel a:hover{background:var(--chip-hover)}
.nav__overlay{position:fixed;inset:0;z-index:90;background:var(--overlay);opacity:0;pointer-events:none;transition:opacity .2s}
.nav__overlay.is-on{opacity:1;pointer-events:auto}

/* Phones: same chips, Contact collapses to a plus, as on oimachi.co */
@media (max-width:767px){
  .nav{padding:.45rem}
  .nav__left,.nav__right{gap:.18rem}
  .nav__item{height:1.53rem;font-size:.857rem;padding:.18rem .45rem}
  .nav__right .nav__item{height:1.53rem}
  .nav__logo{width:1.63rem;height:1.53rem}
  .nav__logo svg{width:1.36rem;height:1.36rem}
  .nav__contact-text{display:none}
  .nav__plus{display:block}
  .nav__contact{width:2rem;justify-content:center;padding:0}
  .nav__theme{width:2rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Current page: the chip inverts (white in dark mode, black in light), as on oimachi.co */
.nav__item[aria-current="page"]{background:var(--fg);color:var(--bg)}
.nav__item[aria-current="page"]:hover{background:var(--fg)}