.menu-page {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(circle at 78% 9%, color-mix(in srgb, var(--color-blue-haze) 58%, transparent), transparent 28rem),
    var(--color-ink-950);
}

.menu-page .section { position: relative; z-index: 1; }
.menu-page a { text-underline-offset: 0.2em; }
.menu-page h2 { margin-bottom: var(--space-5); }
.menu-page h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.menu-page p:last-child { margin-bottom: 0; }

.menu-cursor-light {
  position: absolute;
  z-index: 0;
  width: 22rem;
  height: 22rem;
  left: calc(var(--menu-pointer-x, -30rem) - 11rem);
  top: calc(var(--menu-pointer-y, -30rem) - 11rem);
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-turquoise-400) 11%, transparent), transparent 67%);
  transition: opacity var(--transition-fast);
}

.menu-hero__grid,
.menu-room__grid,
.menu-language__grid,
.menu-planning__panel,
.menu-gathering__panel,
.menu-closing__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
}

.menu-hero__copy { grid-column: 1 / span 7; align-self: center; min-width: 0; }
.menu-hero__copy h1 { max-width: 27ch; }
.menu-hero__summary { max-width: 57ch; }
.menu-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.menu-hero__actions > * { min-width: 0; }
.menu-hero__media-group { grid-column: 8 / span 5; align-self: stretch; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.menu-hero__figure { width: 100%; aspect-ratio: 4 / 5; margin: 0; border: var(--border-subtle); }
.menu-hero__figure img { filter: saturate(0.72) contrast(1.03); }
.menu-hero__status { align-self: flex-start; width: min(100%, 20rem); padding-top: var(--space-3); border-top: var(--border-subtle); }
.menu-hero__status .meta { display: block; margin-bottom: var(--space-2); }
.menu-hero__status p { max-width: 32ch; color: var(--color-mist-300); }
.menu-node { position: absolute; pointer-events: none; color: var(--color-ultramarine-400); font: 600 var(--text-xs)/1 var(--font-mono); letter-spacing: .08em; opacity: .72; }
.menu-node--hero { right: calc(var(--container-padding) + 2rem); bottom: 1.5rem; }

.menu-reading__heading { width: 41.5%; min-width: 0; }
.menu-reading__heading h2 { max-width: 18ch; }
.menu-reading__principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-7); border-top: var(--border-subtle); }
.menu-principle { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-3); min-width: 0; padding: var(--space-5); border-bottom: var(--border-subtle); transition: border-color var(--transition-fast); }
.menu-principle + .menu-principle { border-left: var(--border-subtle); }
.menu-principle__number { color: var(--color-muted-500); font: 600 var(--text-2xl)/1 var(--font-heading); letter-spacing: -.04em; }
.menu-principle__copy { min-width: 0; }
.menu-principle__copy p { max-width: 52ch; }
.menu-reading__caveat { width: 66.666%; max-width: 62ch; margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--border-subtle); color: var(--color-mist-300); }

.menu-index__panel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); padding: clamp(var(--space-5), 4vw, var(--space-7)); background: color-mix(in srgb, var(--color-glass-800) 100%, var(--color-blue-haze)); }
.menu-index__intro { grid-column: 1 / span 6; min-width: 0; }
.menu-index__intro p:last-child { max-width: 55ch; }
.menu-index__signal { grid-column: 9 / span 4; align-self: end; justify-self: end; margin: 0; }
.menu-index__rows { grid-column: 1 / -1; display: flex; flex-direction: column; min-width: 0; border-top: var(--border-subtle); }
.menu-index-row { display: grid; grid-template-columns: minmax(2.5rem, 1fr) minmax(9rem, 3fr) minmax(14rem, 5fr) minmax(8rem, 3fr); gap: var(--space-4); align-items: center; min-width: 0; padding: var(--space-5) 0; border-bottom: var(--border-subtle); border-left: 2px solid transparent; transition: border-color var(--transition-fast); }
.menu-index-row__ordinal { grid-column: 1; color: var(--color-muted-500); font-family: var(--font-mono); }
.menu-index-row__body { grid-column: 2 / span 2; display: grid; grid-template-columns: minmax(9rem, 3fr) minmax(0, 5fr); gap: var(--space-4); min-width: 0; }
.menu-index-row__body h3 { margin: 0; }
.menu-index-row__body p { max-width: 48ch; margin: 0; }
.menu-index-row__action { grid-column: 4; justify-self: end; min-height: 44px; display: inline-flex; align-items: center; font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; }
.menu-index-row--active { border-left-color: var(--color-turquoise-400); padding-left: var(--space-3); }
.menu-index-row--notes { border-left-color: color-mix(in srgb, var(--color-ultramarine-400) 55%, transparent); padding-left: var(--space-3); }

