/* Home, Showroom (4 Nov 2026), after the v3 home page: the interior (4:5) and the Kyobashi building (3:4) side by side, set on
   their foot, the words centred beside them: a small label, the name, a paragraph, the address and two outlined buttons.
   On a phone: the two photographs side by side, the words beneath. Title face and size: tomita-type-*.css. */
#tm-showroom{background:#f3efe7;color:#302f2a;padding:clamp(88px,9vw,150px) var(--tm-edge,24px)}
#tm-showroom img{display:block;width:100%;height:100%;object-fit:cover;max-height:none}
#tm-showroom .tm-sr2-pics{display:grid;grid-template-columns:3fr 2fr;gap:clamp(16px,1.7vw,28px);align-items:end}
#tm-showroom .tm-sr2-a{aspect-ratio:4/5;overflow:hidden;background:#ebe4d8}
#tm-showroom .tm-sr2-b{aspect-ratio:3/4;overflow:hidden;background:#ebe4d8}
#tm-showroom .tm-sr2-label{margin:0;font:500 11px/1.4 Inter,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#6b5d50}
#tm-showroom h2{margin:18px 0 22px;color:#302f2a}
#tm-showroom .tm-sr2-lede{margin:0 0 26px;max-width:30rem;font:400 clamp(16px,1.15vw,18px)/1.75 "PT Serif",Georgia,serif;color:#3d3027}
#tm-showroom .tm-sr2-addr{margin:0 0 32px;font:400 14.5px/1.75 "PT Serif",Georgia,serif;color:#6b5d50}
#tm-showroom .tm-sr2-addr a{color:inherit;text-decoration:none}
#tm-showroom .tm-sr2-addr a:hover{color:#302f2a}
#tm-showroom .tm-sr2-btns{display:flex;flex-wrap:wrap;gap:12px}
#tm-showroom .tm-sr2-btn{display:inline-block;padding:16px 28px;border:1px solid #302f2a;color:#302f2a;text-decoration:none;
  font:500 11px/1 Inter,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;transition:background-color .5s,color .5s}
#tm-showroom .tm-sr2-btn:hover,#tm-showroom .tm-sr2-btn:focus-visible{background:#302f2a;color:#f3efe7}

@media (min-width:821px){
  #tm-showroom{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,90px);align-items:center}
  /* the pair no taller than the window less the header and some air, like the sections above */
  #tm-showroom .tm-sr2-pics{max-width:calc((100svh - 220px)*.8*5/3 + clamp(16px,1.7vw,28px))}
  #tm-showroom #tm-sr2-title{font-size:clamp(24px,2vw,30px)!important;line-height:1.15!important}
}
@media (max-width:820px){
  #tm-showroom{padding-top:72px;padding-bottom:80px}
  #tm-showroom .tm-sr2-pics{gap:8px}
  #tm-showroom .tm-sr2-text{margin-top:36px}
  #tm-showroom #tm-sr2-title{font-size:24px!important;line-height:1.2!important}
}
/* one photograph at a time (user, 4 Nov 2026): the interior first, then the building and a room set in the showroom, cross-fading in
   one 4:5 frame; thin black arrows and the count beneath it */
#tm-showroom .tm-sr2-pics{display:block!important;max-width:none!important}
#tm-showroom .tm-sr2-frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:#ebe4d8}
#tm-showroom .tm-sr2-frame img{position:absolute;inset:0;opacity:0;transition:opacity 1.1s cubic-bezier(.33,0,.2,1)}
#tm-showroom .tm-sr2-frame img.on{opacity:1}
#tm-showroom .tm-sr2-nav{display:flex;align-items:center;gap:22px;margin-top:22px;color:#1d1b19}
#tm-showroom .tm-sr2-nav p{margin:0;min-width:3.6em;text-align:center;font:400 11px/1 Inter,Arial,sans-serif;letter-spacing:.14em;color:#6b5d50}
#tm-showroom .tm-sr2-arrow{display:grid;place-items:center;width:56px;height:40px;padding:0;border:0;background:none;color:#1d1b19;cursor:pointer;transition:translate .4s ease}
#tm-showroom .tm-sr2-arrow svg{width:46px;height:14px;overflow:visible}
#tm-showroom [data-sr2-prev]:hover{translate:-5px 0}
#tm-showroom [data-sr2-next]:hover{translate:5px 0}
#tm-showroom .tm-sr2-arrow:focus-visible{outline:1px solid #1d1b19;outline-offset:4px}
@media (prefers-reduced-motion:reduce){#tm-showroom .tm-sr2-frame img{transition:none}}
@media (min-width:821px){
  /* the frame and its arrows fit the window under the header, with air */
  #tm-showroom .tm-sr2-pics{width:min(100%,calc((100svh - 220px - 62px)*.8))}
}

@media (min-width:821px){
  /* with one photograph the words come in beside it, not out at the far side */
  #tm-showroom{grid-template-columns:auto minmax(0,1fr)!important;column-gap:clamp(64px,8vw,150px)!important}
  #tm-showroom .tm-sr2-text{max-width:34rem}
}
@media (min-width:821px){
  #tm-showroom .tm-sr2-pics{width:min(calc((100svh - 282px)*.8),46vw)}   /* an explicit width: the column takes its size from it */
}