/* ════════════════════════════════════════
   EQUIST THEME — LAYOUT
════════════════════════════════════════ */

/* ── Sidebar base ── */
.sidebar {
  position: fixed; left:0; top:0; bottom:0;
  width: var(--sidebar);
  background: var(--black);
  z-index: 200;
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 0 24px;
  border-right: 1px solid rgba(255,255,255,0.04);
}
body.nav-open .sidebar { z-index: 1001; }

.logo-wrap { width:34px; color:#f5f4f0 !important; transition:color .3s ease; display:block; }
.logo-wrap:hover { color:#ffffff !important; }
.logo-wrap svg { width:100%; height:auto; display:block; fill:currentColor; }
.sidebar-mid { flex:1; display:flex; flex-direction:column; align-items:center; gap:24px; padding-top:40px; }
.sidebar-lang { writing-mode:vertical-rl; font-size:10px; letter-spacing:.18em; color:rgba(255,255,255,0.3); cursor:none; transition:color .3s; text-decoration:none; }
.sidebar-lang:hover { color:#f5f4f0; }
.sidebar-lang em { font-style:normal; color:rgba(255,255,255,1); }

/* ── Hamburger ── */
.hamburger { margin-top:auto; display:flex; flex-direction:column; gap:5px; cursor:none; background:none; border:none; padding:8px; position:relative; z-index:1001; }
.hamburger span { display:block; height:1.5px; background:rgba(255,255,255,1); transform-origin:center; transition:transform .4s var(--ease-quart),opacity .3s ease,width .35s var(--ease-expo); }
.hamburger span:nth-child(1){width:22px;} .hamburger span:nth-child(2){width:16px;} .hamburger span:nth-child(3){width:22px;}
.hamburger.is-open span{background:rgba(255,255,255,1);}
.hamburger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);width:22px;}
.hamburger.is-open span:nth-child(2){opacity:0;transform:translateX(-8px);}
.hamburger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);width:22px;}
.hamburger::after { content:'CLOSE'; position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%) translateX(-6px); font-size:9px; letter-spacing:.22em; color:rgba(255,255,255,0); white-space:nowrap; pointer-events:none; transition:color .35s ease .5s,transform .35s var(--ease-expo) .5s; }
.hamburger.is-open::after { color:rgba(255,255,255,0.5); transform:translateY(-50%) translateX(0); }

/* ════════════════════════════════════════
   SIDEBAR POSITION MODES
   body class: sidebar-pos--{option}
════════════════════════════════════════ */

/* ── B: top-horizontal ── */
body.sidebar-pos--top-horizontal { padding-left:0; padding-top:var(--topbar,60px); }
body.sidebar-pos--top-horizontal .sidebar {
  left:0; right:0; top:0; bottom:auto;
  width:100%; height:var(--topbar,60px);
  flex-direction:row; align-items:center; padding:0 32px;
  border-right:none; border-bottom:1px solid rgba(255,255,255,0.05);
}
body.sidebar-pos--top-horizontal .logo-wrap { width:28px; margin-right:auto; }
body.sidebar-pos--top-horizontal .sidebar-mid {
  flex:0; flex-direction:row; padding-top:0; gap:20px; align-items:center;
}
/* JP/EN — horizontal, no wrapping, full text on one line */
body.sidebar-pos--top-horizontal .sidebar-lang {
  writing-mode:horizontal-tb; white-space:nowrap; letter-spacing:.08em; font-size:11px; min-width:fit-content;
}
body.sidebar-pos--top-horizontal .hamburger { margin-top:0; margin-left:16px; }
/* CLOSE label goes below hamburger (not to the right) */
body.sidebar-pos--top-horizontal .hamburger::after {
  left:50%; top:calc(100% + 8px);
  transform:translateX(-50%) translateY(-6px);
}
body.sidebar-pos--top-horizontal .hamburger.is-open::after {
  transform:translateX(-50%) translateY(0);
}
/* Nav opens from top-right corner — handled via --nav-origin CSS var above */

/* ── C: top-hide-scroll ── */
body.sidebar-pos--top-hide-scroll { padding-left:0; padding-top:var(--topbar,60px); }
body.sidebar-pos--top-hide-scroll .sidebar {
  left:0; right:0; top:0; bottom:auto;
  width:100%; height:var(--topbar,60px);
  flex-direction:row; align-items:center; padding:0 32px;
  border-right:none; border-bottom:1px solid rgba(255,255,255,0.05);
}
body.sidebar-pos--top-hide-scroll .logo-wrap { width:28px; margin-right:auto; }
body.sidebar-pos--top-hide-scroll .sidebar-mid {
  flex:0; flex-direction:row; padding-top:0; gap:20px; align-items:center;
}
/* JP/EN — one line */
body.sidebar-pos--top-hide-scroll .sidebar-lang {
  writing-mode:horizontal-tb; white-space:nowrap; letter-spacing:.08em; font-size:15px; min-width:fit-content;
}
body.sidebar-pos--top-hide-scroll .hamburger { margin-top:0; margin-left:16px; }
/* CLOSE label below */
body.sidebar-pos--top-hide-scroll .hamburger::after {
  left:50%; top:100%;
  transform:translateX(-50%) translateY(-6px);
}
body.sidebar-pos--top-hide-scroll .hamburger.is-open::after {
  transform:translateX(-50%) translateY(0);
}
/* Nav opens from top-right — handled via --nav-origin CSS var above */
/* Hide bar: slides UP off-screen */
body.sidebar-pos--top-hide-scroll .sidebar {
  transition: transform .38s cubic-bezier(0.76, 0, 0.24, 1);
}
body.sidebar-pos--top-hide-scroll .sidebar.sidebar--hidden {
  transform: translateY(-100%);
}
/* Spring return: bounces down slightly when reappearing */
body.sidebar-pos--top-hide-scroll .sidebar.sidebar--returning {
  transform: translateY(0);
}

