/* ============================================================
   v3 base — body, nav, mobile menu, footer (sub pages only).
============================================================ */

body {
  font-family: var(--font-jp), var(--font-en);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--paper);
}

/* Top page locks horizontal scroll; vertical scroll drives the show. */
body.page-top { overflow-x: hidden; }

a { color: inherit; }

/* ============================================================
   Top header
============================================================ */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-h);
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  z-index: 90;
  background: transparent;
  pointer-events: none;
  mix-blend-mode: difference;
  color: #fff;
  opacity: 0;
  transition: opacity 600ms var(--ease-out) 300ms;
}
.site-nav.is-ready { opacity: 1; }
.site-nav > * { pointer-events: auto; }

.site-nav__brand img {
  height: clamp(20px, 2.2vw, 28px);
  width: auto;
  /* logo is white PNG — under difference blend, it inverts the bg color */
}
.site-nav__list {
  display: flex; gap: clamp(16px, 2.4vw, 36px);
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.site-nav__link {
  padding: 6px 2px;
  opacity: 0.95;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.site-nav__link:hover { opacity: 1; }

.site-nav__hamburger {
  display: none;
  width: 36px; height: 36px;
  position: relative;
  color: inherit;
}
.site-nav__hamburger span {
  position: absolute; left: 8px; right: 8px;
  height: 1.5px;
  background: currentColor;
}
.site-nav__hamburger span:nth-child(1) { top: 12px; }
.site-nav__hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.site-nav__hamburger span:nth-child(3) { bottom: 12px; }

@media (max-width: 880px) {
  .site-nav__list { display: none; }
  .site-nav__hamburger { display: block; }
}

/* ============================================================
   Mobile fullscreen menu (outside of mix-blend-mode stack)
============================================================ */
.mobile-menu {
  position: fixed; inset: 0;
  background: var(--ink);
  color: var(--paper);
  z-index: 130;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms var(--ease-out), visibility 0s linear 400ms;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 400ms var(--ease-out), visibility 0s;
}
.mobile-menu__close {
  position: absolute;
  top: clamp(16px, 3vw, 28px);
  right: clamp(20px, 5vw, 40px);
  width: 44px; height: 44px;
  font-size: 32px;
  line-height: 1;
  color: var(--paper);
  font-family: var(--font-en);
}
.mobile-menu__list {
  display: flex; flex-direction: column;
  gap: clamp(20px, 3.5vw, 40px);
  text-align: center;
}
.mobile-menu__link {
  font-family: var(--font-display);
  font-size: clamp(32px, 8vw, 56px);
  font-style: italic;
  letter-spacing: 0.02em;
}
.mobile-menu__link:hover,
.mobile-menu__link[aria-current="true"] { color: var(--sec-mustard); }
body.menu-open { overflow: hidden; }

/* ============================================================
   Sub-page footer
============================================================ */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-7) var(--gutter) var(--space-4);
}
.site-footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: var(--space-6);
}
.site-footer__brand {
  display: flex; flex-direction: column;
  gap: var(--space-3);
}
.site-footer__logo { width: clamp(150px, 18vw, 220px); height: auto; }
.site-footer__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--sec-mustard);
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.site-footer__head {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: var(--space-3);
}
.site-footer__links {
  display: flex; flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}
.site-footer__links a { opacity: 0.85; transition: opacity var(--dur-fast); }
.site-footer__links a:hover { opacity: 1; }
.site-footer__addr {
  font-style: normal;
  font-size: var(--fs-sm);
  line-height: 1.9;
  opacity: 0.7;
}
.site-footer__bottom {
  max-width: var(--maxw);
  margin: var(--space-6) auto 0;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; justify-content: space-between;
  font-size: var(--fs-xs);
  opacity: 0.6;
  letter-spacing: 0.1em;
}
@media (max-width: 880px) {
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
  .site-footer__bottom { flex-direction: column; gap: var(--space-2); }
}

/* ============================================================
   Page-transition overlay
   A dark panel slides up from below to cover the viewport,
   then the browser navigates. On the destination page the
   panel begins at "covered" and slides up off-screen to
   reveal the new content. Managed by page-transition.js.
   ============================================================ */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #15161A;
  transform: translateY(100%);
  pointer-events: none;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.7, 0, 0.2, 1);
}
/* INBOUND first paint — `pt-incoming` is added by the inline head
   script BEFORE the body is rendered (when arriving from another
   page). This positions the overlay already covering the viewport
   on frame 1, so the user never sees a flash of the new page
   underneath. page-transition.js then triggers the slide-off. */
html.pt-incoming .page-transition {
  transform: translateY(0);
  transition: none;
}
.page-transition.is-entering {
  /* Outbound — slides up from below to fully cover the viewport */
  transform: translateY(0);
}
.page-transition.is-leaving {
  /* On arrival, slides up off-screen revealing the new page */
  transform: translateY(-100%);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .page-transition { display: none; }
}