/* Raw Senses — the menus (sheet stage 2).
   From the Figma "Buttons and Navigation" frames 171:4311 (stack), 171:4527 (main + exhibition in
   one line), 171:4497 (mini + exhibition), 171:4340 / 171:4330 (each alone). Two bars, one
   grammar: a WORDMARK block (Modelo, 248px wide as drawn) followed by mono pills, 1px apart,
   every pill 3px padding on a 13px line. The main menu is black with cyan text; the exhibition
   bar is cyan with black text. */

.rs-menu{display:flex;gap:var(--rs-gap);align-items:center;width:100%;min-width:0;position:relative}
.rs-menu > a,.rs-menu > span{
  display:inline-flex;align-items:center;justify-content:center;
  height:var(--rs-line);box-sizing:border-box;padding:0 var(--rs-pad);
  font-family:var(--rs-mono);font-size:var(--rs-ui-size);letter-spacing:var(--rs-ui-track);text-transform:uppercase;
  white-space:nowrap;text-decoration:none;text-box:trim-both cap alphabetic;
  transition:background-color var(--rs-t-fast) var(--rs-ease),color var(--rs-t-fast) var(--rs-ease);
}
.rs-menu .rs-wordmark{font-family:var(--rs-wordmark);flex:0 0 var(--rs-wordmark-w);width:var(--rs-wordmark-w);min-width:0}
.rs-menu .rs-wordmark--mini{flex:0 0 auto;width:auto}          /* the "RS" block of the mini menu */
.rs-menu .rs-grow{flex:1 1 0;min-width:0}                      /* a wordmark that fills the line (the question screens) */

/* the two colourings */
.rs-menu--main > a,.rs-menu--main > span{background:var(--rs-ink);color:var(--rs-cyan)}
.rs-menu--exhibition > a,.rs-menu--exhibition > span{background:var(--rs-cyan);color:var(--rs-ink)}

/* hover and the current page — NOT drawn (owner to decide): the pill inverts */
@media (hover:hover){
  .rs-menu--main a:hover{background:var(--rs-cyan);color:var(--rs-ink)}
  .rs-menu--exhibition a:hover{background:var(--rs-ink);color:var(--rs-cyan)}
}
.rs-menu--main a[aria-current="page"]{background:var(--rs-cyan);color:var(--rs-ink)}
.rs-menu--exhibition a[aria-current="page"]{background:var(--rs-ink);color:var(--rs-cyan)}
.rs-menu a:focus-visible{outline:1px solid var(--rs-white);outline-offset:1px}

/* the stack: exhibition bar over main menu, 1px apart (171:4311) */
.rs-menus{display:flex;flex-direction:column;gap:var(--rs-gap);width:100%}
/* one line: main menu then exhibition bar (171:4527) */
.rs-menus--line{flex-direction:row;align-items:center}
.rs-menus--line .rs-menu{width:auto}

/* phones — NOT drawn (owner: iterate after the primitives). Proposal: the wordmark block gives
   up its fixed 248px and fills; the three meta pills of the exhibition bar leave; the main
   menu keeps its three words. */
@container rs-view (max-width:760px){
  .rs-menu .rs-wordmark{flex:1 1 0;width:auto}
  .rs-menu .rs-wordmark--mini{flex:0 0 auto}      /* the "RS" block keeps its own width */
  .rs-menu--exhibition .rs-meta{display:none}
  .rs-menus--line{flex-direction:column}
  .rs-menus--line .rs-menu{width:100%}
}
/* owner, 03.09: the menu keeps the DRAWN 10px on touch too — the join bar's size; the bar
   height still grows to --rs-line (26px), so the tap target stays. */
@media (pointer:coarse){.rs-menu > a,.rs-menu > span{font-size:var(--rs-ui-size)}}

/* ---- every menu pill is a POINTER: a small tooltip on a leader line says where it points ----
   (owner, 03.09, sketch: "a tool tip, small, with a little line"). The pill carries the target in
   data-tip; the line drops from the pill's centre, the label sits at its foot in the tag face
   (black, cyan mono). On hover or keyboard focus on a real page; the sheet's annotated menu shows
   them all at once, at staggered depths, so the stack of pointers reads as one picture. */
