/* The eight rooms. Nothing lies over the photograph and nothing holds the page: the room fills the section and the edge of the
   next one shows beside it, which is the whole invitation. A swipe, a drag, two fingers sideways, the arrows or a click on that
   edge moves along; scrolling down simply goes on. The name and count stand on a slim black line beneath. */
html body #tm-showcase#tm-showcase{--line:64px;background:#000}
html body #tm-showcase .tm-x-track{position:absolute;left:0;right:0;top:0;bottom:var(--line);display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab}
html body #tm-showcase .tm-x-track::-webkit-scrollbar{display:none}
html body #tm-showcase .tm-x-track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none;-webkit-user-select:none}
html body #tm-showcase .tm-x-room,html body #tm-showcase .tm-x-room.on{position:relative;inset:auto;flex:0 0 89%;height:100%;overflow:hidden;opacity:.6;pointer-events:auto;scroll-snap-align:start;transition:opacity 1.2s cubic-bezier(.33,0,.2,1);-webkit-user-drag:none}
html body #tm-showcase .tm-x-room.on{opacity:1}
/* the photographs stay still inside their frames (until 3 Nov 2026 the next room's picture sat 30% over and glided back as it
   came in; quieter without). The rooms move only as the track slides, slowly (tomita-rooms-peek-*.js). */
html body #tm-showcase .tm-x-room img{translate:none!important;transition:none!important}
html body #tm-showcase .tm-x-room:not(.on){cursor:pointer}
@media (hover:hover){html body #tm-showcase .tm-x-room:not(.on):hover{opacity:.8}}
html body #tm-showcase .tm-x-room:last-child{scroll-snap-align:end}
html body #tm-showcase .tm-x-track.is-dragging .tm-x-room{cursor:grabbing}
html body #tm-showcase .tm-x-switch{opacity:var(--dark,1);transition:opacity .6s ease}
/* the first room waits in darkness under these words, until the whole picture is in frame and the lamp comes on */
html body #tm-showcase .tm-x-intro{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:0 24px;font:500 clamp(20px,1.667vw,28px)/1.25 Inter,Arial,sans-serif;letter-spacing:0;text-align:center;color:#f5f5f5;opacity:0;transition:opacity .9s ease;pointer-events:none}
html body #tm-showcase.tm-x-waiting .tm-x-intro{opacity:1}
html body #tm-showcase .tm-x-caps{left:clamp(24px,5vw,80px);right:auto;bottom:calc(var(--line) / 2);height:0;z-index:2}
html body #tm-showcase .tm-x-cap{bottom:auto;top:0;display:flex;align-items:baseline;gap:14px;transform:translateY(-50%);text-shadow:none}
html body #tm-showcase .tm-x-cap b{font-size:13px}
html body #tm-showcase .tm-x-cap span{font-size:14px}
html body #tm-showcase .tm-x-nav{position:absolute;right:clamp(14px,4vw,66px);bottom:0;height:var(--line);display:flex;align-items:center;gap:2px;color:#fff;font:400 11px/1 Inter,Arial,sans-serif;letter-spacing:.12em}
html body #tm-showcase .tm-x-nav p{margin:0 8px;display:flex;gap:9px}
html body #tm-showcase .tm-x-nav i{font-style:normal;opacity:.6}
html body #tm-showcase .tm-x-nav button{all:unset;display:grid;place-items:center;width:40px;height:44px;cursor:pointer;opacity:.8;transition:opacity .3s ease}
html body #tm-showcase .tm-x-nav button:hover{opacity:1}
html body #tm-showcase .tm-x-nav button:focus-visible{outline:1px solid #fff;outline-offset:-4px}
html body #tm-showcase .tm-x-nav button[disabled]{opacity:.25;cursor:default}
@media (max-width:767px){
 html body #tm-showcase#tm-showcase{--line:56px}
 html body #tm-showcase .tm-x-room,html body #tm-showcase .tm-x-room.on{flex-basis:87%}
 html body #tm-showcase .tm-x-caps{left:24px}
 html body #tm-showcase .tm-x-nav{right:24px}
 html body #tm-showcase .tm-x-nav button{display:none}
 html body #tm-showcase .tm-x-nav p{margin:0}
}
@media (prefers-reduced-motion:reduce){html body #tm-showcase .tm-x-room,html body #tm-showcase .tm-x-room img{transition:none}}
/* a material study beside each room (3 Nov 2026, after the 11 October home page): the room's own paper, close up, standing
   on the caption bar at the photograph's lower left; it fades with its caption */
html body #tm-showcase .tm-x-cap .tm-x-sw{position:absolute;left:0;bottom:calc(var(--line) / 2 + 22px);width:clamp(96px,8vw,128px);height:auto;aspect-ratio:1;object-fit:cover;
  box-shadow:0 10px 30px rgba(0,0,0,.35);outline:1px solid rgba(255,255,255,.18);outline-offset:-1px}
@media (max-width:767px){html body #tm-showcase .tm-x-cap .tm-x-sw{width:72px;bottom:calc(var(--line) / 2 + 14px)}}
/* the title on the first room (user, 5 Nov 2026): "Room Inspirations by Tomita" centred on the Shikigawara photograph in white, larger,
   in the headline face, and there to stay (it used to show only while the room waited dark for its lamp, then fade). A soft shadow
   keeps it clear of the lit terracotta wall. It lies inside the first room, so it travels with it when the rooms slide. Phones keep
   their title above the rooms (tomita-mobile-*.css). */
@media (min-width:768px){
  html body #tm-showcase .tm-x-intro,html body #tm-showcase.tm-x-waiting .tm-x-intro{opacity:1;color:#fff;
    text-shadow:0 2px 34px rgba(0,0,0,.42),0 1px 3px rgba(0,0,0,.35)}
}
@layer tomita-type{
  @media (min-width:768px){html body #tm-showcase .tm-x-intro{font-size:clamp(27px,2.35vw,40px)!important;line-height:1.15!important}}
}
/* the title shrinks as the light comes on (user, 5 Nov 2026): larger while the room waits in the dark, it settles to its own size as
   the lamp's film plays (the film's "playing" lifts .tm-x-waiting, tomita-rooms-peek-*.js); back to dark above the fold, it grows again */
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  html body #tm-showcase .tm-x-intro{scale:1;transition:scale 2.6s cubic-bezier(.33,0,.2,1) .15s,opacity .9s ease}
  html body #tm-showcase.tm-x-waiting .tm-x-intro{scale:1.3;transition:scale .6s ease,opacity .9s ease}
}
/* "by Tomita." smaller than "Room Inspirations" (user, 5 Nov 2026), on the same line */
html body #tm-showcase .tm-x-intro .tm-x-by{font-size:.62em;letter-spacing:.01em;white-space:nowrap}