/* Home, Materials & Craft (4 Nov 2026), laid out after de Gournay's showroom block: one close-up large on the left, three
   photographs of the work stacked beside it at the same total height, the title, a paragraph and an outlined button centred in
   the space to the right. On a phone: the close-up, the three in a row beneath it, then the words. */
#tm-materials{background:#f3efe7;color:#302f2a;padding:clamp(96px,9vw,140px) var(--tm-edge,24px)}
#tm-materials img{display:block;width:100%;height:100%;object-fit:cover}
#tm-materials .tm-mat-main{margin:0}
#tm-materials .tm-mat-text{text-align:center}
#tm-materials .tm-mat-text h2{margin:0 0 20px;color:#302f2a}
#tm-materials .tm-mat-text p{margin:0 auto;max-width:30em;font:400 17px/1.9 "PT Serif",Georgia,serif;color:#3c3a34}
#tm-materials .tm-mat-btn{display:inline-block;margin-top:36px;padding:15px 30px;border:1px solid #302f2a;color:#302f2a;text-decoration:none;
  font:500 11px/1 Inter,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;transition:background-color .3s,color .3s}
#tm-materials .tm-mat-btn:hover,#tm-materials .tm-mat-btn:focus-visible{background:#302f2a;color:#f3efe7}

@media (min-width:821px){
  /* the three beside the close-up are squares (user, 4 Nov 2026): each as wide as 19% of the row or a third of the window's
     height less the header and some air, whichever is smaller; the three set the row's height and the close-up fills it
     (contain:size keeps the close-up's own tall shape out of the sum) */
  #tm-materials{--mat-gap:clamp(20px,2.2vw,32px);
    --mat-s:min(calc((100vw - 2*var(--tm-edge,72px) - 2*var(--mat-gap))*.19),calc((100svh - 220px - 2*var(--mat-gap))/3));
    display:grid;grid-template-columns:minmax(0,40fr) var(--mat-s) minmax(0,41fr);column-gap:var(--mat-gap);align-items:stretch}
  #tm-materials .tm-mat-main{width:100%;align-self:stretch;contain:size}
  /* an older rule caps every image at 90vh; the close-up fills its frame instead */
  #tm-materials .tm-mat-main img{max-height:none!important}
  #tm-materials .tm-mat-subs{display:grid;grid-template-rows:repeat(3,var(--mat-s));row-gap:var(--mat-gap)}
  #tm-materials .tm-mat-subs img{aspect-ratio:1}
  #tm-materials .tm-mat-subs img{filter:grayscale(1)}
  #tm-materials .tm-mat-text{align-self:center;padding:0 clamp(16px,3vw,56px)}
  #tm-materials #tm-mat-title{font-size:clamp(22px,1.8vw,27px)!important;line-height:1.2!important}
}
@media (max-width:820px){
  #tm-materials{padding-top:72px;padding-bottom:80px}
  #tm-materials .tm-mat-main{aspect-ratio:4/5}
  #tm-materials .tm-mat-subs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
  #tm-materials .tm-mat-subs img{aspect-ratio:3/4;height:auto;filter:grayscale(1)}
  #tm-materials .tm-mat-text{margin-top:40px}
  #tm-materials #tm-mat-title{font-size:24px!important;line-height:1.2!important}
  #tm-materials .tm-mat-text p{font-size:16px;line-height:1.8}
}
/* phones already open with their own Materials & Craft block (#tm-phone-home), so this one is for tablets and computers */
@media (max-width:767px){#tm-materials{display:none}}