.rs-menu > a,.rs-menu > span{position:relative}
.rs-menu [data-tip]::before,.rs-menu [data-tip]::after{pointer-events:none;opacity:0;transition:opacity var(--rs-t-fast) var(--rs-ease)}
.rs-menu [data-tip]::before{content:"";position:absolute;left:50%;top:100%;width:1px;height:var(--tip-drop,8px);background:var(--rs-cyan)}
.rs-menu [data-tip]::after{content:attr(data-tip);position:absolute;left:50%;top:calc(100% + var(--tip-drop,8px));transform:translateX(-50%);
  display:inline-flex;align-items:center;height:var(--rs-line);padding:0 var(--rs-pad);box-sizing:border-box;
  background:var(--rs-ink);color:var(--rs-cyan);font-family:var(--rs-mono);font-size:var(--rs-ui-size);letter-spacing:var(--rs-ui-track);
  text-transform:uppercase;white-space:nowrap;text-box:trim-both cap alphabetic;z-index:2}
.rs-menu [data-tip]:hover::before,.rs-menu [data-tip]:hover::after,
.rs-menu [data-tip]:focus-visible::before,.rs-menu [data-tip]:focus-visible::after{opacity:1}
/* the sheet's annotated menu: every pointer shown, each one deeper than the last */
.rs-menu--annotated [data-tip]::before,.rs-menu--annotated [data-tip]::after{opacity:1}
.rs-menu--annotated [data-tip]:nth-child(1){--tip-drop:8px}
.rs-menu--annotated [data-tip]:nth-child(2){--tip-drop:24px}
.rs-menu--annotated [data-tip]:nth-child(3){--tip-drop:40px}
.rs-menu--annotated [data-tip]:nth-child(4){--tip-drop:56px}
.rs-menu--annotated [data-tip]:nth-child(5){--tip-drop:72px}
.rs-menu--annotated{margin-bottom:96px}

/* ---- the RAW SENSES title has three sizes: S, M, L (owner, 03.09) ----
   S = the "RS" block alone (the mini); M = the 248px block as drawn; L = half the line — what the
   questionnaire shows, the other half being the active exhibition. It animates between them on
   click, following where the page is focused (rs-menu.js: RS_MENU.size(el, 's'|'m'|'l')).
   Proposal for where each lives: home L, an exhibition page M, a phone S. */
.rs-wordmark{transition:flex-basis calc(var(--rs-t-glide)/1.5) var(--rs-ease-glide),width calc(var(--rs-t-glide)/1.5) var(--rs-ease-glide);justify-content:center}   /* no overflow clipping: the tooltip hangs below the pill */
.rs-wordmark .rs-wm-short,.rs-wordmark .rs-wm-long{white-space:nowrap}
.rs-wordmark[data-size="s"]{flex:0 0 auto;width:auto}
.rs-wordmark[data-size="s"] .rs-wm-long{display:none}
.rs-wordmark[data-size="m"]{flex:0 0 var(--rs-wordmark-w);width:var(--rs-wordmark-w)}
.rs-wordmark[data-size="m"] .rs-wm-short{display:none}
.rs-wordmark[data-size="l"]{flex:1 1 50%;width:auto}
.rs-wordmark[data-size="l"] .rs-wm-short{display:none}
/* in the one-line form, L splits the line: the main menu and the exhibition bar take half each
   (XL and XXL excluded — they set their own widths and would otherwise lose to :has()'s weight) */
.rs-menus--line:not(.rs-menus--xl):not(.rs-menus--xxl):has(.rs-wordmark[data-size="l"]) > .rs-menu{flex:1 1 50%;min-width:0}
.rs-menus--line:not(.rs-menus--xl):not(.rs-menus--xxl):has(.rs-wordmark[data-size="l"]) .rs-menu--exhibition .rs-wordmark{flex:1 1 0;width:auto}
@media (prefers-reduced-motion:reduce){.rs-wordmark{transition:none}}

