/* Home, computers: All Wallcoverings (4 Nov 2026; first "the material book"). On black: the title alone, then a row of large
   close-ups, about three across with the next always showing at the edge, after Pierre Frey's home page; a design's name and collection
   appear over its photograph only on hover; a thin line beneath shows where in the row you are. The row scrolls (trackpad, touch),
   drags with a mouse and snaps to a card. Title face: tomita-type-*.css. Hidden on phones. */
.tm-mb{display:none}
@media (min-width:768px){
  .tm-mb{--mb-h:clamp(360px,calc(100svh - 370px),820px);--mb-w:min(40vw,calc(var(--mb-h)*11/15));
    display:block;background:#0b0a09;color:#efe8dc;padding:clamp(56px,5vw,84px) 0 clamp(48px,4.5vw,72px)}
  .tm-mb-head{padding:0 var(--tm-edge,24px);margin-bottom:clamp(24px,2.4vw,36px)}
  #tm-mb-title{margin:0;color:#f3ede2;font-size:clamp(24px,2vw,30px)!important;line-height:1.15!important}

  .tm-mb-track{display:flex;gap:clamp(14px,1.4vw,24px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    scroll-padding-left:var(--tm-edge,24px);padding:0 var(--tm-edge,24px);scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab;outline:none}
  .tm-mb-track::-webkit-scrollbar{display:none}
  .tm-mb-track.is-dragging{cursor:grabbing;scroll-snap-type:none}
  .tm-mb-track.is-dragging a{pointer-events:none}
  .tm-mb-track:focus-visible{outline:1px solid #f3ede2;outline-offset:6px}
  .tm-mb-card{position:relative;flex:0 0 var(--mb-w);height:var(--mb-h);scroll-snap-align:start;overflow:hidden;color:#fff;text-decoration:none;
    -webkit-user-drag:none;user-select:none;background:#1a1816}
  .tm-mb-ph{position:absolute;inset:0}
  .tm-mb-ph img{display:block;width:100%;height:100%;object-fit:cover;max-height:none!important;transition:scale 1.4s cubic-bezier(.33,0,.2,1)}
  .tm-mb-card:hover .tm-mb-ph img,.tm-mb-card:focus-visible .tm-mb-ph img{scale:1.04}
  /* the name and collection: only on hover (or keyboard focus), over the foot of the photograph */
  .tm-mb-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:6px;padding:56px 24px 22px;
    background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0));opacity:0;translate:0 8px;transition:opacity .5s ease,translate .5s ease;pointer-events:none}
  .tm-mb-card:hover .tm-mb-cap,.tm-mb-card:focus-visible .tm-mb-cap{opacity:1;translate:0 0}
  .tm-mb-cap b{font:400 18px/1.3 "PT Serif",Georgia,serif;color:#fff}
  .tm-mb-cap i{font:500 10.5px/1.4 Inter,Arial,sans-serif;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82)}
  .tm-mb-card:focus-visible{outline:1px solid #f3ede2;outline-offset:3px}

  /* where in the row: a thin line, the part on show drawn in */
  .tm-mb-progress{position:relative;height:1px;margin:clamp(24px,2.6vw,36px) var(--tm-edge,24px) 0;width:min(440px,30vw);background:rgba(243,237,226,.22)}
  .tm-mb-progress span{position:absolute;top:-1px;left:0;height:3px;width:20%;background:#f3ede2;transition:left .15s linear}
}
@media (prefers-reduced-motion:reduce){.tm-mb-ph img,.tm-mb-cap{transition:none}}
/* "Timeless Designs" with an outlined "All Wallcoverings" button on the right of the title row (user, 4 Nov 2026), the button drawn
   as the collections' ("Explore Hana V") in light lines on the black */
@media (min-width:768px){
  .tm-mb-head{display:flex;align-items:center;justify-content:space-between;gap:32px}
  .tm-mb-btn{display:inline-block;padding:15px 30px;border:1px solid rgba(243,237,226,.85);color:#f3ede2;text-decoration:none;white-space:nowrap;
    font:500 11px/1 Inter,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;transition:background-color .3s,color .3s}
  .tm-mb-btn:hover,.tm-mb-btn:focus-visible{background:#f3ede2;color:#0b0a09}
}

/* After Pierre Frey's home page (user, 5 Nov 2026, "as beautiful as"): the close-ups taller, filling most of the window, the first a
   little wider than the rest; a hairline beneath. Kept on black (user, 5 Nov 2026), and set 2.3cm further in from the left edge (1.3cm, then one more) than
   the page's other sections (title, row and line together; the button stays at the right edge). The photographs: sixteen raking-light
   shots from the Art Wall Legend II "Close Up" and Kozo VI "Up"/"Wave" folders, the measuring tape trimmed from the foot
   (home/opt/timeless/). */
@media (min-width:768px){
  .tm-mb{--mb-h:clamp(380px,calc(100svh - 345px),860px);--mb-w:calc(var(--mb-h)*.667);--mb-left:calc(var(--tm-edge,24px) + 2.3cm);
    padding:clamp(40px,3.6vw,64px) 0 clamp(48px,4vw,72px)}
  .tm-mb-head{margin-bottom:clamp(22px,2vw,32px);padding-left:var(--mb-left)}
  .tm-mb-track{gap:clamp(16px,1.5vw,28px);padding-left:var(--mb-left);scroll-padding-left:var(--mb-left)}
  .tm-mb-card:first-child{flex-basis:calc(var(--mb-h)*.78)}
  .tm-mb-progress{margin-top:clamp(26px,2.4vw,40px);margin-left:var(--mb-left)}
}

/* 5 Nov 2026 (user): "All Wallcoverings" right below the title, both at the left; the close-ups a little shorter so the section still
   fits the window */
@media (min-width:768px){
  .tm-mb-head{display:block}
  .tm-mb-head .tm-mb-btn{margin-top:clamp(18px,1.8vw,26px)}
  .tm-mb{--mb-h:clamp(360px,calc(100svh - 410px),800px)}
}

/* 5 Nov 2026 (user: "improve layout"): two parts, as the Washi and Hana V blocks are. On the left a narrow column holds the title,
   one line, the button under it, and the line that shows where in the row you are; on the right the close-ups run to the window's
   edge, all one width and as tall as the window allows, instead of sitting beneath a stacked heading. */
@media (min-width:768px){
  .tm-mb{--mb-pad:clamp(50px,7.4vh,92px);--mb-h:clamp(300px,calc((100svh - 2*clamp(56px,10vh,120px))*.7905),651px);   /* 5 Nov 2026, later: close-ups 7% smaller, section about 5% shorter (user) */
       /* 5 Nov 2026: 15% smaller, less space above and below (user: "too big") */
    --mb-w:calc(var(--mb-h)*.7);
    --mb-intro:clamp(300px,24vw,420px);
    display:grid!important;grid-template-columns:var(--mb-intro) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;
    column-gap:clamp(40px,4.5vw,88px);padding:var(--mb-pad) 0 var(--mb-pad) var(--mb-left)}
  .tm-mb-head{grid-column:1;grid-row:1;align-self:center;margin:0!important;padding:0!important}
  .tm-mb-lede{margin:18px 0 0;max-width:24em;font:400 15px/1.75 "PT Serif",Georgia,serif;color:rgba(239,232,220,.78)}
  .tm-mb-head .tm-mb-btn{margin-top:clamp(26px,3vw,40px)}
  .tm-mb-track{grid-column:2;grid-row:1/3;padding-left:0!important;scroll-padding-left:0!important;padding-right:var(--tm-edge,24px)}
  .tm-mb-card,.tm-mb-card:first-child{flex-basis:var(--mb-w)!important;height:var(--mb-h)}
  .tm-mb-progress{grid-column:1;grid-row:2;align-self:end;width:100%!important;margin:0!important}
}

/* Phones (user, 5 Nov 2026: "we have to improve the mobile page"): the close-ups come to phones too, on the same black, after Room
   Inspirations. The title and one line centred, as the other phone sections; then the row, one close-up across most of the screen with
   the next showing at the edge, swiped by hand; each named beneath its photograph (no hover on a phone); the line showing where in the
   row you are; the button last. */
@media (max-width:767px){
  .tm-mb{display:block;background:#0b0a09;color:#efe8dc;padding:64px 0 56px}
  .tm-mb-head{padding:0 24px;margin:0 0 28px;text-align:center}
  #tm-mb-title{margin:0;color:#f3ede2;font-size:24px!important;line-height:1.25!important}
  .tm-mb-lede{margin:14px auto 0;max-width:22em;font:400 15px/1.65 "PT Serif",Georgia,serif;color:rgba(239,232,220,.78)}
  .tm-mb-head .tm-mb-btn{display:none}
  .tm-mb-track{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-left:24px;padding:0 24px;
    scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .tm-mb-track::-webkit-scrollbar{display:none}
  .tm-mb-card{flex:0 0 74vw;scroll-snap-align:start;color:#fff;text-decoration:none}
  .tm-mb-ph{display:block;aspect-ratio:2/3;overflow:hidden;background:#1a1816}
  .tm-mb-ph img{display:block;width:100%;height:100%;object-fit:cover;max-height:none!important}
  .tm-mb-cap{display:flex;flex-direction:column;gap:4px;padding-top:12px}
  .tm-mb-cap b{font:400 15px/1.35 "PT Serif",Georgia,serif;color:#f3ede2}
  .tm-mb-cap i{font:500 10px/1.4 Inter,Arial,sans-serif;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,237,226,.6)}
  .tm-mb-progress{position:relative;height:1px;width:120px;margin:28px auto 0;background:rgba(243,237,226,.22)}
  .tm-mb-progress span{position:absolute;top:-1px;left:0;height:3px;width:20%;background:#f3ede2}
  .tm-mb::after{content:none}
}
.tm-mb-foot{display:none}
@media (max-width:767px){
  .tm-mb-foot{display:block;margin:32px 0 0;text-align:center}
  .tm-mb-btn-ph{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 30px;border:1px solid rgba(243,237,226,.85);color:#f3ede2;text-decoration:none;
    font:500 11px/1 Inter,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase}
}
/* 5 Nov 2026 (user: "too big for mobile"): the close-ups smaller on phones, about a third less, so one and a half show across */
@media (max-width:767px){
  .tm-mb-card{flex-basis:52vw}
  .tm-mb-ph{aspect-ratio:3/4}
  .tm-mb-cap b{font-size:14px}
  .tm-mb-cap i{font-size:9px;letter-spacing:.12em}
}