/* ── D: left-hide-scroll ── */
/* Two different transitions:
   Hide  → fast ease-in, slides left off-screen
   Show  → spring overshoot, bounces slightly back in from left */
body.sidebar-pos--left-hide-scroll .sidebar {
  transition: transform .5s cubic-bezier(0.76, 0, 0.24, 1);
}
body.sidebar-pos--left-hide-scroll .sidebar.sidebar--hidden {
  transform: translateX(-100%);
  /* Switch to fast exit when hiding */
  transition: transform .38s cubic-bezier(0.76, 0, 0.24, 1);
}
/* When sidebar--hidden is removed, the base transition kicks in (spring) */
/* We use a separate is-returning class to trigger the spring ease */
body.sidebar-pos--left-hide-scroll .sidebar.sidebar--returning {
  transition: transform .65s cubic-bezier(0.34, 1.56, 0.64, 1); /* spring overshoot */
}

/* ════════════════════════════════════════
   NAV OVERLAY — black
   Origin controlled via --nav-origin CSS var (set by nav.js)
   Default: bottom-left (left sidebar mode)
   Top-bar modes: top-right (set dynamically)
════════════════════════════════════════ */
.nav-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: var(--black);
  pointer-events: none;
  --nav-origin: 36px calc(100% - 36px);
  clip-path: circle(0% at var(--nav-origin));
  transition: clip-path .7s var(--ease-quart);
  overflow: hidden;
}
.nav-overlay.is-open {
  clip-path: circle(150% at var(--nav-origin));
  pointer-events: auto;
}
.nav-overlay::before {
  content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 0;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.3) 50%, transparent);
  transition: height .8s var(--ease-expo) .3s;
}
.nav-overlay.is-open::before { height: 100%; }

/* Override origin for top-bar modes via CSS (fallback if JS hasn't run yet) */
body.sidebar-pos--top-horizontal .nav-overlay,
body.sidebar-pos--top-hide-scroll .nav-overlay {
  --nav-origin: calc(100% - 48px) 30px;
}

/* (nav-logo removed) */

.nav-inner { position:absolute;inset:0; display:flex;flex-direction:column;justify-content:center; padding:80px 80px 60px 120px;z-index:1; }
.nav-list { list-style:none;display:flex;flex-direction:column;gap:4px;margin-bottom:60px; }
.nav-item { overflow:hidden; }
.nav-link { display:inline-flex;align-items:center;gap:20px;text-decoration:none; color:rgba(255,255,255,0.85); font-size:clamp(36px,5.5vw,68px);font-weight:700;letter-spacing:-.02em;line-height:1.1; padding:6px 0;position:relative; transform:translateX(-48px);opacity:0; transition:transform 0s,opacity 0s,color .3s ease; }
.nav-item:nth-child(1) .nav-link{transition-delay:0ms;} .nav-item:nth-child(2) .nav-link{transition-delay:60ms;} .nav-item:nth-child(3) .nav-link{transition-delay:120ms;} .nav-item:nth-child(4) .nav-link{transition-delay:180ms;} .nav-item:nth-child(5) .nav-link{transition-delay:240ms;} .nav-item:nth-child(6) .nav-link{transition-delay:300ms;}
.nav-overlay.is-open .nav-link{transform:translateX(0);opacity:1;transition:transform .65s var(--ease-expo),opacity .55s ease,color .3s ease;}
.nav-link::after{content:'';position:absolute;bottom:4px;left:0;width:0;height:1px;background:rgba(255,255,255,0.4);transition:width .35s var(--ease-expo);}
.nav-link:hover{color:#f5f4f0;transform:translateX(12px);}
.nav-link:hover::after{width:100%;}
.nav-item--sub .nav-link{font-size:clamp(24px,3.5vw,44px);color:rgba(255,255,255,0.4);padding-left:28px;}
.nav-num{font-size:15px;font-weight:400;letter-spacing:.15em;color:rgba(255,255,255,0.25);flex-shrink:0;margin-top:6px;align-self:flex-start;}
.nav-meta{display:flex;align-items:center;gap:36px;opacity:0;transform:translateY(10px);transition:opacity 0s,transform 0s;}
.nav-overlay.is-open .nav-meta{opacity:1;transform:none;transition:opacity .5s ease .5s,transform .5s var(--ease-expo) .5s;}
.nav-meta a{font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,0.3);text-decoration:none;cursor:none;transition:color .3s;}
.nav-meta a:hover{color:rgba(255,255,255,0.7);}

/* ── Section base ── */
.section{padding:120px 80px;position:relative;}
.section--dark{background:var(--charcoal);color:#f5f4f0;}
.section--dark .section-rule{background:rgba(255,255,255,0.25);}
.section--dark .body-text{color:rgba(255,255,255,0.55);}
.section-head{margin-bottom:56px;}
.title-en{display:block;font-size:clamp(32px,5vw,56px);font-weight:700;letter-spacing:-.02em;line-height:1;margin-bottom:6px;}
.title-ja{display:inline-block;font-size:11px;letter-spacing:.08em;color:rgba(0,0,0,0.6);margin-bottom:14px;}
.section--dark .title-ja{color:rgba(255,255,255,0.35);}
.section-rule{display:block;width:32px;height:1.5px;background:var(--black);}
.body-text{font-size:13px;line-height:2;color:rgba(0,0,0,0.6);max-width:560px;}

/* ── Footer ── */
.site-footer{background:var(--black);padding:60px 80px;display:flex;align-items:center;justify-content:space-between;}
.footer-copy{font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,0.5);}