/* ---- the name roller (owner, 03.09; mechanism after generalidea.agency, look our own) ----
   The exhibition wordmark becomes a WINDOW exactly one line tall; behind it one list holds
   every exhibition name, and the list rolls so the name of the section currently under the
   menu shows through. rs-menu-roll.js writes --roll-i; the css only moves. */
/* the window must beat the generic pill rule (.rs-menu > span sets inline-flex + centring,
   which would centre the WHOLE list in the 26px window and land between names) */
.rs-menu > .rs-wm-roll,.rs-wm-roll{display:block;overflow:hidden;height:var(--rs-line);padding:0;position:relative}
.rs-wm-roll-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;
  transform:translateY(calc(var(--roll-i,0) * -1 * var(--rs-line)));
  transition:transform calc(var(--rs-t-glide)/1.5) var(--rs-ease-glide)}
.rs-wm-roll-list li{display:flex;align-items:center;justify-content:center;height:var(--rs-line);
  box-sizing:border-box;padding:0 var(--rs-pad);white-space:nowrap;text-box:trim-both cap alphabetic}
@media (prefers-reduced-motion:reduce){.rs-wm-roll-list{transition:none}}

/* ---- the exhibitions stack (owner, 03.09) ----
   Rolling over EXHIBITIONS in the main menu stacks every exhibition on the right half, in the
   multioption grammar: full-width cyan rows 1px apart, the hovered row full while the others dim
   to 40%, the exhibition currently in the canvas in the chosen colour. Clicking a row travels to
   that section's anchor. The stack hangs from the exhibition half's own box. */
/* 🔴 THE STACK STARTS ON THE BAR'S OWN LINE, NOT BELOW IT (owner, 06.09: "one slot is missing
   after we removed the repetition"). It used to hang under the bar while the bar kept showing
   the current name — the same name twice, which he reported as the double display. Hiding the
   roll fixed that and left a HOLE where the name had been: four rows below an empty slot. The
   stack now covers the roll's own slot and grows downward, so the column reads as one list of
   four with its first row exactly where the name was. Nothing repeats and nothing is missing. */
.rs-menu-stack{position:absolute;top:0;left:0;right:0;z-index:3;
  display:flex;flex-direction:column;gap:var(--rs-gap)}
.rs-menu-stack[hidden]{display:none}
/* 🔴 THE ROLL GOES QUIET WHILE THE STACK IS OPEN (owner, 06.09: "fix double display of past
   expo in the stack when user click on Exhibitions"). The roll window is one row tall and
   shows the edition you are standing in; the stack opens ONE PIXEL below it and lists every
   edition, that one included and marked aria-current. So the name you are on was printed
   twice, stacked, a pixel apart — which reads as a duplicated row rather than as a heading
   over a list. The stack is the complete list and marks the current row itself, so the
   window above it has nothing left to say. visibility, not display: the stack is positioned
   from this element's box, and removing the roll from flow would drag the stack up over the
   menu line. */
.rs-menu--exhibition:has(> .rs-menu-stack:not([hidden])) .rs-wm-roll{visibility:hidden}
.rs-mrow{display:flex;align-items:center;justify-content:center;min-height:var(--rs-line);
  box-sizing:border-box;padding:1px var(--rs-pad);background:var(--rs-cyan);color:var(--rs-ink);
  cursor:pointer;font-family:var(--rs-wordmark);font-size:var(--rs-ui-size);letter-spacing:var(--rs-ui-track);
  text-transform:uppercase;white-space:nowrap;text-box:trim-both cap alphabetic;
  transition:background-color var(--rs-t-fast) var(--rs-ease),color var(--rs-t-fast) var(--rs-ease)}
@media (hover:hover){.rs-menu-stack:has(.rs-mrow:hover) .rs-mrow:not(:hover):not([aria-current="true"]){background:var(--rs-cyan-40)}}
.rs-mrow[aria-current="true"]{background:var(--rs-chosen);color:var(--rs-chosen-ink)}
.rs-mrow:focus-visible{outline:1px solid var(--rs-white);outline-offset:1px}
@media (pointer:coarse){.rs-mrow{font-size:var(--rs-ui-size)}}