.menu-room__lead { grid-column: 1 / span 6; min-width: 0; }
.menu-room__lead > p:last-child { max-width: 50ch; }
.menu-room__figure { grid-column: 8 / span 5; grid-row: 1 / span 2; width: 100%; aspect-ratio: 3 / 4; margin: 0; border: var(--border-subtle); }
.menu-room__figure img { object-position: 62% center; filter: saturate(.72) contrast(1.04); }
.menu-room__perspectives { grid-column: 1 / span 10; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); min-width: 0; margin-top: var(--space-6); }
.menu-perspective { min-width: 0; padding-top: var(--space-4); border-top: var(--border-subtle); }
.menu-perspective p { max-width: 40ch; }
.menu-perspective--tinted { padding: var(--space-5); border: var(--border-subtle); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-violet-haze) 32%, var(--color-charcoal-900)); }

.menu-language__heading { grid-column: 1 / span 5; min-width: 0; }
.menu-language__heading h2 { max-width: 18ch; }
.menu-language__module { min-width: 0; padding-top: var(--space-4); border-top: var(--border-subtle); }
.menu-language__module:nth-of-type(1) { grid-column: 2 / span 5; }
.menu-language__module:nth-of-type(2) { grid-column: 8 / span 5; }
.menu-language__module:nth-of-type(3) { grid-column: 1 / span 5; }
.menu-language__module:nth-of-type(4) { grid-column: 7 / span 5; }
.menu-language__module .meta { display: block; margin-bottom: var(--space-4); color: var(--color-turquoise-400); }
.menu-language__module p { max-width: 48ch; }

.menu-planning__panel { padding: clamp(var(--space-5), 4vw, var(--space-7)); background: var(--color-charcoal-900); }
.menu-planning__intro { grid-column: 1 / span 6; min-width: 0; }
.menu-planning__intro p:last-child { max-width: 58ch; }
.menu-planning__side-note { grid-column: 9 / span 4; justify-self: end; align-self: end; margin: 0; color: var(--color-ultramarine-400); }
.menu-planning__steps { grid-column: 1 / -1; display: flex; flex-direction: column; min-width: 0; border-top: var(--border-subtle); }
.menu-step { display: grid; grid-template-columns: minmax(10rem, 2fr) minmax(0, 7fr) minmax(8rem, 3fr); gap: var(--space-5); min-width: 0; padding: var(--space-5) 0; border-bottom: var(--border-subtle); border-left: 2px solid color-mix(in srgb, var(--color-ultramarine-400) 55%, transparent); padding-left: var(--space-3); }
.menu-step__label { min-width: 0; }
.menu-step__label span { display: block; margin-bottom: var(--space-2); color: var(--color-turquoise-400); font: 600 var(--text-sm)/1 var(--font-mono); }
.menu-step__label h3 { margin: 0; font-size: var(--text-lg); }
.menu-step > p { max-width: 50ch; margin: 0; }
.menu-step__route { min-width: 0; align-self: center; }
.menu-step__route a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; }
.menu-planning__note { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; margin-top: var(--space-2); }
.menu-planning__note p { max-width: 55ch; margin: 0; }

