/* TOMITA Phase 2 — Homepage
   The homepage should prove the philosophy through sequence and restraint:
   space -> material -> people -> origin -> relationship -> transformation -> place -> continuation. */

/* 1. Opening film
   Leave the room alone. No extra headline, overlay or graphic competes with it. */
#top{
  background:#000!important;
}
#slider .slide-cap{
  pointer-events:none!important;
}

/* 2. First spatial study
   The room is the whole; the close-up is the evidence. */
#homeGallery{
  background:var(--tm-paper)!important;
}
#homeGallery .g-n{
  display:none!important;
}
#homeGallery .g-eyebrow{
  font-family:var(--tm-sans)!important;
  font-size:9px!important;
  font-weight:500!important;
  line-height:1.35!important;
  letter-spacing:.22em!important;
  text-transform:uppercase!important;
  color:rgba(42,31,24,.68)!important;
}
#homeGallery .g-text h3{
  margin-top:16px!important;
  margin-bottom:16px!important;
  font-family:var(--tm-serif)!important;
  font-size:clamp(21px,1.65vw,26px)!important;
  font-weight:400!important;
  line-height:1.38!important;
  letter-spacing:-.01em!important;
  color:var(--tm-ink)!important;
}
#homeGallery .g-text p{
  font-family:var(--tm-serif)!important;
  font-size:clamp(13.5px,.98vw,15px)!important;
  line-height:1.72!important;
  color:rgba(42,31,24,.82)!important;
}
#homeGallery .g-row:first-child .g-b{
  width:70%!important;
  transform:none!important;
}
#homeGallery figcaption{
  font-family:var(--tm-sans)!important;
  font-size:9px!important;
  font-weight:400!important;
  line-height:1.45!important;
  letter-spacing:.13em!important;
  text-transform:uppercase!important;
  color:rgba(42,31,24,.70)!important;
}
#homeGallery figcaption span{
  color:rgba(42,31,24,.64)!important;
}
#homeGallery .g-col{
  font-family:var(--tm-sans)!important;
  letter-spacing:.18em!important;
  color:rgba(42,31,24,.64)!important;
}
#homeGallery .g-cta{
  font-family:var(--tm-serif)!important;
  font-style:italic!important;
  font-size:14px!important;
  font-weight:400!important;
  letter-spacing:.01em!important;
  border-bottom:1px solid currentColor!important;
  padding-bottom:4px!important;
  width:fit-content!important;
}

/* 3. Made in Japan
   Original centered Made in Japan / Materials & Craft overlay is defined in index.html. */
#statement{
  margin-top:var(--tm-space-sm)!important;
}
#stPhoto{
  height:min(46vh,500px)!important;
  min-height:340px!important;
  background:#161412!important;
}

/* 4. Charcoal chapter
   Keep the strong two-screen composition. Reduce copy contrast slightly so the images lead. */
#stEdit .charcoal-opening .charcoal-detail{
  border-top-color:rgba(255,255,255,.26)!important;
}
#stEdit .charcoal-opening .charcoal-detail p,
#stEdit .charcoal-material p{
  color:rgba(255,255,255,.80)!important;
}
#stEdit .charcoal-material .cap,
#stEdit .charcoal-kicker{
  font-family:var(--tm-sans)!important;
  letter-spacing:.19em!important;
  color:rgba(255,255,255,.66)!important;
}

/* 5. Material / nature screen
   Keep the asymmetry: one image speaks to origin, the other to physical detail. */
#stEdit .charcoal-page-two .charcoal-image{
  box-shadow:none!important;
}
#stEdit .charcoal-page-two .charcoal-image img{
  transition:transform var(--tm-slow) var(--tm-ease)!important;
}
#stEdit .charcoal-page-two .charcoal-image:hover img{
  transform:scale(1.012)!important;
}

/* 6. Essence of Space
   Remove the decorative wood field. The room images and relationships should carry the section. */