/* ---- the line sizes XL and XXL (owner, 03.09) ----
   XL:  RAW SENSES and the exhibition title share the line 50/50 — no links between them.
   XXL: RAW SENSES plus all navigation links take the FULL width — no exhibition half at all
        (for inside an exhibition page, where the title already stands in the page body).
   Both are states of the one-line form; nothing is rebuilt, so the roll and the stack survive
   the change of size. */
/* doubled class = these outrank a page's own .menu-fix .rs-menu layout rule */
.rs-menus.rs-menus--xl > .rs-menu{flex:1 1 50%;min-width:0}
.rs-menus.rs-menus--xl .rs-menu--main > a:not(.rs-wordmark),
.rs-menus.rs-menus--xl .rs-menu--exhibition .rs-meta{display:none}
.rs-menus.rs-menus--xl .rs-menu--main .rs-wordmark{flex:1 1 0;width:auto}
.rs-menus.rs-menus--xl .rs-menu--exhibition .rs-wm-roll,
.rs-menus.rs-menus--xl .rs-menu--exhibition .rs-wordmark{flex:1 1 0;width:auto}

.rs-menus.rs-menus--xxl .rs-menu--main{flex:1 1 100%}
.rs-menus.rs-menus--xxl .rs-menu--main .rs-wordmark{flex:1 1 0;width:auto}
/* the exhibition half collapses but stays in the flow, so the EXHIBITIONS stack it hosts can
   still drop from the line's right end */
.rs-menus.rs-menus--xxl .rs-menu--exhibition{flex:0 0 auto;width:0;min-width:0;padding:0;overflow:visible;position:relative}
.rs-menus.rs-menus--xxl .rs-menu--exhibition > :not(.rs-menu-stack){display:none}


/* ── THE WORDMARK'S THREE FACES (moved here 06.09 from menu-scroll's inline style, so that
   gallery and report can wear the same menu — owner: "use menu type you use in past
   exhibition pages across all other pages"). One definition, three pages; two copies of a
   crossfade is how the index and the standalone pages would drift apart.
   Scoped to .menu-fix, which is the docked-header wrapper those three pages share and the
   component sheet's demo navs deliberately do not use. ─────────────────────────────────── */
.menu-fix .rs-menu--main .rs-wordmark{display:grid;overflow:hidden;min-width:0;padding:0}
.menu-fix .rs-menu--main .rs-wordmark > span{grid-area:1/1;place-self:center;white-space:nowrap;
  transition:opacity calc(var(--rs-t-glide)/2.5) var(--rs-ease-glide)}
.menu-fix .rs-menu--main .rs-wordmark .rs-wm-short,
.menu-fix .rs-menu--main .rs-wordmark .rs-wm-long,
.menu-fix .rs-menu--main .rs-wordmark .rs-wm-close{display:block}
/* 🔴 A THIRD FACE: CLOSE, ON HOVER, ONLY INSIDE A PAGE (owner, 06.09: "inside a page RS on
   roll over switch to CLOSE to let people close the page"). It rides the same grid and the
   same opacity crossfade as the other two, so it costs no new mechanism. body.paged gates
   it deliberately: stage C also happens on the INDEX, scrolling past the editions, and there
   the wordmark must stay the wordmark — there is nothing to close. */
.menu-fix .rs-menu--main .rs-wordmark .rs-wm-close{opacity:0;font-family:var(--rs-mono);
  font-size:var(--rs-ui-size);letter-spacing:var(--rs-ui-track);text-transform:uppercase}
/* 🔴 THE LINKS ARE EQUAL COLUMNS AT STAGE C, and this rule was the half of the page face left
   behind in menu-scroll's inline style on 06.09. The wordmark's XXL rule below (four classes)
   already outranks st-c everywhere, so on a standalone page the wordmark took flex:1 1 0 while
   the links kept the browser default of flex:0 1 auto — the wordmark ate 1438px of 1622 and
   INFO/EXHIBITIONS/GALLERY huddled in the top right corner at 36/87/58px. An exhibition page,
   which had the rule, drew four equal columns of ~406. Same classes, same items, same faces,
   and a completely different bar — which is why "they are identical" was measured and wrong:
   the check read the container and never the children. */
