/* Landing owns a fixed viewport scene so it can sit in front of the board's rails. */
.landing {
  --staff-x: 73%;
  --staff-y: 37%;
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  color: #fff3d6;
  background: #0d1018;
}

.landing-art, .landing-art img, .landing-scrim { position: absolute; inset: 0; width: 100%; height: 100%; }
.landing-art img { display: block; object-fit: cover; object-position: center; }
.landing-scrim { background: linear-gradient(90deg, rgba(8, 9, 14, .94) 0%, rgba(10, 11, 17, .81) 28%, rgba(10, 11, 17, .3) 49%, rgba(10, 11, 17, .04) 72%); }
.landing-content {
  position: relative;
  z-index: 1;
  width: min(40vw, 700px);
  min-height: 100%;
  padding: clamp(28px, 7vw, 138px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
/* U15 — the bolt layer sits exactly over the wordmark's box. */
.landing-wordmark { position: relative; isolation: isolate; }
.vr-bolt, .vr-menu-flame {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.vr-flame {
  filter: url(#vr-flame-warp);
  animation: vr-flame-flicker .24s steps(2, jump-none) infinite alternate;
}
.vr-flame-tail {
  fill: url(#vr-flame-tail-gradient);
  filter: url(#vr-flame-warp) blur(1.2px) drop-shadow(0 0 4px rgba(142, 35, 10, .42));
}
.vr-flame-body {
  fill: url(#vr-flame-body-gradient);
  filter: url(#vr-flame-warp) drop-shadow(0 0 2px rgba(185, 68, 16, .55)) drop-shadow(0 0 5px rgba(126, 38, 8, .38));
}
.vr-flame-core {
  fill: url(#vr-flame-core-gradient);
  filter: url(#vr-flame-core-warp) drop-shadow(1px -1px 1px rgba(220, 139, 46, .32)) drop-shadow(-1px 1px 2px rgba(82, 29, 13, .36));
}
@keyframes vr-flame-flicker {
  from { opacity: .58; }
  to { opacity: .82; }
}
@media (prefers-reduced-motion: reduce) { .vr-bolt, .vr-menu-flame { display: none; } }

.landing-wordmark {
  margin: 0;
  max-width: 100%;
  color: var(--gold);
  font-family: 'Almendra SC', var(--font-display), serif;
  font-size: clamp(2.2rem, 5.25vw, 6.7rem);
  font-weight: 700;
  line-height: .88;
  letter-spacing: .18em;
  text-shadow: 0 3px 24px rgba(0, 0, 0, .8), 0 0 20px rgba(235, 187, 84, .25);
  white-space: nowrap;
}
.vr-letter { position: relative; z-index: 1; display: inline-block; }
.landing-tagline {
  /* U16: tighten the wordmark→menu gap so the menu rides up closer to the title. */
  margin: clamp(12px, 1.6vh, 20px) 0 clamp(16px, 2.4vh, 28px);
  /* U18 — the tagline crosses the scrim's falloff onto a sunlit meadow, so a
     translucent light serif loses the fight. Full opacity, a touch more weight,
     and a soft dark halo so it reads at any point along the gradient. */
  color: rgb(240, 231, 210);
  font-family: 'Cormorant Garamond', var(--font-body), serif;
  font-size: clamp(1.05rem, 1.8vw, 1.65rem);
  font-style: italic;
  font-weight: 600;
  letter-spacing: .035em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 18px rgba(0, 0, 0, .55);
}
.landing-menu { display: grid; justify-items: start; gap: clamp(8px, 1.25vh, 14px); }
.landing-menu-item {
  padding: 5px 0;
  border: 0;
  color: #fff2d3;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-display), serif;
  font-size: clamp(1rem, 1.55vw, 1.42rem);
  letter-spacing: .09em;
  text-align: left;
  text-shadow: 0 2px 8px #000;
  transition: color .18s ease, transform .18s ease;
}
/* U16 — hover reads as a lit rune: the glyph brightens and warms, a gilt rule
   grows out from the left, and the letters breathe apart very slightly. */
.landing-menu-item { position: relative; transition: color .18s var(--ease-out, ease-out), transform .18s var(--ease-out, ease-out), letter-spacing .18s var(--ease-out, ease-out), text-shadow .18s; }
/* U16 fix: the hover flame must sit BEHIND the menu glyphs (as the wordmark's
   fire sits behind .vr-letter). The label is a raw text node, so a positioned
   z-index:0 flame painted over it — drop the flame below the text with z-index:-1
   inside the item's own stacking context (isolation:isolate keeps it contained). */
.vr-menu-flame { z-index: -1; }
.landing-menu-item { isolation: isolate; }
.landing-menu-item::before {
  content: ''; position: absolute; left: -14px; top: 50%;
  width: 0; height: 1px; background: var(--gold);
  transform: translateY(-50%); opacity: 0;
  transition: width .2s var(--ease-out, ease-out), opacity .2s;
}
.landing-menu-item:hover, .landing-menu-item:focus-visible {
  color: var(--gold-bright);
  transform: translateX(10px);
  letter-spacing: .14em;
  text-shadow: 0 0 14px rgba(227, 180, 94, .35);
  outline: none;
}
.landing-menu-item:hover::before, .landing-menu-item:focus-visible::before { width: 10px; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .landing-menu-item, .landing-menu-item::before { transition: none; }
  .landing-menu-item:hover, .landing-menu-item:focus-visible { transform: none; letter-spacing: inherit; }
}
.landing-menu-item:focus-visible { box-shadow: 0 0 0 2px rgba(255, 242, 211, .82), 0 3px 0 var(--gold); }
/* Settings used to be the faded last menu entry; it is now the cog (U13). */
.landing-staff-glow {
  position: absolute;
  z-index: 1;
  left: var(--staff-x);
  top: var(--staff-y);
  width: clamp(110px, 13vw, 245px);
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 244, 188, .78) 0%, rgba(229, 169, 69, .4) 18%, rgba(166, 92, 255, .16) 45%, transparent 70%);
  mix-blend-mode: screen;
}

@media (max-width: 899px) {
  .landing { --staff-x: 63%; --staff-y: 26%; }
  .landing-art img { object-position: center; }
  .landing-scrim { background: linear-gradient(90deg, rgba(7, 8, 13, .94), rgba(7, 8, 13, .72) 68%, rgba(7, 8, 13, .36)); }
  .landing-content { width: 100%; padding: clamp(24px, 8vw, 64px); }
}

@media (max-width: 430px) {
  .landing-wordmark { font-size: clamp(2rem, 10.2vw, 2.75rem); letter-spacing: .12em; }
  .landing-tagline { max-width: 17rem; }
}

@media (max-width: 640px) {
  .landing-content { box-sizing: border-box; padding: 24px; }
  .landing-menu { width: 100%; }
  .landing-menu-item { min-height: 44px; padding: 10px 0; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-menu-item { transition: none; }
  .landing-menu-item:hover, .landing-menu-item:focus-visible { transform: none; }
}

/* Short landscape phones (the mobile target is 844x390): the portrait-scaled
   column overflows the viewport and .landing's overflow:hidden clips the menu.
   Compact wordmark and a tight SINGLE column (user, 2026-07-13: no two-column
   menu) — 7 items at 28px each still clear 390px with room for the title. */
@media (max-height: 480px) and (orientation: landscape) {
  .landing-content { width: 100%; box-sizing: border-box; padding: 12px 32px; }
  .landing-wordmark { font-size: clamp(1.5rem, 8vh, 2.1rem); }
  .landing-tagline { margin: 2px 0 8px; font-size: .85rem; }
  .landing-menu { gap: 0; }
  .landing-menu-item { min-height: 28px; padding: 3px 0; font-size: .9rem; }
}