/* N2 / Japanese brand mark — confirmed Phase 2B variant.
   Scope: the global-header 木 only. Do not use this file to restyle the rest of the header. */
:root {
  --n2-brand-jp: #214f77;
  --n2-brand-jp-soft: #d9e8f3;
}

.site-nav .site-brand .site-mark,
.site-head .brand .mark,
.site-head .brand .site-mark,
.header .brand .mark {
  box-sizing: border-box;
  border: 1.5px solid var(--n2-brand-jp) !important;
  background: transparent !important;
  color: var(--n2-brand-jp) !important;
  box-shadow: none !important;
  transform: translate(0,0);
  transition:
    transform .18s ease,
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.site-nav .site-brand:hover .site-mark,
.site-head .brand:hover .mark,
.site-head .brand:hover .site-mark,
.header .brand:hover .mark {
  transform: translate(-2px,-2px);
  background: var(--n2-brand-jp) !important;
  color: #fff !important;
  border-color: var(--n2-brand-jp) !important;
  box-shadow: 5px 5px 0 var(--n2-brand-jp-soft) !important;
}

/* n2/index.html and n2/reading/index.html still carry the old four-layer
   homepage shadow markup. Phase 2B keeps their DOM but disables that visual;
   the confirmed Japanese pale-blue offset is rendered by the mark itself. */
.site-head .brand .mark-shadow {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .site-nav .site-brand .site-mark,
  .site-head .brand .mark,
  .site-head .brand .site-mark,
  .header .brand .mark {
    transition: none !important;
  }
}