.menu-fix .rs-menu--main > a:not(.rs-wordmark){min-width:0;overflow:hidden;padding:0}
.st-c .rs-menu--main > a:not(.rs-wordmark){flex:1 1 0;opacity:1;padding:0 var(--rs-pad);margin-left:0}

/* which face a stage wears: A and B say the name in full, C says RS — and a standalone page
   is a C, which is what "the same menu" means here */
.st-a .rs-wm-short,.st-b .rs-wm-short{opacity:0}
.st-a .rs-wm-long,.st-b .rs-wm-long{opacity:1}
.st-c .rs-wm-short{opacity:1}
.st-c .rs-wm-long{opacity:0}
/* 🔴 body.paged is an OPEN PAGE ON THE INDEX; body.rs-page is a standalone one (gallery,
   report), where the wordmark already returns home — so CLOSE says the same true thing on
   both. Neither applies to the index itself at stage C, where the wordmark must stay the
   wordmark because there is nothing to close. */
body.paged .rs-wordmark:hover .rs-wm-close, body.paged .rs-wordmark:focus-visible .rs-wm-close,
body.rs-page .rs-wordmark:hover .rs-wm-close, body.rs-page .rs-wordmark:focus-visible .rs-wm-close{opacity:1}
body.paged .rs-wordmark:hover .rs-wm-short, body.paged .rs-wordmark:hover .rs-wm-long,
body.paged .rs-wordmark:focus-visible .rs-wm-short, body.paged .rs-wordmark:focus-visible .rs-wm-long,
body.rs-page .rs-wordmark:hover .rs-wm-short, body.rs-page .rs-wordmark:hover .rs-wm-long,
body.rs-page .rs-wordmark:focus-visible .rs-wm-short, body.rs-page .rs-wordmark:focus-visible .rs-wm-long{opacity:0}

/* ── THE FOLD: the ONE transition the menu bar is allowed (owner, 06.09: "menu transformation
   are buggy when moving from one page to the other, it sometimes moves down when going back to
   the index. IT SHOULD ONLY use transform morph not slide nor move up and down"; and "when
   clicking on gallery there is no morph — this should be consistent across all links and page
   transitions").

   🔴 THE SLIDE WAS REAL AND IT WAS IN THE BASE RULE. .menu-fix carried
   `transition:top …, transform …` while `body.paged` moves it from top:50% to top:3px — so
   every state change animated the bar's POSITION across half the screen. The morph existed
   precisely to stop that (its own comment says "the bar never travels visibly"), and it did the
   fold on top of a slide that was still running underneath it. Whichever finished last decided
   what you saw, which is why it was intermittent and why it read as "moves down".

   🔴 THE FOLD MOVED TO .rs-menus, THE INNER ELEMENT, so it cannot collide with position again.
   .menu-fix owns WHERE the bar is — top and translateY, now with no transition at all, so it
   relocates in one frame and never travels. .rs-menus owns WHAT IT LOOKS LIKE, and scaleX is
   the only thing that animates. Position and appearance stopped sharing a property.

   It is also why the same figure now works between DOCUMENTS: gallery.html and report.html have
   no menuMorph and no shared position, but they have this element and this class, so
   rs-menu-morph.js folds the bar before leaving and unfolds it on arrival exactly as the
   in-document morph does. One look for every transition on the site. ─────────────────────── */
.menu-fix .rs-menus{transform-origin:50% 50%;
  transition:transform calc(var(--rs-t-glide)/1.5) var(--rs-ease-glide),
             opacity calc(var(--rs-t-glide)/1.5) var(--rs-ease-glide)}
.menu-fix.rs-fold .rs-menus{transform:scaleX(0);opacity:0}
/* the silent state flip: no transition while the bar is relocated behind the fold */
.menu-fix.rs-nojump .rs-menus{transition:none}
@media (prefers-reduced-motion:reduce){
  .menu-fix .rs-menus{transition:none}
  .menu-fix.rs-fold .rs-menus{transform:none;opacity:1}
}