/* nav.css — shared GlobalNav: bar + animated hamburger + mega dropdown.
   Used on every page. Colors mirror the site BRAND tokens. */

.gnav-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 40px;
  background: rgba(251,247,240,0);
  border-bottom: 1px solid transparent;
  transition: background .4s ease, border-color .4s ease, backdrop-filter .4s ease;
}
.gnav-bar[data-solid="true"],
.gnav-bar[data-open="true"] {
  background: rgba(251,247,240,.9);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  border-bottom-color: rgba(26,26,26,.08);
}
.gnav-bar[data-open="true"] {
  background: #FBF7F0;
  border-bottom-color: transparent;
}

/* Logo */
.gnav-logo { display: flex; align-items: baseline; gap: 10px; text-decoration: none; position: relative; z-index: 2; }
.gnav-logo .yh {
  font-family: "Cormorant Garamond", serif; font-weight: 500;
  font-size: 22px; letter-spacing: .14em; color: #1A1A1A;
}
.gnav-logo .ac {
  font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 400;
  font-size: 14px; letter-spacing: .18em; color: #EF859A;
}

/* Desktop inline menu — centered between logo and actions */
.gnav-inline {
  display: flex; align-items: center; gap: 30px;
  position: absolute; left: 50%; transform: translateX(-50%);
  z-index: 1;
}
.gnav-inline-link {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-decoration: none; padding: 4px 0; position: relative;
}
.gnav-inline-link .en {
  font-family: "Cormorant Garamond", serif; font-size: 15px;
  letter-spacing: .12em; color: #1A1A1A; line-height: 1;
  transition: color .3s ease;
}
.gnav-inline-link .jp {
  font-family: "Shippori Mincho", serif; font-size: 9.5px;
  letter-spacing: .1em; color: #8A847C; line-height: 1;
  transition: color .3s ease;
}
.gnav-inline-link::after {
  content: ""; position: absolute; left: 50%; bottom: -4px;
  width: 0; height: 1px; background: #EF859A;
  transform: translateX(-50%); transition: width .3s cubic-bezier(.16,1,.3,1);
}
.gnav-inline-link:hover::after { width: 100%; }
.gnav-inline-link:hover .en { color: #EF859A; }
.gnav-inline-link:hover .jp { color: #1A1A1A; }

/* Hover dropdown */
.gnav-inline-item { position: relative; }
.gnav-dropdown {
  position: absolute; top: 100%; left: 50%;
  margin-top: 18px; width: 260px;
  transform: translateX(-50%) translateY(8px);
  background: #fff; border: 1px solid rgba(26,26,26,.1);
  box-shadow: 0 26px 50px -28px rgba(26,26,26,.4);
  padding: 22px 24px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
  z-index: 3;
}
/* invisible bridge so the cursor can travel from link to panel */
.gnav-dropdown::before {
  content: ""; position: absolute; top: -18px; left: 0; right: 0; height: 18px;
}
.gnav-dropdown::after {
  content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 11px; height: 11px; background: #fff;
  border-left: 1px solid rgba(26,26,26,.1); border-top: 1px solid rgba(26,26,26,.1);
}
.gnav-inline-item:hover .gnav-dropdown {
  opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.gnav-dd-desc {
  margin: 0; font-family: "Noto Sans JP", sans-serif; font-size: 12.5px;
  line-height: 1.9; letter-spacing: .03em; color: #5A554E;
}
.gnav-dd-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 13px;
  letter-spacing: .14em; color: #1A1A1A; text-decoration: none;
  padding-bottom: 3px; border-bottom: 1px solid #E5B34F;
}
.gnav-dd-more .ar { color: #E5B34F; }
.gnav-dd-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; text-decoration: none;
  font-family: "Noto Sans JP", sans-serif; font-size: 13px; letter-spacing: .04em;
  color: #1A1A1A; transition: color .25s ease, padding-left .25s ease;
}
.gnav-dd-link .ar { color: #E5B34F; opacity: 0; transition: opacity .25s ease; }
.gnav-dd-link:hover { color: #EF859A; padding-left: 6px; }
.gnav-dd-link:hover .ar { opacity: 1; }
.gnav-dd-divider { height: 1px; background: rgba(26,26,26,.1); margin: 8px 0; }

/* Trigger cluster (contact pill + menu button) */
.gnav-actions { display: flex; align-items: center; gap: 18px; position: relative; z-index: 2; }
.gnav-contact {
  font-family: "Noto Sans JP", sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: .18em; color: #fff; background: #EF859A;
  padding: 11px 22px; text-decoration: none;
  transition: background .3s ease;
}
.gnav-contact:hover { background: #1A1A1A; }

/* Hamburger button */
.gnav-burger {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; width: 46px; height: 46px; padding: 0;
  background: transparent; border: 1px solid rgba(26,26,26,.18); border-radius: 0;
  cursor: pointer; transition: border-color .3s ease, background .3s ease;
}
.gnav-burger:hover { border-color: #1A1A1A; }
.gnav-burger span {
  display: block; width: 20px; height: 1.5px; background: #1A1A1A;
  transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .25s ease;
}
.gnav-bar[data-open="true"] .gnav-burger { border-color: #1A1A1A; }
.gnav-bar[data-open="true"] .gnav-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.gnav-bar[data-open="true"] .gnav-burger span:nth-child(2) { opacity: 0; }
.gnav-bar[data-open="true"] .gnav-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.gnav-burger-label {
  font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 12px;
  letter-spacing: .2em; color: #1A1A1A; min-width: 42px; text-align: center;
}

/* Overlay scrim */
.gnav-overlay {
  position: fixed; inset: 0; z-index: 54;
  background: rgba(26,26,26,.28);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .45s ease;
}
.gnav-overlay[data-open="true"] { opacity: 1; pointer-events: auto; }

/* Mega dropdown panel */
.gnav-panel {
  position: fixed; top: 0; left: 0; right: 0; z-index: 55;
  background: #FBF7F0;
  border-bottom: 1px solid rgba(26,26,26,.08);
  box-shadow: 0 40px 80px -40px rgba(26,26,26,.35);
  padding: 104px 40px 56px;
  transform: translateY(-101%);
  max-height: 100vh; overflow-y: auto;
}

.gnav-inner {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px;
}

/* Decorative giant word behind the menu */
.gnav-ghost {
  position: absolute; right: 24px; bottom: -40px; pointer-events: none; user-select: none;
  font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 300;
  font-size: clamp(120px, 16vw, 240px); line-height: .8; letter-spacing: -.03em;
  color: #F8DDE2; opacity: .5;
}

/* Primary column — big editorial links */
.gnav-primary { display: flex; flex-direction: column; }
.gnav-link {
  display: flex; align-items: baseline; gap: 20px;
  padding: 16px 0; text-decoration: none;
  border-bottom: 1px solid rgba(26,26,26,.08);
  opacity: 0; transform: translateY(16px);
  transition: padding-left .35s ease;
}
.gnav-panel[data-open="true"] .gnav-link {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1), padding-left .35s ease;
}
.gnav-link .idx {
  font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .2em;
  color: #B8B2A9; width: 28px; flex-shrink: 0;
}
.gnav-link .en {
  font-family: "Cormorant Garamond", serif; font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1; letter-spacing: .01em;
  color: #1A1A1A; transition: color .3s ease, font-style .3s ease;
}
.gnav-link .jp {
  font-family: "Shippori Mincho", serif; font-size: 13px; letter-spacing: .14em;
  color: #8A847C; transition: color .3s ease;
}
.gnav-link .go {
  margin-left: auto; font-family: "Cormorant Garamond", serif; font-size: 22px;
  color: #EF859A; opacity: 0; transform: translateX(-8px);
  transition: opacity .3s ease, transform .3s ease;
}
.gnav-link:hover { padding-left: 14px; }
.gnav-link:hover .en { color: #EF859A; font-style: italic; }
.gnav-link:hover .jp { color: #1A1A1A; }
.gnav-link:hover .go { opacity: 1; transform: translateX(0); }

/* Secondary column */
.gnav-secondary {
  display: flex; flex-direction: column; gap: 36px;
  opacity: 0; transform: translateY(16px);
}
.gnav-panel[data-open="true"] .gnav-secondary {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .45s ease .1s, transform .45s cubic-bezier(.16,1,.3,1) .1s;
}
.gnav-group-title {
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 13px; letter-spacing: .22em; color: #E5B34F;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(26,26,26,.08);
}
.gnav-sublist { display: flex; flex-direction: column; gap: 2px; }
.gnav-sub {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; text-decoration: none;
  font-family: "Noto Sans JP", sans-serif; font-size: 14px; letter-spacing: .05em;
  color: #1A1A1A; transition: color .25s ease, padding-left .25s ease;
}
.gnav-sub .ar { color: #E5B34F; opacity: 0; transition: opacity .25s ease; }
.gnav-sub:hover { padding-left: 8px; color: #EF859A; }
.gnav-sub:hover .ar { opacity: 1; }

.gnav-cta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; text-decoration: none;
  background: #1A1A1A; color: #fff;
  font-family: "Noto Sans JP", sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .16em;
  transition: background .3s ease;
}
.gnav-cta:hover { background: #EF859A; }
.gnav-cta .ar { font-family: "Cormorant Garamond", serif; font-size: 18px; }

.gnav-social { display: flex; gap: 22px; flex-wrap: wrap; }
.gnav-social a {
  font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 14px;
  letter-spacing: .14em; color: #8A847C; text-decoration: none;
  transition: color .25s ease;
}
.gnav-social a:hover { color: #1A1A1A; }

/* ───────── Responsive ───────── */
/* Below 1080px the inline menu is dropped; the hamburger mega-menu takes over. */
@media (max-width: 1080px) {
  .gnav-inline { display: none; }
}
@media (max-width: 880px) {
  .gnav-inner { grid-template-columns: 1fr; gap: 32px; }
  .gnav-ghost { display: none; }
  .gnav-panel { padding: 96px 24px 40px; }
  .gnav-link { padding: 13px 0; }
  .gnav-link .en { font-size: 30px; }
}
@media (max-width: 560px) {
  .gnav-bar { padding: 14px 18px; }
  .gnav-contact { display: none; }       /* contact lives inside the panel CTA on phones */
  .gnav-burger-label { display: none; }
  .gnav-panel { padding: 84px 18px 36px; max-height: 100dvh; }
  .gnav-link .en { font-size: 26px; }
  .gnav-link .go { display: none; }
}

/* Lock page scroll while menu open */
body.gnav-lock { overflow: hidden; }