/* Home, "How kozo becomes washi" on a computer (3 Nov 2026): one screen. Film left (in place from the start), a small heritage
   piece right (an archive photograph and one line), the eight-photograph Materials & Craft strip below with its "Since 1923"
   paragraph beneath it; the heritage piece and the strip fade in as they are scrolled into view. Built by
   tomita-made-stage-*.js; phones keep the section as it was.
   Its own layer, declared in index.html before tomita-align, so these !important rules outrank both the 12-ID rules of the
   older Made in Japan styles and tomita-align's placement. */
@layer tomita-made-stage{
@media (min-width:821px){
  html body #stPhoto>.st-made.has-stage{display:block!important}
  html body #stPhoto>.st-made.has-stage .tm-kozo-film{display:block!important}
  html body #stPhoto>.st-made.has-stage .charcoal-page{display:none!important}

  html body .tm-made-stage{position:relative!important;display:grid!important;grid-template-columns:minmax(0,55fr) minmax(0,45fr)!important;
    grid-template-areas:"film her" "strip strip"!important;column-gap:clamp(48px,4.5vw,72px)!important;row-gap:clamp(56px,6vw,88px)!important;margin:clamp(56px,6vw,88px) var(--tm-edge,60px) 0!important}   /* room to breathe between the three pieces */
  html body .tm-made-stage .tm-ms-film-cell{grid-area:film!important;position:relative!important;aspect-ratio:16/9!important}

  /* the film fills its cell */
  html body .tm-made-stage .charcoal-film{position:absolute!important;inset:0!important;margin:0!important;padding:0!important;overflow:hidden!important;
    width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;transform:none!important}
  html body .tm-made-stage .charcoal-film video{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;
    max-width:none!important;max-height:none!important;object-fit:cover!important;transform:none!important;margin:0!important}
  html body .tm-made-stage .charcoal-film :is(.cap,.st-m-more){display:none!important}

  /* heritage, to the right of the film, sitting on the film's bottom line */
  html body .tm-made-stage .tm-ms-heritage{grid-area:her!important;align-self:end!important;translate:0 calc(20px + .9cm)!important;   /* below the film's bottom line: a touch, then another .9 cm (user, 3 Nov) */
    display:grid!important;grid-template-columns:minmax(0,46%) minmax(0,1fr)!important;
    column-gap:clamp(28px,2.4vw,40px)!important;align-items:end!important}
  html body .tm-made-stage .tm-ms-heritage img{display:block!important;width:100%!important;height:auto!important;filter:grayscale(1)!important}
  /* the titles, Heritage and Materials & Craft, above their pictures in the site's one title style (Inter capitals, 17px) */
  html body .tm-made-stage .tm-ms-k{margin:0 0 20px!important;padding:0!important;font:400 17px/1.4 Inter,Arial,sans-serif!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:#f3eee6!important}
  html body .tm-made-stage .tm-ms-heritage .tm-ms-k{grid-column:1/-1!important;align-self:start!important}
  html body .tm-made-stage .tm-ms-line{margin:0!important;text-transform:none!important;letter-spacing:0!important;font:400 15px/1.7 "PT Serif",Georgia,serif!important;color:#d8d2c7!important}
  html body .tm-made-stage .tm-ms-more{display:inline-block!important;text-transform:none!important;letter-spacing:.02em!important;margin-top:14px!important;font:italic 400 14px/1.4 "PT Serif",Georgia,serif!important;
    color:#f3eee6!important;text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:6px!important}

  /* the strip along the bottom: every photograph whole (no cropping) at one height, the row exactly as wide as the paragraph
     beneath it (--craft-w; the eight photographs together are 3.21 times as wide as they are tall, set edge to edge); the block
     sits a little left of centre, a quarter of the way from centred to the left margin */
  html body .tm-made-stage{--craft-w:min(42rem,calc(100vw - 2*var(--tm-edge,60px)));--strip-h:calc(var(--craft-w) / 3.21)}
  html body .tm-made-stage .tm-ms-craft{grid-area:strip!important;justify-self:start!important;width:var(--craft-w)!important;
    margin:0 0 0 calc((100% - var(--craft-w)) / 4)!important}
  html body .tm-made-stage .tm-bw{display:flex!important;justify-content:space-between!important;gap:0!important;overflow:hidden!important;margin:0!important;padding:0!important;position:relative!important;
    grid-area:auto!important;grid-row:auto!important;grid-column:auto!important}
  html body .tm-made-stage .tm-bw::after{display:none!important}   /* the shade that sat behind the title on the photographs */
  /* the paragraph under the strip, as wide as it, then "Our craft" */
  html body .tm-made-stage .tm-ms-craft .st-explain{display:block!important;position:static!important;max-width:none!important;width:auto!important;margin:24px 0 0!important;padding:0!important;
    opacity:1!important;transform:none!important;translate:none!important;text-align:left!important;white-space:normal!important;text-transform:none!important;letter-spacing:0!important;
    max-height:none!important;overflow:visible!important;text-shadow:none!important;font:400 15px/1.7 "PT Serif",Georgia,serif!important;color:#d8d2c7!important}
  html body .tm-made-stage .tm-bw img{flex:none!important;width:auto!important;height:var(--strip-h)!important;
    max-height:none!important;min-height:0!important;aspect-ratio:auto!important;object-fit:contain!important}

  /* the heritage piece and the strip each fade in as they come into view (the script adds .is-in); one slow fade, no movement */
  html body .tm-made-stage :is(.tm-ms-heritage,.tm-ms-craft){opacity:0!important;transition:opacity 1.4s cubic-bezier(.33,0,.2,1)!important}
  html body .tm-made-stage :is(.tm-ms-heritage,.tm-ms-craft).is-in{opacity:1!important}

  /* Version B (3 Nov 2026): the film full width, then Heritage and Materials & Craft as a pair beneath it on the film's two
     edges (40 / 60); Heritage's photograph at full column width, the strip spanning its column */
  html body .tm-made-stage{grid-template-columns:minmax(0,40fr) minmax(0,60fr)!important;grid-template-areas:"film film" "her strip"!important;
    column-gap:48px!important;row-gap:72px!important;align-items:start!important;
    --strip-h:calc(((100vw - 2*var(--tm-edge,60px) - 48px) * .6) / 3.21)!important}
  html body .tm-made-stage .tm-ms-heritage{display:block!important;translate:none!important;align-self:start!important}
  html body .tm-made-stage .tm-ms-heritage img{width:100%!important;height:auto!important;aspect-ratio:3/2;object-fit:cover!important}
  html body .tm-made-stage .tm-ms-heritage-text{margin-top:18px!important}
  html body .tm-made-stage .tm-ms-craft{justify-self:stretch!important;width:auto!important;margin:0!important}
  html body .tm-made-stage .tm-ms-craft .tm-bw{justify-content:space-between!important}
  /* one height for both pictures, eight equal slivers, and the two paragraphs on one measure and one line (4 Nov 2026:
     the photograph at 339px beside a 238px strip of uneven slivers read as two layouts side by side) */
  html body .tm-made-stage{--pair-h:clamp(260px,22vw,340px)}
  /* 4 Nov 2026: the film alone (the pair below it became the #tm-materials section) */
  html body .tm-made-stage{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"film"!important;row-gap:0!important}
  /* the title, its line and the film in one screen (user, 4 Nov 2026): the film keeps the full width but stops at the window's
     height less the header, the title and some air (it was 16:9, 891px tall on a 1728px screen); the picture is cropped to fill */
  html body #stPhoto .tm-made-stage{margin-top:40px!important}
  html body .tm-made-stage .tm-ms-film-cell{aspect-ratio:auto!important;height:min(calc((100vw - 2*var(--tm-edge,72px))*.5625),calc(100svh - 300px))!important;min-height:360px}
  html body .tm-made-stage .tm-ms-film-cell :is(.charcoal-film,.charcoal-film video,.charcoal-film img){position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;max-height:none!important}
  html body .tm-made-stage .tm-ms-heritage img{height:var(--pair-h)!important;aspect-ratio:auto!important}
  html body .tm-made-stage .tm-ms-craft .tm-bw{display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:0!important;height:var(--pair-h)!important}
  html body .tm-made-stage .tm-ms-craft .tm-bw img{width:100%!important;height:100%!important;object-fit:cover!important;min-width:0!important}
  html body .tm-made-stage :is(.tm-ms-heritage .tm-ms-line,.tm-ms-craft .st-explain){display:block!important;margin:24px 0 0!important;padding:0!important;
    max-width:32em!important;font:400 15px/1.7 "PT Serif",Georgia,serif!important;text-align:left!important}
  html body .tm-made-stage .tm-ms-more{display:inline-block!important;margin-top:16px!important}
}
}