/* One Wall Changes Space (rebuilt 5 Nov 2026: "boring and unattractive ... the functionality should be a wow moment"). The second
   page of the Visit track. On the left, the words: the title, one line, the six rooms, the paper on show, the outlined button. On the
   right, one room as large as the window allows, and a line drawn down it: Tomita's paper to the left of the line, the wall as it was
   to the right. The first time the page shows, and at each new room, the paper is hung across the whole wall, then the line comes back
   to rest in the middle; after that the visitor draws it (pointer, touch or arrow keys). In the tomita-type layer, as the page's older
   #compare rules are. Markup and script: index.html, section#compare.tm-cw. */
@layer tomita-type{
@media (min-width:768px){
  html body #tm-visit #compare#compare{display:grid!important;grid-template-columns:minmax(260px,400px) auto!important;justify-content:center!important;align-items:center!important;
    column-gap:clamp(56px,6vw,120px)!important;background:#e8e2d6!important;color:#2a1f18!important;
    padding:var(--vp,48px) clamp(40px,4vw,80px)!important}
  html body #tm-visit #compare#compare .tm-rooms-title{margin:0!important;color:#2a1f18!important;font-size:clamp(28px,2.4vw,38px)!important;line-height:1.15!important}
  html body #tm-visit #compare#compare .cw-lede{margin:14px 0 0!important;font:400 16px/1.75 "PT Serif",Georgia,serif!important;color:#4c4942!important}
  /* the rooms: a short list, the chosen one in ink with a line before it */
  html body #tm-visit #compare#compare .cw-rooms{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:2px!important;margin:clamp(24px,3.4vh,40px) 0 0!important}
  html body #tm-visit #compare#compare .cw-room{position:relative!important;padding:7px 0 7px 0!important;border:0!important;background:none!important;cursor:pointer!important;
    font:500 11px/15px Inter,Arial,sans-serif!important;letter-spacing:.2em!important;text-transform:uppercase!important;color:#5f5950!important;transition:color .3s,padding .4s cubic-bezier(.33,0,.2,1)!important}
  html body #tm-visit #compare#compare .cw-room::before{content:""!important;position:absolute!important;left:0!important;top:50%!important;width:0!important;height:1px!important;background:#2a1f18!important;transition:width .4s cubic-bezier(.33,0,.2,1)!important}
  html body #tm-visit #compare#compare .cw-room:hover{color:#2a1f18!important}
  html body #tm-visit #compare#compare .cw-room[aria-pressed="true"]{color:#2a1f18!important;padding-left:30px!important}
  html body #tm-visit #compare#compare .cw-room[aria-pressed="true"]::before{width:20px!important}
  /* the paper on show */
  html body #tm-visit #compare#compare .cw-design{margin:clamp(24px,3.4vh,40px) 0 0!important;padding-top:clamp(18px,2.4vh,26px)!important;border-top:1px solid rgba(48,47,42,.18)!important}
  html body #tm-visit #compare#compare .cw-design-k{display:block!important;font:500 11px/15px Inter,Arial,sans-serif!important;letter-spacing:.2em!important;text-transform:uppercase!important;color:#5f5950!important}
  html body #tm-visit #compare#compare .cw-design b{display:block!important;margin-top:8px!important;font:500 clamp(24px,2vw,30px)/1.2 "Cormorant Garamond",Georgia,serif!important;font-size-adjust:.44!important;color:#2a1f18!important}
  html body #tm-visit #compare#compare .cw-design #cwCode{display:block!important;margin-top:2px!important;font:italic 400 14px/1.5 "PT Serif",Georgia,serif!important;color:#4c4942!important}
  html body #tm-visit #compare#compare .cw-acts{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:14px 26px!important;margin-top:clamp(22px,3vh,34px)!important}
  html body #tm-visit #compare#compare .cw-btn{display:inline-block!important;padding:15px 30px!important;border:1px solid #302f2a!important;color:#302f2a!important;text-decoration:none!important;
    font:500 11px/1 Inter,Arial,sans-serif!important;letter-spacing:.2em!important;text-transform:uppercase!important;transition:background-color .3s,color .3s!important}
  html body #tm-visit #compare#compare .cw-btn:hover{background:#302f2a!important;color:#f3efe7!important}
  html body #tm-visit #compare#compare .cw-link{padding-bottom:3px!important;border-bottom:1px solid #2a1f18!important;color:#2a1f18!important;text-decoration:none!important;font:400 14px/1.4 "PT Serif",Georgia,serif!important}

  /* the room */
  html body #tm-visit #compare#compare .cw-stage{--h:min(calc(100svh - 104px - 2*var(--vp,48px)),820px)!important;position:relative!important;margin:0!important;height:var(--h)!important;width:calc(var(--h)*var(--ar,.65))!important;
    overflow:hidden!important;background:#ddd5c7!important;cursor:ew-resize!important;touch-action:pan-y!important;user-select:none!important;-webkit-user-select:none!important;transition:opacity .45s ease!important}
  html body #tm-visit #compare#compare .cw-stage.is-swapping{opacity:0!important}
  html body #tm-visit #compare#compare .cw-stage img{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important;pointer-events:none!important;-webkit-user-drag:none!important}
  /* the paper: shown to the left of the line */
  html body #tm-visit #compare#compare .cw-after{position:absolute!important;inset:0!important;clip-path:inset(0 calc(100% - var(--x)*1%) 0 0)!important}
  /* the line and its handle */
  html body #tm-visit #compare#compare .cw-line{position:absolute!important;top:0!important;bottom:0!important;left:calc(var(--x)*1%)!important;width:44px!important;margin-left:-22px!important;z-index:3!important;cursor:ew-resize!important;outline:none!important}
  html body #tm-visit #compare#compare .cw-line::before{content:""!important;position:absolute!important;top:0!important;bottom:0!important;left:50%!important;width:1px!important;margin-left:-.5px!important;background:rgba(255,255,255,.92)!important;box-shadow:0 0 12px rgba(0,0,0,.25)!important}
  html body #tm-visit #compare#compare .cw-knob{position:absolute!important;left:50%!important;top:50%!important;display:grid!important;place-items:center!important;width:52px!important;height:52px!important;margin:-26px 0 0 -26px!important;
    border-radius:50%!important;background:rgba(243,239,231,.94)!important;color:#2a1f18!important;box-shadow:0 4px 18px rgba(0,0,0,.18)!important;transition:scale .3s ease,opacity .4s ease!important}
  html body #tm-visit #compare#compare .cw-stage:hover .cw-knob,html body #tm-visit #compare#compare .cw-stage.is-drawing .cw-knob{scale:1.08!important}
  html body #tm-visit #compare#compare .cw-line:focus-visible .cw-knob{outline:1px solid #2a1f18!important;outline-offset:3px!important}
  /* while the paper is being hung the handle waits, so it reads as paper moving across, not a control */
  html body #tm-visit #compare#compare .cw-stage.is-hanging .cw-knob{opacity:0!important}
  /* the two words at the top corners */
  html body #tm-visit #compare#compare .cw-tag{position:absolute!important;top:22px!important;z-index:2!important;font:500 11px/1.4 Inter,Arial,sans-serif!important;letter-spacing:.2em!important;text-transform:uppercase!important;
    color:#fff!important;text-shadow:0 1px 10px rgba(0,0,0,.45)!important;pointer-events:none!important;transition:opacity .4s ease!important}
  html body #tm-visit #compare#compare .cw-tag-l{left:24px!important}
  html body #tm-visit #compare#compare .cw-tag-r{right:24px!important}
  html body #tm-visit #compare#compare .cw-stage[style*="--x:0."] .cw-tag-l,html body #tm-visit #compare#compare .cw-stage[style*="--x:100"] .cw-tag-r{opacity:0!important}

  html body #tm-visit #compare#compare .cw-words{border:0!important;padding:0!important;margin:0!important;height:auto!important}
  /* the corner words on a small paper chip, legible on a white ceiling or a dark wall alike */
  html body #tm-visit #compare#compare .cw-tag{padding:7px 10px!important;background:rgba(243,239,231,.92)!important;color:#2a1f18!important;text-shadow:none!important;top:18px!important}
  html body #tm-visit #compare#compare .cw-tag-l{left:18px!important}
  html body #tm-visit #compare#compare .cw-tag-r{right:18px!important}
  /* the glimpse of this page beside the showroom is light, so its arrow is dark, below the photographs, above the panels */
  html body .tm-visit-next{color:#2a1f18!important;bottom:clamp(12px,1.6vw,24px)!important;z-index:20!important}
  html body .tm-visit-prev{z-index:20!important}
}
}

