/* The lower half of the home page: where text sits, and nothing else (no fonts, sizes or colours here).
   Every section starts and ends on the header's own margin, because the header is always on screen (from 3 Nov 2026 the
   introduction and Washi too, which sat at 94px and 48px).
   A second line, column 8 of 12, carries the paragraphs under Made in Japan and in the showroom.
   In a cascade layer because the older rules reach 14 repeated IDs: !important in a layer beats any unlayered !important. */
:root{--tm-edge:min(4.15vw,80px)}
@media (max-width:767px){:root{--tm-edge:24px}}

@layer tomita-align{

/* rooms: the name and the count */
#tm-showcase .tm-x-caps{left:var(--tm-edge)!important}
#tm-showcase .tm-x-nav{right:calc(var(--tm-edge) - 12px)!important}   /* the arrow, not its 40px button, on the margin */

/* compare */
#compare .tm-space-bottom{padding-left:var(--tm-edge)!important;padding-right:var(--tm-edge)!important;align-items:last baseline!important}
/* one title style and one link style across the home page (3 Nov 2026): titles in Inter capitals, 17px, .12em; links in
   PT Serif italic, always underlined */
#stPhoto .tm-film-intro h3{font:400 17px/1.4 Inter,Arial,sans-serif!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:#f3eee6!important}   /* as Heritage and Materials & Craft */
/* Washi: the bark, the fibre and the sheet under one title, on the steps' own 12-column grid so it starts at the bark's edge */
#washi-story .bw-steps-head{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:140px!important}
#washi-story .bw-steps-head+.bw-steps{margin-top:48px!important}
#washi-story .bw-steps-title{grid-column:2/-1;margin:0!important;padding:0!important;font:400 17px/1.4 Inter,Arial,sans-serif!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:#302f2a!important;text-align:left!important}
@media (max-width:767px){#washi-story .bw-steps-head{display:block!important;margin-top:88px!important}#washi-story .bw-steps-head+.bw-steps{margin-top:32px!important}}
#showroom#showroom h2.tm-sr-h{font-size:17px!important;letter-spacing:.12em!important}
#showroom .tm-sr-head{margin:0 var(--tm-edge) 28px!important;text-align:left!important}
#compare .tm-space-customize{font:italic 400 14px/1.5 "PT Serif",Georgia,serif!important;letter-spacing:.01em!important;text-transform:none!important;
  text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:6px!important}
#instagram .tm-igr-more{display:flex!important;justify-content:center!important;margin:10px 0 0!important;text-align:center!important}   /* a phone rule left-aligns paragraphs */
#instagram .tm-igr-more a{font:italic 400 14px/1.5 "PT Serif",Georgia,serif!important;color:#302f2a!important;text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:6px!important}

/* the header keeps its dark bar over the film section too (3 Nov 2026): the home-opening script drops it there (is-over-charcoal,
   from when that section opened with a full-screen film), and its nav text printed over the section's paragraph */
#siteHead.is-over-charcoal:not(.is-over-hero){--head-ink:#fff!important;background:rgba(0,0,0,.85)!important;color:#fff!important}
#siteHead.is-over-charcoal:not(.is-over-hero) .head-burger span{background:#fff!important}

/* Instagram on white, no paper texture (user, 3 Nov 2026) */
#instagram#instagram{background:#fff!important}
#instagram::before,#instagram::after{display:none!important}

/* the bark / fibre / sheet photographs 15% smaller, keeping their left edge (user, 3 Nov 2026) */
@media (min-width:768px){#washi-story .bw-step .wph{width:85%!important}}
/* Washi's room photograph smaller (user, 4 Nov 2026): five columns instead of six (636 to 526px wide on a 1728px screen), and
   never taller than the window less the header and some air */
@media (min-width:821px){
  #washi-story .bw-room{grid-column:1/6!important}
  /* the cap sits on the frame (on the photograph alone it left a strip of the frame's beige beneath, 4 Nov 2026) */
  #washi-story .bw-room .wph{max-height:calc(100svh - 220px)!important}
  #washi-story .bw-room img{width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important}
}
/* the bark, the fibre and the sheet closer together (user, 4 Nov 2026): one group of three photographs at the width they had
   (15vw, about 260px), 5.5vw apart (4vw until a second pass the same day), centred on the page, with the title on the group's left edge; the words no wider than their
   photograph, and a gentler step down (24 / 48px; was 72 / 144, then 48 / 96) */
@media (min-width:768px){
  #washi-story{--step-w:clamp(200px,15vw,290px);--step-gap:clamp(56px,5.5vw,104px)}
  #washi-story .bw-steps-head{display:block!important;width:calc(3*var(--step-w) + 2*var(--step-gap))!important;max-width:100%;margin-left:auto!important;margin-right:auto!important}
  #washi-story .bw-steps{display:flex!important;justify-content:center!important;align-items:flex-start!important;gap:var(--step-gap)!important}
  #washi-story .bw-step{flex:0 0 var(--step-w)!important;width:var(--step-w)!important;max-width:none!important;grid-column:auto!important}
  #washi-story .bw-step:nth-child(1){margin-top:0!important}
  #washi-story .bw-step:nth-child(2){margin-top:24px!important}
  #washi-story .bw-step:nth-child(3){margin-top:48px!important}
  #washi-story .bw-step .wph{width:100%!important}
}

/* Art Wall Legend II editorial: the words and the material inset from the left page edge (user, 3 Nov 2026: "too close to the edge") */
@media (min-width:768px){#tm-desk-editorial .tm-d-intro,#tm-desk-editorial .tm-d-material{margin-left:clamp(32px,4vw,64px)!important}}

/* hero slideshow: the phone's counter, now on the computer too (3 Nov 2026): "‹ 03 / 06 ›" centred under the photograph,
   plain white chevrons with a soft shadow, no pause button, no rings */
#heroImages .hero-image-footer{justify-content:center!important;padding:0!important}
#heroImages .hero-image-controls{gap:6px!important;margin:0 0 36px!important;color:#fff!important;filter:drop-shadow(0 1px 4px rgba(0,0,0,.45))}
#heroImages .hero-image-controls .hero-pause{display:none!important}
#heroImages .hero-image-controls :is([data-hero-prev],[data-hero-next]){width:44px!important;height:44px!important;border:0!important;border-radius:0!important;background:none!important;
  -webkit-backdrop-filter:none;backdrop-filter:none;color:#fff!important;opacity:1!important;transition:opacity .25s!important}
#heroImages .hero-image-controls :is([data-hero-prev],[data-hero-next]) svg{width:16px!important;height:16px!important;stroke-width:1.4!important}
#heroImages .hero-image-controls :is([data-hero-prev],[data-hero-next]):hover{opacity:.6!important;background:none!important;color:#fff!important}
#heroImages .hero-image-counter{min-width:0!important;gap:6px!important;font:400 11px/1 Inter,Arial,sans-serif!important;letter-spacing:.12em!important;color:#fff!important;text-shadow:0 1px 8px rgba(0,0,0,.45)}
#heroImages .hero-image-counter :is(.hero-image-total,.hero-image-divider){opacity:1!important}
#heroImages .hero-scroll-link{display:none!important}   /* the scroll-down arrow sat where the counter now sits */
/* its title above the photographs, as the other section titles (3 Nov 2026); the photographs keep their full screen */
#compare.tm-space-experience{height:auto!important;min-height:0!important;overflow:visible!important;background:#090907!important}   /* the dark at the foot of the section above, no seam */
@media (max-width:767px){#compare.tm-space-experience{background:#121210!important}}   /* phones: that section has no darkened foot */
#compare>.tm-space-stage{height:100svh!important;min-height:660px!important}
#compare .tm-space-title{margin:0!important;padding:0 var(--tm-edge) 28px!important;text-align:left!important;font:400 17px/1.4 Inter,Arial,sans-serif!important;
  letter-spacing:.12em!important;text-transform:uppercase!important;color:#f3eee6!important}
/* Blank / With Tomita bottom left, the rooms in the middle, Explore customization right (phones already have it bottom left) */
@media (min-width:768px){
  #compare .tm-space-action{display:contents!important}
  #compare .tm-space-state{grid-column:1!important;grid-row:1!important;justify-self:start!important}
  #compare .tm-space-nav{grid-column:2!important;grid-row:1!important}
  #compare .tm-space-customize{grid-column:3!important;grid-row:1!important;justify-self:end!important}
}
@media (min-width:768px) and (max-width:1100px){
  #compare .tm-space-nav{grid-column:1!important;grid-row:1!important;justify-content:flex-start!important}
  #compare .tm-space-state{grid-column:1!important;grid-row:2!important}
  #compare .tm-space-customize{grid-column:2!important;grid-row:2!important}
}

/* the paragraph under Made in Japan reads from the left */
#stPhoto .st-explain{justify-self:stretch!important;align-self:start!important;text-align:left!important;width:auto!important;max-width:none!important}

@media (min-width:768px){
  /* the introduction ("Pinnacle of Japanese craft") and Washi on the shared margin */
  #tm-desk-editorial,#washi-story{padding-left:var(--tm-edge)!important;padding-right:var(--tm-edge)!important}
  #stPhoto>.st-made{max-width:none!important;padding-left:0!important;padding-right:0!important}
  #stPhoto .tm-kozo-film .tm-film-intro,#stPhoto .cap{padding-left:var(--tm-edge)!important;padding-right:var(--tm-edge)!important;margin-left:0!important}
  #stPhoto .tm-bw{margin-left:var(--tm-edge)!important;margin-right:var(--tm-edge)!important;padding-left:0!important;padding-right:0!important}
  #stPhoto .st-explain{margin:48px var(--tm-edge) 0!important;padding-left:calc((100% - 2*var(--tm-edge) + 24px)*7/12)!important;text-align:right!important}

  #showroom#showroom .tm-sr-text{margin-left:var(--tm-edge)!important;margin-right:var(--tm-edge)!important}

  #instagram .tm-ig-bar{padding-left:var(--tm-edge)!important;padding-right:var(--tm-edge)!important}
  #instagram .tm-ig-tile span{left:16px!important;right:16px!important;padding:0!important;text-align:left!important}

  footer>div{padding-left:var(--tm-edge)!important;padding-right:var(--tm-edge)!important}
  footer>div>div{max-width:none!important}
}
@media (min-width:821px){
  #showroom#showroom .tm-sr-photo{margin-left:var(--tm-edge)!important;margin-right:var(--tm-edge)!important}
  /* another centimetre off the photograph's foot (user, 4 Nov 2026): 2cm clipped in all, the words below come up with it */
  #showroom#showroom .tm-sr-photo{clip-path:inset(0 0 2cm 0)!important;margin-bottom:-2cm!important}
  /* the showroom paragraph spans column 8 to the right margin, like the paragraph under Made in Japan;
     both are set with a straight right edge on the margin (owner's choice, 2026-11-03) */
  #showroom .tm-sr-words,#showroom .tm-sr-words :is(.tm-sr-p,.tm-sr-link){grid-column:8/13!important;text-align:right!important}
}

@media (max-width:767px){
  /* the introduction's title (shown again from 2026-11-03) keeps a little air above its paragraph */
  #tm-bronze-mobile .tm-b-introduction .tm-b-title{margin-bottom:24px!important}
  /* the film stays edge to edge; its words and the strip sit on the margin */
  #stPhoto>.st-made{padding-left:var(--tm-edge)!important;padding-right:var(--tm-edge)!important}
  #stPhoto .tm-kozo-film .tm-film-intro{padding-left:0!important;padding-right:0!important;margin-left:0!important}
  #stPhoto .tm-kozo-film .charcoal-page{margin-left:calc(-1*var(--tm-edge))!important;margin-right:calc(-1*var(--tm-edge))!important}
  #stPhoto .cap{padding-left:var(--tm-edge)!important;padding-right:var(--tm-edge)!important;margin-left:0!important}
  #stPhoto .st-m-more{margin-left:var(--tm-edge)!important}
  #stPhoto .st-explain{margin-left:0!important;margin-right:0!important}

  #instagram h2.font-display{margin-left:var(--tm-edge)!important;text-align:left!important}
  #instagram p.font-display{margin-left:0!important;text-align:left!important}
  #instagram a[href$="tomita_jp/"]{display:flex!important;justify-content:flex-start!important}
}

/* the footer's small print reads at the standard contrast */
footer .text-\[9\.5px\],footer .text-\[9\.5px\] span{color:#5f5a51!important}
}

/* arrows that a phone draws as blue emoji squares */
@media (max-width:767px),(hover:none){.tm-arrow{display:none!important}}