#essence{
  margin:var(--tm-space-lg) var(--tm-edge)!important;
  padding:clamp(64px,9vh,104px) 0!important;
  background:#211e1b!important;
  color:#fff!important;
}
#essence>.pointer-events-none.absolute{
  display:none!important;
}
#essence>[class*="relative"]{
  align-items:center!important;
}
#essence [data-rv].px-6{
  padding-left:clamp(34px,5vw,76px)!important;
  padding-right:clamp(28px,3.5vw,52px)!important;
}
#essence [data-rv]>div:first-child{
  letter-spacing:.22em!important;
  color:rgba(255,255,255,.68)!important;
}
#essence [data-rv]>p{
  max-width:20rem!important;
  font-family:var(--tm-serif)!important;
  font-size:14px!important;
  line-height:1.72!important;
  color:rgba(255,255,255,.76)!important;
}
#essence .tm-ways a{
  font-size:14px!important;
  border-bottom-color:rgba(255,255,255,.68)!important;
}
#essence #roomSlider{
  gap:clamp(14px,1.5vw,22px)!important;
}
#essence figcaption{
  font-family:var(--tm-sans)!important;
  font-size:9px!important;
  letter-spacing:.14em!important;
  color:rgba(255,255,255,.70)!important;
}

/* 7. Transformation
   Demonstrate the effect cleanly; avoid turning the comparison into a graphic device. */
#compare{
  margin:var(--tm-space-lg) var(--tm-edge)!important;
  background:transparent!important;
}
#compare>div:first-child{
  height:auto!important;
  min-height:0!important;
  padding:0 0 18px!important;
  align-items:center!important;
  border-bottom:1px solid var(--tm-line)!important;
}
#compare .tm-set{
  gap:1px!important;
  background:var(--tm-paper)!important;
}
#compare .tm-set figure:first-child,
#compare .tm-set figure:last-child{
  margin:0!important;
  clip-path:none!important;
}
#compare .tm-set-tab{
  font-size:9px!important;
  letter-spacing:.18em!important;
  padding:10px 0!important;
}
#compare .tm-room-btn{
  width:38px!important;
  height:38px!important;
  background:rgba(243,238,230,.94)!important;
  border-color:rgba(42,31,24,.30)!important;
  color:var(--tm-ink)!important;
}
#compare .tm-room-btn:hover{
  background:var(--tm-paper)!important;
  border-color:var(--tm-ink)!important;
  color:var(--tm-ink)!important;
}
#compare .tm-room-cap{
  font-size:9px!important;
  letter-spacing:.18em!important;
}

/* 8. Showroom
   Keep the original centered SHOWROOM / tomita TOKYO overlay from index.html. */
#showroom{
  margin:var(--tm-space-lg) var(--tm-edge)!important;
}
#showroom .sr-film{
  box-shadow:none!important;
}
#showroom .sr-text{
  max-width:42rem!important;
  margin-top:clamp(34px,5vh,54px)!important;
}
#showroom .sr-text p{
  font-family:var(--tm-serif)!important;
  font-size:clamp(15px,1.06vw,17px)!important;
  line-height:1.76!important;
  letter-spacing:0!important;
  color:rgba(42,31,24,.76)!important;
}
#showroom .sr-text a{
  font-size:14px!important;
  letter-spacing:.01em!important;
}

/* 9. Magazine / continuation
   Editorial content should feel like an extension of the conversation, not another interface feature. */
#journal{
  padding-top:var(--tm-space-lg)!important;
  padding-bottom:var(--tm-space-lg)!important;
  background:var(--tm-paper-soft)!important;
}
#journal .tm-book{
  display:none!important;
}
#journal h2{
  margin-top:0!important;
  font-size:clamp(22px,1.8vw,28px)!important;
}
#journal h2+p{
  max-width:38rem!important;
  font-family:var(--tm-serif)!important;
  font-size:14px!important;
  line-height:1.75!important;
  color:rgba(42,31,24,.72)!important;
}
#journal>a.group{
  margin-top:clamp(48px,7vh,72px)!important;
  max-width:330px!important;
}
#journal>a.group>div{
  box-shadow:0 28px 60px -38px rgba(30,20,12,.48)!important;
}
#journal [class*="text-[#fc8702]"]{
  color:rgba(255,255,255,.68)!important;
}