/* Cleaner (user, 5 Nov 2026: "use less different fonts and styles, clean up the page ... add a hint of bright colour"): two faces
   only, the headline face for the title and PT Serif for every other word, small capitals kept for the one button as everywhere on
   the site; no label over the design, no italic code, no rule; the rooms in plain words. The hint of colour: Tomita's orange, in the
   short line beside the chosen room and the arrows of the handle. */
@layer tomita-type{
@media (min-width:768px){
  html body #tm-visit #compare#compare .cw-room{padding:6px 0!important;font:400 16px/1.5 "PT Serif",Georgia,serif!important;letter-spacing:.01em!important;
    text-transform:none!important;color:#5f5950!important}
  html body #tm-visit #compare#compare .cw-room:hover{color:#2a1f18!important}
  html body #tm-visit #compare#compare .cw-room[aria-pressed="true"]{color:#2a1f18!important;padding-left:30px!important}
  html body #tm-visit #compare#compare .cw-room::before{background:#fc8702!important;height:1.5px!important}
  html body #tm-visit #compare#compare .cw-rooms{gap:0!important;margin-top:clamp(22px,3vh,34px)!important}
  html body #tm-visit #compare#compare .cw-design{border-top:0!important;padding-top:0!important;margin-top:clamp(22px,3vh,34px)!important;
    font:400 16px/1.6 "PT Serif",Georgia,serif!important;color:#5f5950!important}
  html body #tm-visit #compare#compare .cw-design b{display:inline!important;margin:0!important;font:400 16px/1.6 "PT Serif",Georgia,serif!important;color:#2a1f18!important}
  html body #tm-visit #compare#compare .cw-design #cwCode{display:inline!important;margin:0!important;font:400 16px/1.6 "PT Serif",Georgia,serif!important;font-style:normal!important;color:#5f5950!important}
  html body #tm-visit #compare#compare .cw-link{font:400 16px/1.4 "PT Serif",Georgia,serif!important}
  html body #tm-visit #compare#compare .cw-tag{font:400 13px/1 "PT Serif",Georgia,serif!important;letter-spacing:.01em!important;text-transform:none!important;padding:8px 11px!important}
  html body #tm-visit #compare#compare .cw-knob{color:#fc8702!important}
}
}
/* (user, 5 Nov 2026) no "View the design", no orange line beside the chosen room (it is simply in ink), and the button filled in the
   indigo of the collection band (#213752), white words */
@layer tomita-type{
@media (min-width:768px){
  html body #tm-visit #compare#compare .cw-room::before{content:none!important;display:none!important}
  html body #tm-visit #compare#compare .cw-room[aria-pressed="true"]{padding-left:0!important}
  html body #tm-visit #compare#compare .cw-btn{background:#213752!important;border-color:#213752!important;color:#fff!important}
  html body #tm-visit #compare#compare .cw-btn:hover,html body #tm-visit #compare#compare .cw-btn:focus-visible{background:#172840!important;border-color:#172840!important;color:#fff!important}
}
}