/* Home, computers: Visit (4 Nov 2026). The Showroom and "Your room, with Tomita" on one track that slides sideways: each page is the
   width of the window less a glimpse of the other (--peek), so the black room page shows at the right edge beside the showroom, and
   the showroom at the left once the room page is in. A swipe, a mouse drag on the scrollbar-less track, the thin arrow in the
   glimpse, or a click on the glimpse itself slides it. Phones: the showroom alone, as before (the room page is hidden there). */
.tm-visit-arrow{display:none}
@media (min-width:768px){
  .tm-visit{--peek:clamp(84px,8vw,150px);position:relative;background:#f3efe7}
  .tm-visit-track{display:flex;align-items:stretch;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  .tm-visit-track::-webkit-scrollbar{display:none}
  .tm-visit-track>section{flex:0 0 calc(100% - var(--peek));min-width:0;box-sizing:border-box}
  .tm-visit-track>#tm-showroom{scroll-snap-align:start}
  .tm-visit-track>#compare{scroll-snap-align:end}
  /* the page not on show is a glimpse with a hand cursor (no dimming: under it is the page's black, and it greyed everything) */
  .tm-visit[data-page="0"] .tm-visit-track>#compare,.tm-visit[data-page="1"] .tm-visit-track>#tm-showroom{cursor:pointer}

  /* the room page in its panel: no longer a full-page block with its own margins, height and full-bleed shadow */
  html body .tm-visit-track>#compare#compare{margin:0!important;height:auto!important;min-height:0!important;box-shadow:none!important;clip-path:none!important;
    padding:clamp(72px,7vw,120px) clamp(48px,5vw,96px)!important;display:flex!important;flex-direction:column;justify-content:center}
  html body .tm-visit-track>#compare#compare>div:last-child{height:min(calc(100svh - 360px),620px)!important;flex:0 0 auto}

  /* the arrows sit in the glimpse, centred on it */
  .tm-visit-arrow{position:absolute;top:50%;z-index:3;display:grid;place-items:center;width:var(--peek);height:56px;padding:0;border:0;background:none;
    cursor:pointer;translate:0 -50%;transition:opacity .5s ease}
  .tm-visit-arrow svg{width:46px;height:14px;overflow:visible;transition:translate .4s ease}
  .tm-visit-next{right:0;color:#f3ede2}
  .tm-visit-prev{left:0;color:#1d1b19}
  .tm-visit-next:hover svg{translate:5px 0}
  .tm-visit-prev:hover svg{translate:-5px 0}
  .tm-visit-arrow:focus-visible{outline:1px solid currentColor;outline-offset:-8px}
  .tm-visit[data-page="0"] .tm-visit-prev,.tm-visit[data-page="1"] .tm-visit-next{opacity:0;pointer-events:none}
}
@media (prefers-reduced-motion:reduce){.tm-visit-arrow svg{transition:none}}
@media (min-width:768px){
  /* the arrows low in the glimpse, below the rooms' photographs (centred, the light one sat on a white photograph) */
  .tm-visit-arrow{top:auto;bottom:clamp(36px,4vw,60px);translate:none}
}
@media (min-width:768px){
  /* kept apart from the black "Art & Fine Details" above (user, 5 Nov 2026): a band of the house paper over the track, so the black
     room page never runs into it */
  .tm-visit{padding-top:clamp(56px,5vw,96px)}
}
@media (min-width:768px){
  /* one window tall (user, 5 Nov 2026: "too long vertically, make it fit in the screen"): both pages of the track measured from the
     window less the header (91px): less padding, the room photographs and the showroom photograph sized to what remains */
  .tm-visit{--vp:clamp(40px,4vw,64px)}
  html body .tm-visit-track>#compare#compare{padding-top:var(--vp)!important;padding-bottom:var(--vp)!important}
  html body .tm-visit-track>#compare#compare>div:last-child{height:min(calc(100svh - 104px - 2*var(--vp) - 200px),620px)!important}
  html body .tm-visit-track>#tm-showroom#tm-showroom{padding-top:var(--vp)!important;padding-bottom:var(--vp)!important}
  html body .tm-visit-track>#tm-showroom#tm-showroom .tm-sr2-pics{width:min(calc((100svh - 104px - 2*var(--vp) - 80px)*.8),46vw)!important}
}