/* Room navigator (2026-10-21). See room-nav-20261021.js. UI only. */

/* ---- desktop chip: [ current section | NEXT → | EXPAND + ] ---- */
html:root body.atelier-preview.work-page.work-page.work-page .v7-room-nav{flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;row-gap:0!important}
html:root body.atelier-preview.work-page.work-page.work-page .v7-room-nav .room-nav-tools{display:flex;align-items:stretch;flex:none;border-left:1px solid rgba(59,50,39,.22);margin-left:2px}
html:root body.atelier-preview.work-page.work-page.work-page .v7-room-nav .room-nav-tools button{display:inline-flex!important;align-items:center;gap:7px;min-height:40px!important;padding:0 12px!important;border:0!important;background:transparent!important;color:#29251f!important;font:600 9px/1 var(--at-sans,"Helvetica Neue",Arial,sans-serif)!important;letter-spacing:.16em!important;cursor:pointer;white-space:nowrap;opacity:1!important;transition:color .2s,background-color .2s}
html:root body.atelier-preview.work-page.work-page.work-page .v7-room-nav .room-nav-tools button+button{border-left:1px solid rgba(59,50,39,.14)!important}
html:root body.atelier-preview.work-page.work-page.work-page .v7-room-nav .room-nav-tools i{font-style:normal;font-size:13px;letter-spacing:0;line-height:1}
html:root body.atelier-preview.work-page.work-page.work-page .v7-room-nav .room-nav-tools button:hover:not(:disabled){background:#29251f!important;color:#f4eee3!important}
html:root body.atelier-preview.work-page.work-page.work-page .v7-room-nav .room-nav-tools button:disabled{opacity:.3!important;cursor:default}
html:root body.atelier-preview.work-page.work-page.work-page .v7-room-nav .room-nav-tools button:focus-visible{outline:1px solid currentColor!important;outline-offset:-4px!important}
html:root body.atelier-preview.work-page.work-page.work-page .v7-room-nav .room-nav-toggle{max-width:min(320px,calc(100vw - 340px))!important}

/* expanded: the whole list wraps onto rows, nothing is cut off */
html:root body.atelier-preview.work-page.work-page.work-page .v7-room-nav.room-nav-expanded{width:min(1120px,calc(100vw - 96px))!important;max-width:none!important;padding:4px 10px 10px!important}
html:root body.atelier-preview.work-page.work-page.work-page .v7-room-nav.room-nav-expanded .v7-room-nav__scroller{flex:1 0 100%!important;order:3;display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:2px 22px!important;overflow:visible!important;max-width:none!important;width:100%!important;margin-top:4px!important;padding-top:8px!important;border-top:1px solid rgba(59,50,39,.14)!important;mask-image:none!important;-webkit-mask-image:none!important}
html:root body.atelier-preview.work-page.work-page.work-page .v7-room-nav.room-nav-expanded .v7-room-nav__scroller button{flex:none!important;white-space:nowrap!important}

/* ---- phones / tablets: full-width bottom bar ---- */
html:root body.at-interior.work-page.work-page.work-page .at-gallery-controls.room-bar{left:0!important;right:0!important;bottom:0!important;height:calc(52px + env(safe-area-inset-bottom))!important;padding:0 clamp(16px,4vw,28px) env(safe-area-inset-bottom)!important;gap:14px!important;background:#f3eee5!important;color:#1b1915!important;border:0!important;border-top:1px solid rgba(27,25,21,.14)!important;box-shadow:none!important;border-radius:0!important}
html:root body.at-interior.work-page.work-page.work-page .room-bar .room-bar__where{flex:none;max-width:32%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 10px/1 var(--at-sans,"Helvetica Neue",Arial,sans-serif);letter-spacing:.16em;text-transform:uppercase}
html:root body.at-interior.work-page.work-page.work-page .room-bar .room-bar__prog{flex:1;height:1px;position:relative;overflow:hidden;background:rgba(27,25,21,.14)}
html:root body.at-interior.work-page.work-page.work-page .room-bar .room-bar__prog i{position:absolute;inset:0;background:#1b1915;transform-origin:left;transform:scaleX(0);transition:transform .25s}
html:root body.at-interior.work-page.work-page.work-page .room-bar .room-bar__count{flex:none;min-width:58px;text-align:center;font:600 11px/1 var(--at-sans,"Helvetica Neue",Arial,sans-serif);letter-spacing:.12em;font-variant-numeric:tabular-nums}
html:root body.at-interior.work-page.work-page.work-page .room-bar button{width:36px!important;height:36px!important;flex:none!important;display:grid!important;place-items:center!important;padding:0!important;border:1px solid #1b1915!important;border-radius:50%!important;background:transparent!important;color:#1b1915!important;font-size:14px!important;line-height:1!important;transition:background-color .2s,color .2s}
html:root body.at-interior.work-page.work-page.work-page .room-bar button:active:not(:disabled){background:#1b1915!important;color:#f3eee5!important}
@media (hover:hover){html:root body.at-interior.work-page.work-page.work-page .room-bar button:hover:not(:disabled){background:#1b1915!important;color:#f3eee5!important}}
html:root body.at-interior.work-page.work-page.work-page .room-bar button:disabled{opacity:.25!important}
html:root body.at-interior.work-page.work-page.work-page .room-bar .room-bar__sr{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;flex:none!important;padding:0!important;margin:-1px!important}
@media (max-width:720px){html:root body.at-interior.work-page.work-page.work-page .room-bar .room-bar__where{display:none}}

/* ---- film panels, portrait phones/tablets: "03" sits on the SOUND row, the title gets its own full-width row ---- */
@media (orientation:portrait) and (max-width:1023px){
 html:root body.atelier-preview.work-page.work-page.work-page .film-head-stacked:not(#fh-a):not(#fh-b) .room-chapter-head{
  top:var(--film-snd-top)!important;bottom:auto!important;left:var(--film-gutter)!important;right:var(--film-gutter)!important;
  width:auto!important;max-width:none!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;
  justify-content:flex-start!important;gap:12px!important;margin:0!important;padding:0!important;transform:none!important;pointer-events:none;
  background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;border:0!important}
 html:root body.atelier-preview.work-page.work-page.work-page .film-head-stacked:not(#fh-a):not(#fh-b) .room-chapter-head::before,
 html:root body.atelier-preview.work-page.work-page.work-page .film-head-stacked:not(#fh-a):not(#fh-b) .room-chapter-head::after{content:none!important;display:none!important}
 html:root body.atelier-preview.work-page.work-page.work-page .film-head-stacked:not(#fh-a):not(#fh-b) .room-chapter-head .room-chapter-no{
  display:flex!important;align-items:center!important;height:var(--film-snd-h)!important;margin:0!important;padding:0!important;
  line-height:1!important;font-size:11px!important;color:rgba(244,238,227,.82)!important;opacity:1!important;text-shadow:0 1px 8px rgba(0,0,0,.45)}
 html:root body.atelier-preview.work-page.work-page.work-page .film-head-stacked:not(#fh-a):not(#fh-b) .room-chapter-head :is(h2,h3){
  margin:0!important;max-width:100%!important;width:auto!important;white-space:normal!important;overflow-wrap:anywhere;text-shadow:0 1px 14px rgba(0,0,0,.5)}
}

/* SOUND always above a film's caption box (on landscape phones the caption's box covered it and swallowed taps) */
html:root body.atelier-preview.work-page.work-page.work-page .media-panel:not(#fh-a):not(#fh-b):not(#fh-c)>.media-meta{pointer-events:none!important}
html:root body.atelier-preview.work-page.work-page.work-page .media-panel:not(#fh-a):not(#fh-b):not(#fh-c)>.media-meta :is(a,button){pointer-events:auto!important}

/* ---- films below 1080p: framed inside the scene instead of enlarged and cropped (film-frame-20261021.js) ---- */
html:root body.work-page.work-page.work-page .media-frame.film-frame-host{position:relative!important;min-height:100%}
html:root body.work-page.work-page.work-page .media-frame>video.film-framed.film-framed:not(#ff-a):not(#ff-b):not(#ff-c){
 position:absolute!important;inset:auto!important;top:var(--ff-top,50%)!important;left:var(--ff-left,50%)!important;right:auto!important;bottom:auto!important;
 width:var(--ff-w)!important;height:auto!important;max-width:100%!important;max-height:none!important;aspect-ratio:var(--ff-ar)!important;
 translate:var(--ff-tx,-50%) 0!important;transform:none!important;object-fit:contain!important;object-position:center!important;
 box-shadow:0 28px 90px rgba(0,0,0,.5)!important;background:#000}
html:root body.work-page.work-page.work-page .film-side:not(#ff-a):not(#ff-b):not(#ff-c) .media-meta{max-width:var(--ff-caption-max)!important;right:auto!important}

/* Room 02 hero: no large decorative "02" (requested) */
html:root body.room-02.work-page.work-page .room-hero .at-room-ghost{display:none!important}
/* Room 02 hero: the upper "ROOM 02" stamp repeats the label above the title (requested) */
html:root body.room-02.work-page.work-page .room-hero .at-room-stamp{display:none!important}

/* Last section (move to the next room): the room's own tone - Room 01 brown, Room 02 green, Room 03 olive */
html:root body.atelier-preview.work-page.work-page.work-page .ex5-work-rail>.room-end-nav:not(#en-a):not(#en-b){
 background:var(--room-ink,#211714)!important;background-image:none!important;color:rgba(240,236,228,.86)!important}
html:root body.atelier-preview.work-page.work-page.work-page .room-end-nav:not(#en-a):not(#en-b) :is(.room-end-nav__label,.room-end-nav__works){color:rgba(240,236,228,.62)!important}
html:root body.atelier-preview.work-page.work-page.work-page .room-end-nav:not(#en-a):not(#en-b) .room-end-nav__title{color:var(--at-accent,#d2a580)!important}
html:root body.atelier-preview.work-page.work-page.work-page .room-end-nav:not(#en-a):not(#en-b) a:is(:hover,:focus-visible) .room-end-nav__title{color:#f0ece4!important}
html:root body.atelier-preview.work-page.work-page.work-page .room-end-nav:not(#en-a):not(#en-b) :is(a,.room-end-nav__item,.room-end-nav__works,.site-footer){border-color:rgba(240,236,228,.2)!important}
html:root body.atelier-preview.work-page.work-page.work-page .room-end-nav:not(#en-a):not(#en-b) .site-footer{background:transparent!important}
html:root body.atelier-preview.work-page.work-page.work-page .room-end-nav:not(#en-a):not(#en-b) .site-footer :is(span,a,svg){color:rgba(240,236,228,.62)!important}

/* Film backgrounds in each room take the room's own tone (Room 01 brown, Room 02 dark green, Room 03 dark olive) */
html:root body.work-page.work-page.work-page .ex5-work-rail>*:not(.room-hero) .media-frame:not(#fb-a):not(#fb-b):not(#fb-c){background-color:var(--room-ink)!important}
html:root body.work-page.work-page.work-page .media-frame>video.film-framed.film-framed:not(#ff-a):not(#ff-b):not(#ff-c):not(#fb-a){background:transparent!important}

/* ---- Desktop rooms (2026-10-23): one calm footer that carries the navigator ----
   left: name | centre: section navigator (section · NEXT · EXPAND) | right of centre: count + arrows | right: platforms */
@media (min-width:1024px) and (orientation:landscape){
 html:root body.atelier-preview.work-page.work-page.work-page:not(.film-detail-page)>.site-footer:not(#ft-a):not(#ft-b){
  background:rgba(243,239,231,.96)!important;border-top:1px solid rgba(41,37,31,.12)!important;
  -webkit-backdrop-filter:blur(14px)!important;backdrop-filter:blur(14px)!important}
 html:root body.atelier-preview.work-page.work-page.work-page:not(.film-detail-page)>.site-footer:not(#ft-a):not(#ft-b) .footer-name{color:rgba(41,37,31,.74)!important}
 html:root body.atelier-preview.work-page.work-page.work-page:not(.film-detail-page)>.site-footer:not(#ft-a):not(#ft-b) .footer-socials :is(a,svg){color:rgba(41,37,31,.78)!important}
 html:root body.atelier-preview.work-page.work-page.work-page:not(.film-detail-page)>.site-footer:not(#ft-a):not(#ft-b) .footer-socials a:is(:hover,:focus-visible){color:#29251f!important}

 /* navigator chip: centred inside the footer */
 html:root body.atelier-preview.work-page.work-page.work-page:not(.film-detail-page) .v7-room-nav:not(#ft-a):not(#ft-b){
  top:auto!important;bottom:6px!important;min-height:36px!important;padding:0 6px!important;z-index:520!important;
  background:#f6f2ea!important;border:1px solid rgba(41,37,31,.18)!important;box-shadow:none!important}
 html:root body.atelier-preview.work-page.work-page.work-page:not(.film-detail-page) .v7-room-nav:not(#ft-a):not(#ft-b) :is(.room-nav-toggle,.room-nav-tools button){min-height:34px!important}
 /* expanded list opens upward, above the footer */
 html:root body.atelier-preview.work-page.work-page.work-page:not(.film-detail-page) .v7-room-nav.room-nav-expanded:not(#ft-a):not(#ft-b){padding:10px 10px 0!important;box-shadow:0 -18px 50px rgba(0,0,0,.18)!important}
 html:root body.atelier-preview.work-page.work-page.work-page:not(.film-detail-page) .v7-room-nav.room-nav-expanded:not(#ft-a):not(#ft-b) .v7-room-nav__scroller{
  order:-1!important;margin:0 0 6px!important;padding:0 0 10px!important;border-top:0!important;border-bottom:1px solid rgba(41,37,31,.14)!important}

 /* count + arrows: inside the footer, between the navigator and the platforms */
 html:root body.atelier-preview.work-page.work-page.work-page:not(.film-detail-page) .ex5-ui:not(#ft-a):not(#ft-b){
  top:auto!important;bottom:0!important;left:auto!important;right:calc(var(--ft-icons,190px) + 44px)!important;width:auto!important;height:48px!important;
  display:flex!important;align-items:center!important;gap:12px!important;padding:0!important;margin:0!important;
  background:transparent!important;border:0!important;box-shadow:none!important;color:#29251f!important;z-index:300!important}
 html:root body.atelier-preview.work-page.work-page.work-page:not(.film-detail-page) .ex5-ui:not(#ft-a):not(#ft-b) :is(.ex5-ui__label,.ex5-ui__hint){display:none!important}
 html:root body.atelier-preview.work-page.work-page.work-page:not(.film-detail-page) .ex5-ui:not(#ft-a):not(#ft-b) .ex5-ui__count{color:rgba(41,37,31,.8)!important}
 html:root body.atelier-preview.work-page.work-page.work-page:not(.film-detail-page) .ex5-ui:not(#ft-a):not(#ft-b) .ex5-ui__line{width:72px!important;background:rgba(41,37,31,.18)!important}
 html:root body.atelier-preview.work-page.work-page.work-page:not(.film-detail-page) .ex5-ui:not(#ft-a):not(#ft-b) .ex5-ui__line i{background:#29251f!important}
 html:root body.atelier-preview.work-page.work-page.work-page:not(.film-detail-page) .ex5-ui:not(#ft-a):not(#ft-b) button{color:#29251f!important}
 html:root body.atelier-preview.work-page.work-page.work-page:not(.film-detail-page) .ex5-ui:not(#ft-a):not(#ft-b) button:disabled{opacity:.3!important}

 /* SOUND on the film itself (positions computed by film-frame-20261021.js) */
 html:root body.work-page.work-page.work-page .snd-placed .media-frame>.room-video-sound:not(#ft-a){translate:var(--snd-dx,0px) var(--snd-dy,0px)!important}
}
@media (min-width:1024px) and (max-width:1279px) and (orientation:landscape){
 html:root body.atelier-preview.work-page.work-page.work-page:not(.film-detail-page) .ex5-ui:not(#ft-a):not(#ft-b) .ex5-ui__line{display:none!important}
 /* narrower windows: navigator starts right after the name instead of the centre */
 html:root body.atelier-preview.work-page.work-page.work-page:not(.film-detail-page) .v7-room-nav:not(.room-nav-expanded):not(#ft-a):not(#ft-b){left:200px!important;right:auto!important;transform:none!important;translate:none!important}
}
@media (min-width:1024px) and (orientation:landscape){
 html:root body.atelier-preview.work-page.work-page.work-page:not(.film-detail-page) .v7-room-nav:not(#ft-a):not(#ft-b) .room-nav-toggle{max-width:min(240px,calc(100vw - 840px))!important;min-width:0!important}
}