/* Home page on a phone (3 Nov 2026): one column that reads top to bottom. The computer layouts had been squeezed onto the
   phone (pictures pushed right of an empty rail, names in a narrow side column, overlays on photographs); here every
   section follows the same few rules:
     - a title (Inter capitals, 17px) above its pictures; small labels (Inter capitals, 11px) above their words
     - pictures the full width of the text column (24px from each edge), never offset
     - body text in PT Serif 16px; links in PT Serif italic, underlined
   Its own layer, declared first in index.html, so these !important rules outrank the older stacked-ID phone rules and
   the tomita-made-stage / tomita-align layers. Only below 821px; the computer layout is untouched. */
@layer tomita-mobile{
@media (max-width:820px){
  /* ---------- Art Wall Legend II (the introduction under the hero) */
  #tm-bronze-mobile .tm-b-introduction p{margin:20px 0 0!important;padding:0!important;width:auto!important;max-width:none!important;
    font:400 16px/1.65 "PT Serif",Georgia,serif!important}
  #tm-bronze-mobile .material-story{margin:40px 24px 0!important;padding:0!important;width:auto!important}
  #tm-bronze-mobile .material-image{display:block!important;margin:0!important;width:auto!important}
  #tm-bronze-mobile .material-image .tm-b-material-open{display:block!important;width:100%!important;margin:0!important;padding:0!important;aspect-ratio:4/5;overflow:hidden!important}
  #tm-bronze-mobile .material-image .tm-b-material-open img{width:100%!important;height:100%!important;object-fit:cover!important;transform:none!important;translate:none!important;margin:0!important;position:static!important}
  #tm-bronze-mobile .material-image figcaption,#tm-bronze-mobile .room-ending{display:block!important;margin:0!important;padding:0!important;width:auto!important}
  #tm-bronze-mobile .material-image figcaption{margin-top:16px!important}
  #tm-bronze-mobile .room-ending{margin:16px 24px 0!important}
  #tm-bronze-mobile :is(.material-title,#tm-b-room-title){width:auto!important;margin:0 0 8px!important;padding:0!important;
    font:500 11px/1.4 Inter,Arial,sans-serif!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#302f2a!important}
  #tm-bronze-mobile :is(.material-image figcaption,.room-ending)>div{margin:0!important;padding:0!important;width:auto!important;grid-column:auto!important}
  #tm-bronze-mobile .material-copy,#tm-bronze-mobile .room-ending p{margin:0!important;font:400 16px/1.65 "PT Serif",Georgia,serif!important}
  #tm-bronze-mobile .room-ending p span{font:inherit!important;color:#6b655c!important}
  #tm-bronze-mobile .reading-room{margin-top:56px!important}
  #tm-bronze-mobile :is(.tm-b-material-detail,.room-ending a){min-height:44px!important;margin-top:4px!important;padding:0!important;
    font:italic 400 15px/1.5 "PT Serif",Georgia,serif!important;letter-spacing:0!important;text-transform:none!important;color:#302f2a!important;
    text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:6px!important}

  /* ---------- Washi */
  #washi-story .bw-text p.t{font:400 16px/1.65 "PT Serif",Georgia,serif!important}
  #washi-story .bw-close{display:block!important;margin-top:40px!important}
  #washi-story .bw-close .wph{width:100%!important;max-width:none!important;aspect-ratio:4/5;overflow:hidden}
  #washi-story .bw-close .wph img{width:100%!important;height:100%!important;object-fit:cover!important}
  #washi-story .bw-close figcaption{margin:16px 0 0!important;padding:0!important;width:auto!important}
  #washi-story .bw-steps{gap:56px!important}
  #washi-story .bw-step{width:auto!important;max-width:none!important;margin:0!important;align-self:stretch!important;transform:none!important}
  #washi-story .bw-step .wph{width:100%!important;aspect-ratio:4/5;overflow:hidden}
  #washi-story .bw-step .wph img{width:100%!important;height:100%!important;object-fit:cover!important}
  #washi-story .wcap b{margin:16px 0 8px!important;font:500 11px/1.4 Inter,Arial,sans-serif!important;letter-spacing:.14em!important;text-transform:uppercase!important}
  #washi-story .bw-caption-story{font:400 16px/1.65 "PT Serif",Georgia,serif!important;max-width:none!important}
  #washi-story .wcap .more{font:italic 400 15px/1.5 "PT Serif",Georgia,serif!important;text-decoration:underline!important;text-underline-offset:6px!important}

  /* ---------- Room Inspirations: the title above the rooms, not laid over a darkened photograph */
  #tm-showcase .tm-x-title{display:block!important;margin:0!important;padding:56px 24px 24px!important;background:#000;
    font:400 17px/1.4 Inter,Arial,sans-serif!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:#f3eee6!important}
  #tm-showcase .tm-x-intro{display:none!important}
  #tm-showcase{height:auto!important;min-height:0!important;max-height:none!important}
  #tm-showcase .tm-x-stage{position:relative!important;inset:auto!important;height:max(480px,calc(100svh - 168px))!important}

  /* ---------- How kozo becomes washi: the film, Heritage, then Materials & Craft, one under another
     (the stage is built by tomita-made-stage-*.js at every width now) */
  #stPhoto>.st-made.has-stage{display:block!important}
  #stPhoto>.st-made.has-stage .tm-kozo-film{display:block!important}
  #stPhoto>.st-made.has-stage .charcoal-page{display:none!important}
  #stPhoto .tm-film-intro{margin:0!important}
  #stPhoto .tm-film-intro p{font:400 16px/1.65 "PT Serif",Georgia,serif!important;margin-top:12px!important}
  .tm-made-stage{display:block!important;margin:28px 0 0!important;padding:0!important;width:auto!important}   /* the section already keeps 24px each side */
  .tm-made-stage .tm-ms-film-cell{position:relative!important;aspect-ratio:16/9;margin:0 -24px!important}
  .tm-made-stage .charcoal-film{position:absolute!important;inset:0!important;margin:0!important;padding:0!important;width:100%!important;height:100%!important;overflow:hidden!important;transform:none!important}
  .tm-made-stage .charcoal-film video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;transform:none!important;margin:0!important}
  .tm-made-stage .charcoal-film :is(.cap,.st-m-more){display:none!important}
  .tm-made-stage .tm-ms-k{margin:0 0 20px!important;font:400 17px/1.4 Inter,Arial,sans-serif!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:#f3eee6!important}
  .tm-made-stage .tm-ms-heritage{display:block!important;margin-top:64px!important}
  .tm-made-stage .tm-ms-heritage img{display:block!important;width:100%!important;height:auto!important;filter:grayscale(1)!important}
  .tm-made-stage .tm-ms-heritage-text{margin-top:16px!important}
  .tm-made-stage .tm-ms-line,.tm-made-stage .tm-ms-craft .st-explain{display:block!important;position:static!important;margin:0!important;padding:0!important;opacity:1!important;transform:none!important;
    text-align:left!important;text-transform:none!important;letter-spacing:0!important;font:400 16px/1.65 "PT Serif",Georgia,serif!important;color:#d8d2c7!important;max-width:none!important;width:auto!important}
  .tm-made-stage .tm-ms-craft{margin-top:64px!important}
  .tm-made-stage .tm-ms-craft .tm-bw{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0!important;margin:0!important;padding:0!important}
  .tm-made-stage .tm-ms-craft .tm-bw::after{display:none!important}
  .tm-made-stage .tm-ms-craft .tm-bw img{width:100%!important;height:auto!important;aspect-ratio:1/2;object-fit:cover!important;margin:0!important}
  .tm-made-stage .tm-ms-craft .st-explain{margin-top:20px!important}
  .tm-made-stage .tm-ms-more{display:inline-block!important;margin-top:12px!important;text-transform:none!important;letter-spacing:0!important;font:italic 400 15px/1.5 "PT Serif",Georgia,serif!important;color:#f3eee6!important;
    text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:6px!important}
  .tm-made-stage :is(.tm-ms-heritage,.tm-ms-craft){opacity:1!important}
}
/* small tablets: this section has no side padding of its own there, so the stage keeps the page edge itself */
@media (min-width:768px) and (max-width:820px){
  .tm-made-stage{padding:0 var(--tm-edge,33px)!important}
  .tm-made-stage .tm-ms-film-cell{margin:0 calc(-1 * var(--tm-edge,33px))!important}
}

/* Phones (second pass, 3 Nov 2026), after de Gournay's phone page: not everything belongs on a phone. The page is one pattern
   repeated: a centred title, one picture, a few words, one button. #tm-phone-home carries Art Wall Legend II, Washi,
   Materials & Craft and Heritage in that pattern; the computer versions of those (the Legend II intro, the washi steps,
   the film and stage, the Blank / With Tomita tool) are hidden here. Room Inspirations, Showroom and Instagram stay,
   shaped to the same pattern. */
@media (max-width:767px){
  #tm-bronze-mobile .editorial,#washi-story,#statement,#compare,#homeGallery{display:none!important}
  /* the header slides away on the way down and back on the way up again (user, 5 Nov 2026: "only appear on scroll up"; it had been
     held in place); the hero carries no Request a Sample button */
  #tm-b-site-header{opacity:1!important;visibility:visible!important}
  #tm-bronze-mobile .tm-m-sample{display:none!important}
  /* a white header everywhere, the hero included: dark logo and icons, a hairline beneath; the hero starts below it */
  #tm-b-site-header,#tm-b-site-header.on-paper{background:#fff!important;color:#302f2a!important;box-shadow:0 1px 0 rgba(48,47,42,.08)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  #tm-b-site-header .site-wordmark img{filter:none!important}
  #tm-b-site-header .icon-button{color:#302f2a!important}
  #tm-bronze-mobile .tm-hero-pin{padding-top:calc(64px + env(safe-area-inset-top,0px))!important;background:#fff}
  #tm-phone-home{display:block!important;padding:0 0 16px!important}
  /* the brand line, right under the hero (the computer says it in the hero's scroll veil) */
  #tm-phone-home .tm-ph-statement{margin:0!important;padding:40px 24px 0!important;font:400 20px/1.5 "PT Serif",Georgia,serif!important;letter-spacing:.01em!important;color:#302f2a!important;text-align:center!important}
  /* the block: headline, picture, words, button; 88px of air between blocks */
  .tm-ph-block{padding:88px 24px 0!important;text-align:center!important}
  .tm-ph-pic{display:block!important;margin:0 -12px!important}   /* pictures 12px from the screen's edge, the words 24px */
  .tm-ph-pic img{display:block!important;width:100%!important;height:auto!important;aspect-ratio:4/5;object-fit:cover!important}
  .tm-ph-thumbs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px -12px 0!important}
  .tm-ph-thumbs a{display:block}
  .tm-ph-thumbs img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
  .tm-ph-named a{color:#302f2a;text-decoration:none}
  .tm-ph-named span{display:block;margin-top:8px;font:500 11px/1.4 Inter,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase}
  .tm-ph-block p{max-width:34em;margin:28px auto 0!important;font:400 16px/1.7 "PT Serif",Georgia,serif!important;color:#3a3833!important;text-align:center!important}
  /* on a phone every section headline is the same serif, title case, as the All wallcoverings title (de Gournay sets its
     phone headlines this way; spaced capitals at 17px read as labels, not headlines, on a small screen) */
  .tm-ph-block h2,#tm-showcase .tm-x-title,#showroom h2.tm-sr-h,#instagram .tm-igr-title,#tm-bronze-mobile .tm-b-title{
    margin:0 0 28px!important;padding:0!important;font:400 28px/1.25 "PT Serif",Georgia,serif!important;letter-spacing:0!important;text-transform:none!important;color:#302f2a!important;text-align:center!important}
  #showroom h2.tm-sr-h{margin-bottom:4px!important}
  #showroom p.tm-sr-sub{font:italic 400 16px/1.5 "PT Serif",Georgia,serif!important;color:#6b655c!important}
  #instagram .tm-igr-title{margin-bottom:8px!important}
  :is(.tm-ph-btn,#showroom .tm-sr-link){display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:46px!important;margin-top:28px!important;padding:0 30px!important;
    border:1px solid #302f2a!important;background:none!important;color:#302f2a!important;font:400 12px/1 Inter,Arial,sans-serif!important;letter-spacing:.16em!important;
    text-transform:uppercase!important;text-decoration:none!important}
  /* Room Inspirations: its title centred like the rest */
  #tm-showcase{margin-top:88px!important}
  #tm-showcase .tm-x-title{padding:0 24px 28px!important;background:#f3eee6!important;color:#302f2a!important}
  /* Showroom: centred title, the photograph, a few words, one button */
  #showroom{padding-top:88px!important}
  #showroom .tm-sr-head,#showroom .tm-sr-head :is(h2,p){margin:0 24px 24px!important;text-align:center!important}
  #showroom .tm-sr-head :is(h2,p){margin:0!important}
  #showroom .tm-sr-head p{margin-top:6px!important}
  #showroom .tm-sr-photo{margin:0 12px -1cm!important}   /* 12px from the edge, as the blocks' pictures */
  #showroom .tm-sr-text{margin:24px 24px 0!important;text-align:center!important}
  #showroom .tm-sr-words,#showroom .tm-sr-words .tm-sr-p{text-align:center!important}
  #showroom .tm-sr-p{font:400 16px/1.65 "PT Serif",Georgia,serif!important;color:#4c4942!important}
}
}
/* the Room Inspirations title exists for phones only */
#tm-showcase .tm-x-title{display:none}
/* the phone home section exists for phones only */
#tm-phone-home{display:none}