/* Swatch deck: the materials component shared by the Kuutio landing pages (Gallery, Atrium, Baia), 31 Oct 2026.
   ("i like the new way of materials but make them high quality and do it for all 3 landing pages")
   One strip per material, each a Nano Banana Pro 4K close-up of the real material (GALLERY/tools/gen_round3.py).
   PC: strips side by side, the open one widens; phone: stacked bands, the open one grows. Colours come from the page:
   --deck-ink (text on the card), --deck-card (card), --deck-muted (small caps), --deck-shade (strip shade, rgb). */
.deck{display:flex;flex-direction:column;gap:6px;--dk-ink:var(--deck-ink,#1a1b28);--dk-card:var(--deck-card,rgba(246,247,248,.95));
  --dk-muted:var(--deck-muted,#7b8491);--dk-shade:var(--deck-shade,26,27,40)}
.sw{position:relative;flex:0 0 64px;display:block;width:100%;border:0;padding:0;margin:0;cursor:pointer;overflow:hidden;text-align:left;color:#fff;
  background:#d9dcdf var(--img) center/cover no-repeat;border-radius:3px;transition:flex-basis .7s cubic-bezier(.2,.7,.2,1),flex-grow .7s cubic-bezier(.2,.7,.2,1)}
.sw::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--dk-shade),.58),rgba(var(--dk-shade),.06) 70%);transition:opacity .6s}
.sw__n{position:absolute;left:14px;top:50%;transform:translateY(-50%);z-index:1;font:500 10px/1 var(--sans,system-ui);letter-spacing:.2em;opacity:.85;transition:opacity .4s}
.sw__t{position:absolute;left:46px;top:50%;transform:translateY(-50%);z-index:1;font:400 19px/1 var(--serif,Georgia,serif);text-shadow:0 1px 10px rgba(0,0,0,.35);transition:opacity .4s;white-space:nowrap}
.sw__d{position:absolute;left:14px;right:14px;bottom:14px;z-index:1;display:grid;gap:4px;padding:14px 16px;background:var(--dk-card);color:var(--dk-ink);
  font:400 14px/1.4 var(--sans,system-ui);border-radius:2px;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.sw__d b{font:400 22px/1.1 var(--serif,Georgia,serif);color:var(--dk-ink)}
.sw__d small{font:500 10px/1.3 var(--sans,system-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--dk-muted)}
.sw.is-open{flex-basis:320px}
.sw.is-open .sw__t,.sw.is-open .sw__n{opacity:0}
.sw.is-open .sw__d{opacity:1;transform:none;transition-delay:.25s}
.sw.is-open::after{opacity:.3}
.sw:focus-visible{outline:2px solid var(--dk-ink);outline-offset:2px}
.deck__note{font-size:12px;color:var(--dk-muted);margin:14px 0 0}
@media (min-width:760px){
  .deck{flex-direction:row;height:min(70vh,620px);gap:8px}
  .sw{flex:1 1 0;min-width:0}
  .sw.is-open{flex:5.5 1 0}
  .sw::after{background:linear-gradient(0deg,rgba(var(--dk-shade),.62),rgba(var(--dk-shade),0) 55%)}
  .sw__n{left:50%;top:22px;transform:translateX(-50%)}
  .sw__t{left:50%;top:auto;bottom:26px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;font-size:20px}
  .sw__d{left:22px;right:auto;bottom:22px;max-width:380px}
}