/* The menu panel (NavPanel.astro + site-shell.js): one panel on every page,
   the homepage included, so the menu is the same object everywhere and its
   links come only from Sanity (Header, footer & contact details → menu).
   Split out of site-shell.css (2026-10-21) so the homepage can load the panel
   without the inner-page shell. */
/* The menu is the navigation at every width — the top bar only ever carries
   Enquire, the monogram and Menu. So the panel is the full composition: a
   numbered index on the left and the spinning 3D monogram on the right
   (menu-mark3d.js). site-shell.js builds the index from the anchors. */
.tlh-nav__panel {
  position: fixed;
  z-index: 59;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  align-content: center;
  gap: 0;
  height: 100svh;
  min-height: 0;
  box-sizing: border-box;
  overflow-y: auto;
  padding: clamp(6rem, 14vh, 9rem) clamp(1.25rem, 6vw, 6rem) 3rem;
  background: #241733;
  box-shadow: 0 1.5rem 3rem rgba(23, 20, 29, .12);
}
.tlh-menu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  width: 100%;
}
/* The links sit to the left, the spinning 3D monogram on the right. */
@media (min-width: 900px) {
  /* Two equal halves, split on the centre line under the nav's monogram. */
  .tlh-menu { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0; }
}
.tlh-menu__mark {
  position: relative;
  height: clamp(7rem, 18vh, 10rem);
}
@media (min-width: 900px) {
  /* Proportions from Hodge's mock-up (2026-10-20): the links fill the left
     half up to the centre line, and the mark stands in the middle of the
     right half at about half the screen's height. */
  .tlh-menu__mark { justify-self: center; width: min(42svh, 27rem); height: min(66svh, 42rem); }
  .tlh-menu .tlh-menu__list { margin-right: 1rem; }
}
.tlh-menu__mark canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/* The flat monogram is the outline the 3D mark is built from, and stands in
   for it only if WebGL fails. */
.tlh-menu__mark-flat {
  display: none;
  height: 70%;
  margin: auto;
  color: #4c3074;
}
.tlh-menu__mark[data-menu-mark-state="fallback"] { display: grid; }
.tlh-menu__mark[data-menu-mark-state="fallback"] .tlh-menu__mark-flat { display: block; }
.tlh-menu__mark[data-menu-mark-state="fallback"] canvas { display: none; }

.tlh-menu__list { display: grid; margin: 0; padding: 0; list-style: none; }
.tlh-menu__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.25rem, 3.5vw, 3.5rem);
  border-bottom: 1px solid rgba(245, 238, 233, .16);
}
.tlh-menu__item:first-child { border-top: 1px solid rgba(245, 238, 233, .16); }
.tlh-menu__num {
  color: rgba(183, 152, 220, .85);
  font-size: clamp(.62rem, .78vw, .75rem);
  font-weight: 500;
  letter-spacing: .14em;
}
.tlh-nav__panel a {
  display: block;
  padding: clamp(.6rem, 2vh, 1.15rem) 0;
  /* The rule belongs to the row, not the link. */
  border-bottom: 0;
  color: rgba(245, 238, 233, .5);
  font-family: var(--font-ui, "Inter", sans-serif);
  font-size: clamp(1.75rem, 2.9vw, 3rem);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.12;
  text-decoration: none;
  transition: color .3s ease;
}
/* Exactly one bright line among quiet ones: the entry being considered, which
   is the current page until the reader looks elsewhere. Without the script
   there is no .is-active, so the current page carries it instead. */
.tlh-nav__panel a.is-active,
.tlh-nav__panel:not(:has(.tlh-menu)) a[aria-current="page"] { color: #f5eee9; }

.tlh-nav__panel a:focus-visible { outline: 2px solid #5f3c91; outline-offset: 2px; }
.tlh-nav__panel[hidden] { display: none; }