.menu-detail__wrap { position: relative; }
.menu-detail__figure { width: 100%; aspect-ratio: 16 / 9; margin: 0; border: var(--border-subtle); }
.menu-detail__figure::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(9,10,15,.42), transparent 65%); }
.menu-detail__figure img { filter: saturate(.7) contrast(1.04); }
.menu-detail__label { position: absolute; z-index: 1; top: var(--space-4); left: var(--space-4); margin: 0; padding: var(--space-2) var(--space-3); border: var(--border-subtle); border-radius: var(--radius-sm); background: var(--color-glass-800); color: var(--color-turquoise-400); font-family: var(--font-heading); font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.menu-detail__caption { position: relative; z-index: 2; width: calc((100% - (var(--space-5) * 4)) / 12 * 5 + (var(--space-5) * 4)); margin: calc(var(--space-6) * -1) 0 0 var(--space-5); padding: var(--space-5); }
.menu-detail__caption h2 { max-width: 24ch; font-size: var(--text-2xl); }
.menu-detail__caption p { max-width: 48ch; }

.menu-gathering__panel { padding: clamp(var(--space-5), 4vw, var(--space-7)); background: color-mix(in srgb, var(--color-glass-800) 92%, var(--color-violet-haze)); }
.menu-gathering__intro { grid-column: 1 / span 6; min-width: 0; }
.menu-gathering__intro h2 { max-width: 32ch; }
.menu-gathering__intro p:last-child { max-width: 56ch; }
.menu-gathering__modules { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.menu-gathering__module { min-width: 0; padding: var(--space-5); border: var(--border-subtle); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-charcoal-900) 72%, transparent); }
.menu-gathering__module p { max-width: 48ch; }
.menu-gathering__module--signal { border-color: color-mix(in srgb, var(--color-ultramarine-400) 58%, var(--color-line-700)); }
.menu-gathering__module .meta { display: block; margin-bottom: var(--space-3); color: var(--color-ultramarine-400); }
.menu-gathering__action { grid-column: 1 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.menu-gathering__action p { max-width: 35ch; margin: 0; color: var(--color-mist-300); }

.menu-related__intro { width: 50%; min-width: 0; }
.menu-related__intro p:last-child { max-width: 54ch; }
.menu-related__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.menu-related__panel { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 18rem; padding: var(--space-5); border: var(--border-subtle); border-left: 2px solid color-mix(in srgb, var(--color-ultramarine-400) 58%, transparent); border-radius: var(--radius-sm); background: var(--color-charcoal-900); transition: border-color var(--transition-fast); }
.menu-related__panel:nth-child(1), .menu-related__panel:nth-child(4) { border-left-color: color-mix(in srgb, var(--color-turquoise-400) 65%, transparent); }
.menu-related__panel .eyebrow { color: var(--color-mist-300); }
.menu-related__panel h3 { font-size: var(--text-xl); }
.menu-related__panel p:not(.eyebrow) { max-width: 40ch; }
.menu-related__action { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; padding-top: var(--space-3); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; }

.menu-closing { background: radial-gradient(circle at 48% 45%, color-mix(in srgb, var(--color-violet-haze) 52%, transparent), transparent 29rem); }
.menu-closing__copy { grid-column: 3 / span 7; min-width: 0; }
.menu-closing__copy h2 { max-width: 30ch; }
.menu-closing__copy > p:not(.eyebrow):not(.menu-closing__note) { max-width: 52ch; }
.menu-closing__copy > .button { margin-bottom: var(--space-5); }
.menu-closing__note { max-width: 55ch; padding-top: var(--space-4); border-top: var(--border-subtle); color: var(--color-mist-300); }

@media (hover: hover) and (pointer: fine) {
  .menu-page:hover .menu-cursor-light { opacity: 1; }
  .menu-hero__figure:hover, .menu-room__figure:hover, .menu-detail__caption:hover { border-color: color-mix(in srgb, var(--color-turquoise-400) 56%, var(--color-line-700)); }
  .menu-principle:hover, .menu-language__module:hover, .menu-step:hover, .menu-gathering__module:hover, .menu-related__panel:hover, .menu-index-row:hover { border-color: color-mix(in srgb, var(--color-turquoise-400) 60%, var(--color-line-700)); }
}

@media (max-width: 1024px) {
  .menu-hero__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .menu-hero__copy { grid-column: 1 / span 4; }
  .menu-hero__media-group { grid-column: 5 / span 3; }
  .menu-hero__copy h1 { max-width: 23ch; }
  .menu-room__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-room__lead { grid-column: 1; }
  .menu-room__figure { grid-column: 2; grid-row: 1; }
  .menu-room__perspectives { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
  .menu-room__perspectives > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  .menu-index-row { grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-3); }
  .menu-index-row__ordinal { grid-column: 1; grid-row: 1 / span 2; }
  .menu-index-row__body { grid-column: 2; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .menu-index-row__action { grid-column: 2; justify-self: start; }
  .menu-planning__side-note { display: none; }
  .menu-step { grid-template-columns: minmax(10rem, 2fr) minmax(0, 1fr); }
  .menu-step__route { grid-column: 2; }
  .menu-detail__caption { width: 58%; margin-top: var(--space-5); margin-left: 0; }
}

@media (max-width: 920px) {
  .menu-language__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-language__heading { grid-column: 1 / -1; }
  .menu-language__module:nth-of-type(1), .menu-language__module:nth-of-type(3) { grid-column: 1; }
  .menu-language__module:nth-of-type(2), .menu-language__module:nth-of-type(4) { grid-column: 2; }
  .menu-gathering__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-gathering__intro { grid-column: 1 / -1; }
  .menu-gathering__modules { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-gathering__action { grid-column: 1; }
}

@media (max-width: 900px) {
  .menu-reading__heading, .menu-related__intro { width: 100%; }
  .menu-reading__principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-principle:nth-child(3) { grid-column: 1 / -1; }
  .menu-principle:nth-child(3) { border-left: 0; }
  .menu-reading__caveat { width: 100%; }
  .menu-closing__copy { grid-column: 2 / span 8; }
}

@media (max-width: 860px) {
  .menu-related__grid { grid-template-columns: minmax(0, 1fr); }
  .menu-related__panel { min-height: 0; }
}

@media (max-width: 760px) {
  .menu-hero__grid, .menu-room__grid, .menu-language__grid, .menu-planning__panel, .menu-gathering__panel, .menu-closing__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .menu-hero__copy, .menu-hero__media-group, .menu-room__lead, .menu-room__figure, .menu-room__perspectives, .menu-language__heading, .menu-language__module:nth-of-type(n), .menu-planning__intro, .menu-planning__steps, .menu-planning__note, .menu-gathering__intro, .menu-gathering__modules, .menu-gathering__action, .menu-closing__copy { grid-column: 1; }
  .menu-hero__copy h1 { max-width: 22ch; }
  .menu-hero__actions { flex-direction: column; }
  .menu-hero__actions .button { width: 100%; }
  .menu-hero__media-group { order: 2; }
  .menu-hero__status { width: 100%; }
  .menu-node { display: none; }
  .menu-reading__principles { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-6); }
  .menu-principle, .menu-principle + .menu-principle, .menu-principle:nth-child(3) { border-left: 0; }
  .menu-index__panel { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); background: var(--color-charcoal-900); }
  .menu-index__intro, .menu-index__rows { grid-column: 1; }
  .menu-index__signal { display: none; }
  .menu-room__figure { grid-row: auto; order: 2; }
  .menu-room__perspectives { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  .menu-room__perspectives > :last-child { grid-column: 1; }
  .menu-language__module { min-width: 0; }
  .menu-planning__panel, .menu-gathering__panel { padding: var(--space-5); }
  .menu-step { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .menu-step__route { grid-column: 1; }
  .menu-planning__note { margin-top: 0; }
  .menu-detail__figure { aspect-ratio: 4 / 3; }
  .menu-detail__label { position: static; width: fit-content; max-width: 100%; margin: var(--space-4) 0 0; background: var(--color-charcoal-900); }
  .menu-detail__caption { width: 100%; margin-top: var(--space-4); padding: 0; border: 0; border-radius: 0; background: transparent; }
  .menu-detail__caption h2 { font-size: var(--text-2xl); }
  .menu-gathering__modules { display: flex; flex-direction: column; gap: var(--space-4); }
  .menu-gathering__action { align-items: stretch; }
  .menu-gathering__action .button { width: 100%; min-height: 48px; }
  .menu-related__grid { margin-top: var(--space-6); }
  .menu-related__panel { padding: var(--space-5); }
  .menu-related__action { width: 100%; }
  .menu-closing__copy .button { width: 100%; min-height: 48px; }
}

@media (max-width: 600px) {
  .menu-hero__copy h1 { max-width: none; }
  .menu-principle { padding-inline: 0; }
  .menu-index-row { padding: var(--space-4) 0; }
  .menu-index-row__body h3 { font-size: var(--text-lg); }
  .menu-room__lead h2, .menu-language__heading h2, .menu-planning__intro h2, .menu-gathering__intro h2, .menu-related__intro h2, .menu-closing__copy h2 { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-cursor-light { display: none; }
}