/* Materials & Craft (rebuilt again 5 Nov 2026: "simplicity ... a carefully, deliberately constructed page"). Nothing new: every part is
   one of the home page's own, with its measurements.
     the opening      the eight black-and-white photographs of the work as one screen, the words centred beneath
     Kozo, Kingin     as Washi on the home page: the close-up large, three black-and-white squares of the work (as the Materials &
                      Craft slide), the words centred; one outlined button
     Kiri, Ori        as Hana V: the words on one side, one photograph on the other
     the close        centred words and one button
   Headline face in the tomita-type layer (declared first in <head>), so the site's older heading rules yield to it. */

.tm-craft{--paper:#f3efe7;--ink:#2a1f18;--text:#3c3a34;--line:#302f2a;--gap:clamp(20px,2.2vw,32px);--h:calc(100svh - 220px);
  background:var(--paper);color:var(--text)}
.tm-craft img{display:block;width:100%;height:100%;object-fit:cover;max-height:none}
.tm-craft a{color:inherit;text-decoration:none}
@layer tomita-type{
  .tm-craft h1.cr-h,.tm-craft h2.cr-h{font-family:"Cormorant Garamond","Playfair Display",Georgia,serif!important;font-weight:500!important;font-style:normal!important;
    text-transform:none!important;letter-spacing:0!important;font-size-adjust:.44!important;line-height:1.2!important}
}
/* outside the layer: a layered rule without !important yields to any plain one, so spacing and colour live here */
.tm-craft h1.cr-h,.tm-craft h2.cr-h{margin:0 0 20px;color:var(--ink)}
.tm-craft h1.cr-h{font-size:clamp(26px,2.2vw,34px)!important}
.tm-craft h2.cr-h{font-size:clamp(22px,1.8vw,27px)!important}
.tm-craft .cr-label{margin:0 0 18px;font:500 11px/1.4 Inter,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#6b655c}
.tm-craft .cr-p{margin:0 auto;max-width:30em;font:400 17px/1.9 "PT Serif",Georgia,serif;color:var(--text)}
.tm-craft .cr-btn{display:inline-block;margin-top:36px;padding:15px 30px;border:1px solid var(--line);color:var(--line);
  font:500 11px/1 Inter,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;transition:background-color .3s,color .3s}
.tm-craft .cr-btn:hover,.tm-craft .cr-btn:focus-visible{background:var(--line);color:var(--paper)}
.tm-craft .cr-words{text-align:center}

/* the opening: the eight black-and-white photographs of the work stand side by side as panels of a screen (the October home page's
   "Made in Japan" byobu, flat), the words centred beneath */
.cr-open{padding:clamp(40px,4vw,72px) var(--tm-edge,24px) 0;text-align:center}
/* the eight panels meet edge to edge as one image, and the words sit at its centre in white over a soft veil (user, 5 Nov 2026) */
.cr-screen{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:0;margin:0 0 clamp(24px,3vw,48px)}
.cr-panel{aspect-ratio:2/5;overflow:hidden;background:#1d1a17}
.cr-panel img{filter:grayscale(1)}
.cr-open-words{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;padding:24px;
  background:radial-gradient(ellipse 58% 62% at 50% 50%,rgba(14,11,9,.62),rgba(14,11,9,.34) 70%,rgba(14,11,9,.22))}
.tm-craft .cr-open-words .cr-label{color:rgba(255,255,255,.82)}
.tm-craft .cr-open-words h1.cr-h{color:#fff}
.tm-craft .cr-open-words .cr-p{color:rgba(255,255,255,.88)}

/* the four materials */
.cr-m{display:grid;align-items:stretch;column-gap:var(--gap);padding:clamp(80px,8vw,130px) var(--tm-edge,24px)}
.cr-m .cr-words{align-self:center;padding:0 clamp(16px,3vw,56px)}
.cr-m .cr-main{margin:0;overflow:hidden;background:#ebe4d8}
.cr-m .cr-main img{transition:scale 1.2s cubic-bezier(.33,0,.2,1)}
.cr-m .cr-main:hover img{scale:1.03}
@media (min-width:768px){
  /* as Washi: close-up | three squares | words, the squares setting the height */
  .cr-m.is-three{--s:min(calc((100vw - 2*var(--tm-edge,72px) - 2*var(--gap))*.19),calc((var(--h) - 2*var(--gap))/3));
    grid-template-columns:minmax(0,40fr) var(--s) minmax(0,41fr)}
  .cr-m.is-three .cr-main{contain:size}
  .cr-subs{display:grid;grid-template-rows:repeat(3,var(--s));row-gap:var(--gap);margin:0}
  .cr-subs img{aspect-ratio:1;filter:grayscale(1)}
  /* as Hana V: words | photograph, the photograph in its own shape, as tall as the window allows */
  .cr-m.is-one{grid-template-columns:minmax(0,1fr) min(calc(var(--h)*.8),48vw);column-gap:clamp(48px,6vw,120px);padding-top:clamp(40px,4vw,72px)}
  .cr-m.is-one .cr-main{aspect-ratio:4/5;align-self:center}
  .cr-m.is-one.is-left{grid-template-columns:min(calc(var(--h)*.8),48vw) minmax(0,1fr)}
  .cr-m.is-one.is-left .cr-main{order:-1}
}

/* the close */
.cr-close{padding:clamp(96px,10vw,160px) var(--tm-edge,24px);text-align:center}

/* arrival: the words rise once, as on the home page; with motion turned down they are simply there */
@keyframes cr-up{from{opacity:0;translate:0 18px}}
html.cr-motion .tm-craft [data-cr]:not(.is-in) :is(.cr-rv,.cr-panel){opacity:0}
html.cr-motion .tm-craft [data-cr].is-in .cr-panel{animation:cr-up 1.2s cubic-bezier(.25,0,.2,1) calc(var(--d,0) * 1ms) backwards}
html.cr-motion .tm-craft [data-cr].is-in .cr-rv{animation:cr-up 1s cubic-bezier(.25,0,.2,1) calc(var(--d,0) * 1ms) backwards}
@media (prefers-reduced-motion:reduce){.tm-craft *{animation:none!important;transition:none!important}}

/* phones: as the phone home page's blocks, the photograph first, then the words centred */
@media (max-width:767px){
  .cr-open{padding:24px 12px 8px}
  .tm-craft h1.cr-h{font-size:28px!important}
  .tm-craft h2.cr-h{font-size:24px!important}
  .tm-craft .cr-p{font-size:16px;line-height:1.75}
  .cr-m{grid-template-columns:1fr;row-gap:12px;padding:56px 12px 24px}
  .cr-m .cr-main{aspect-ratio:4/5;order:-1}   /* the photograph first in every block, as on the phone home page */
  .cr-subs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0}
  .cr-subs img{aspect-ratio:1;filter:grayscale(1)}
  .cr-m .cr-words{padding:24px 12px 0}
  .cr-screen{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-bottom:16px}
  .cr-open-words{padding:20px}
  .cr-close{padding:72px 24px 88px}
}