/* 10. Social
   A quiet continuation of the world, not generic social proof. */
#instagram{
  padding-top:var(--tm-space-lg)!important;
  padding-bottom:var(--tm-space-lg)!important;
  background:var(--tm-paper)!important;
}
#instagram h2{
  font-size:clamp(22px,1.8vw,28px)!important;
}
#instagram h2+p{
  font-family:var(--tm-serif)!important;
  font-size:14px!important;
  line-height:1.7!important;
  color:rgba(42,31,24,.68)!important;
}
#instagram .relative.mx-auto.mt-10>.absolute{
  display:none!important;
}
#instagram .grid img{
  transition:transform var(--tm-slow) var(--tm-ease)!important;
}
#instagram .group:hover img{
  transform:scale(1.012)!important;
}

@media (max-width:767px){
  #homeGallery .g-text h3{
    font-size:22px!important;
  }
  #stPhoto{
    height:48vh!important;
    min-height:360px!important;
  }
  #essence,
  #compare,
  #showroom{
    margin:80px 16px!important;
  }
  #essence{
    padding:54px 0!important;
  }
}

/* Phase 2 motion correction: older homepage passes used 2–3 second fades.
   Keep the quiet arrival, but do not leave content looking washed out. */
html.rv-on #homeGallery [data-rv],
html.rv-on #stPhoto,
html.rv-on #stPhoto .st-made,
html.rv-on #stPhoto img,
html.rv-on #stEdit [data-rv],
html.rv-on #essence [data-rv],
html.rv-on #showroom [data-rv],
html.rv-on #journal [data-rv],
html.rv-on #instagram [data-rv]{
  transition-duration:780ms!important;
  transition-timing-function:var(--tm-ease)!important;
}
html.rv-on #stPhoto .st-made{
  transition-delay:100ms!important;
}

/* The original centered overlays and Made in Japan hover reveal are restored. */

/* Compact measures preserve the quiet type while connecting copy to its image. */
#homeGallery .g-text p{max-width:36ch!important;text-align:left!important;}
#homeGallery .g-text h3{max-width:25ch!important;}
#homeGallery .g-text p+p{margin-top:.9em!important;}
#homeGallery .g-col{margin-top:22px!important;}
#homeGallery .g-cta{margin-top:14px!important;min-height:36px;display:inline-flex;align-items:center;}
#stEdit .charcoal-opening .charcoal-detail p,
#stEdit .charcoal-material p{line-height:1.72!important;}
#stEdit .charcoal-material .cap{display:block;margin-bottom:12px!important;}
#essence [data-rv]>p{text-align:left!important;max-width:32ch!important;}
#essence .tm-ways a{display:inline-flex;align-items:center;min-height:44px;}
#compare .tm-set-tab{min-height:44px;}
html.rv-on #stPhoto img{transition-delay:0ms!important;}
html.rv-on #stEdit [data-rv],
html.rv-on #essence [data-rv],
html.rv-on #showroom [data-rv],
html.rv-on #journal[data-rv],
html.rv-on #instagram[data-rv]{transition-duration:780ms!important;transition-timing-function:var(--tm-ease)!important;transition-delay:var(--d,0ms)!important;}
@media(max-width:767px){
 #homeGallery .g-text p{max-width:38ch!important;}
 #essence [data-rv]>p{text-align:left!important;margin-left:auto!important;margin-right:auto!important;}
 html.rv-on #stPhoto,html.rv-on #stPhoto img,html.rv-on #stPhoto .st-made,
 html.rv-on #stEdit [data-rv],html.rv-on #essence [data-rv],
 html.rv-on #showroom [data-rv],html.rv-on #journal[data-rv],html.rv-on #instagram[data-rv]{transition-duration:650ms!important;transition-delay:0ms!important;}
}
@media(prefers-reduced-motion:reduce){
 html.rv-on [data-rv],html.rv-on #stPhoto img,html.rv-on #stPhoto .st-made{opacity:1!important;transition:none!important;}
}

