/* Tidal Echo home/menu component. Extracted without visual changes. */
:root{
  --menu-wall-light: url("/menu-light.webp");
  --menu-wall-harbor: url("/menu-harbor.webp");
  --menu-wall-default: var(--menu-wall-light);
}
html[data-theme="harbor"]{ --menu-wall-default: var(--menu-wall-harbor); }

.menu-panel{
  position: fixed; inset: 0; z-index: 190;
  pointer-events: none;
  transform: translateX(-100%);
  opacity: 0;
  transition: transform .38s var(--ease-soft), opacity .28s ease;
}
.menu-panel.open{ transform: none; opacity: 1; pointer-events: auto; }
.menu-page{
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background-color: var(--bg);
  background-image: var(--menu-wall-default);
  background-size: cover; background-position: center;
  overflow: hidden;
}
.menu-page::before{
  content:""; position:absolute; inset:0; background: var(--scrim); pointer-events:none;
}
.menu-scroll{
  position: relative; z-index: 1;
  flex: 1 1 auto; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top) + clamp(18px, 4vw, 30px)) clamp(26px, 7vw, 54px) calc(env(safe-area-inset-bottom) + clamp(20px, 5vw, 30px));
}
.menu-scroll::-webkit-scrollbar{ width:0; height:0; }

.menu-head{
  flex: 0 0 auto;
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom: clamp(34px, 10vw, 68px);
}
.menu-private{
  text-align:right; line-height:1.55;
  font-family: var(--font-en), var(--font-cn);
  font-size: clamp(9.5px, 2.5vw, 11px); letter-spacing:.24em;
  color: var(--text-soft); text-transform:uppercase;
}
.menu-private::after{
  content:""; display:block; margin-left:auto; margin-top:8px;
  width: clamp(20px, 5.5vw, 26px); height:1px; background: var(--text-faint); opacity:.6;
}

.menu-hero{ flex: 0 0 auto; margin-bottom: clamp(38px, 11vw, 72px); }
.menu-title{
  font-family: "Pinyon Script", var(--font-en), cursive;
  font-weight: 400;
  font-size: clamp(46px, 15vw, 86px);
  line-height: 1.04;
  color: var(--text);
  margin: 0 0 clamp(16px, 4.4vw, 26px);
  letter-spacing: .005em;
  text-shadow: 0 2px 26px rgba(0,0,0,.16);
}
.menu-since{
  font-family: var(--font-en), var(--font-cn);
  font-size: clamp(11px, 2.9vw, 13.5px);
  letter-spacing:.14em; color: var(--text-soft);
  margin: 0 0 clamp(8px, 2.2vw, 12px);
}
.menu-days{
  display:flex; align-items:baseline; gap: clamp(8px, 2.6vw, 12px);
  font-family: var(--font-en), var(--font-cn); color: var(--text);
}
.menu-days .num{ font-size: clamp(30px, 8.4vw, 48px); font-weight:500; line-height:1; letter-spacing:.01em; }
.menu-days .lab{ font-size: clamp(12px, 3.1vw, 15px); letter-spacing:.13em; color: var(--text-soft); }

/* The original Tidal menu rows now live in the global navigation shell. */
.menu-item{
  display:grid;
  grid-template-columns: clamp(22px, 6vw, 27px) auto 1fr auto;
  align-items:center; gap: clamp(12px, 3.4vw, 18px);
  width:100%; text-align:left;
  background:transparent; border:0;
  border-top:1px solid var(--hairline);
  padding: clamp(15px, 4.4vw, 21px) 2px;
  color: var(--text); font: inherit; cursor:pointer;
  transition: background .18s ease, transform .12s ease;
}
.menu-item:last-child{ border-bottom:1px solid var(--hairline); }
.menu-item:active{ background: var(--row-press); transform: scale(.995); }
.menu-ic{ display:grid; place-items:center; color: var(--text-soft); }
.menu-ic svg{ width: clamp(19px, 5vw, 22px); height: clamp(19px, 5vw, 22px); display:block; }
.menu-dot{ width:3px; height:3px; border-radius:50%; background: var(--text-faint); opacity:.5; }
.menu-copy{ display:flex; flex-direction:column; min-width:0; }
.menu-name{
  font-family: var(--font-en), var(--font-cn);
  font-size: clamp(18px, 5vw, 23px); font-weight:500; line-height:1.14;
  color: var(--text); margin-bottom:2px;
}
.menu-sub{
  font-family: var(--font-en), var(--font-cn);
  font-size: clamp(8.5px, 2.3vw, 10px); letter-spacing:.16em;
  text-transform:uppercase; color: var(--text-faint);
}
.menu-chev{ color: var(--text-faint); display:grid; place-items:center; }
.menu-chev svg{ width:15px; height:15px; display:block; }