@media(max-width:767px){
 #compare>div:first-child{display:grid!important;grid-template-columns:repeat(3,1fr);gap:6px 16px!important;}
 #compare>div:first-child>a{grid-column:1/-1;justify-self:end;font-size:14px!important;margin-left:auto;min-height:36px;display:inline-flex;align-items:center;}
 #compare .tm-set-tab{white-space:nowrap!important;}
}

/* Burgundy is a quiet editorial accent on paper surfaces. */
:root{--tm-burgundy:#3e2b20;--tm-burgundy-hover:#604535;}
#homeGallery .g-eyebrow,
#homeGallery .g-cta,
#showroom .sr-text a,
#journal a[href="magazine.html"]:not(.group),
#compare>div:first-child>a{
 color:var(--tm-burgundy)!important;
 text-decoration-color:var(--tm-burgundy)!important;
}
#homeGallery .g-cta,
#showroom .sr-text a,
#journal a[href="magazine.html"]:not(.group),
#compare>div:first-child>a{transition:color 220ms ease,border-color 220ms ease;}
#homeGallery .g-cta:hover,
#showroom .sr-text a:hover,
#journal a[href="magazine.html"]:not(.group):hover,
#compare>div:first-child>a:hover{color:var(--tm-burgundy-hover)!important;}
#compare .tm-set-tab[aria-pressed="true"]{color:var(--tm-burgundy)!important;}
#compare .tm-set-line{background:var(--tm-burgundy)!important;}
#compare .tm-room.is-installed .tm-room-btn{color:var(--tm-burgundy)!important;border-color:var(--tm-burgundy)!important;}
html body #heroImages .material-product-link{color:var(--tm-burgundy);}
html body #heroImages .material-product-id{border-color:rgba(62,43,32,.45);}

/* Warm room light projected onto a matte surface: a softened aperture,
   interrupted by architectural shadow, with a trace of surface grain. */
html body #stEdit{
 background-color:#121210!important;
 background-image:url("tomita-room-light.02b250d563f4.svg")!important;
 background-size:100% 100%!important;
 background-position:center top!important;
 background-repeat:no-repeat!important;
}
html body #stEdit::before{background:none!important;}
@media(max-width:767px){
 html body #stEdit{background-size:auto 100%!important;background-position:62% top!important;}
}

/* Give burgundy a visible role in the editorial hierarchy. */
html body #homeGallery .g-text h3,
html body #journal h2{color:var(--tm-burgundy)!important;}

/* Approved neutral palette for the homepage paper surfaces. */
:root{--tm-paper:#F3EFE7;--tm-paper-soft:#F3EFE7;--tm-ink:#302B26;--tm-body:#655E56;--tm-burgundy:#302B26;}
html body{background-color:#F3EFE7!important;}
html body #homeGallery,html body #journal,html body #instagram{background-color:#F3EFE7!important;}
html body #homeGallery .g-text h3,html body #journal h2,html body #instagram h2,html body #showroom .sr-text h2{color:#302B26!important;}
html body #homeGallery .g-text p,html body #homeGallery .g-eyebrow,
html body #homeGallery figcaption,html body #homeGallery figcaption span,html body #homeGallery .g-col,
html body #showroom .sr-text p,html body #journal h2+p,html body #instagram h2+p{color:#655E56!important;}

html body #homeGallery .g-row:first-child .g-thesis p,
html body #homeGallery .g-row:first-child figcaption,
html body #homeGallery .g-row:first-child figcaption span{color:#655E56!important;}

/* Slightly softened corners on selected inset media. */
html body #homeGallery .g-fig>a,
html body #stEdit .charcoal-image{
 border-radius:3px!important;overflow:hidden;
}
html body #homeGallery .g-fig>a>img,
html body #stEdit .charcoal-image>img,
html body #stEdit .charcoal-film video{
 border-radius:3px!important;
}

/* Quiet daylight across the ivory gallery wall. */
html body #homeGallery{
 background-image:url("tomita-gallery-daylight.789c6bd01a6c.svg")!important;
 background-repeat:no-repeat!important;background-size:100% 100%!important;background-position:center top!important;
}
@media(max-width:767px){html body #homeGallery{background-size:auto 100%!important;background-position:62% top!important;}}