/* ===========================================================================
   TASTEPACK WALL — the 19 prototypes of the shop, bare on the ground, a few
   screens awake at a time. Home only (index.html, fr.html); the block itself is
   written by scripts/build-tastepack-wall.py. Class prefix .tp-* only: ll.js's
   peek and lightbox listen to .item / .mq / .tile.
   =========================================================================== */
.tp .sec-head{margin-bottom:clamp(32px,5vh,48px)}
.tp .sec-head h2{max-width:22ch;margin-inline:auto}

/* the wall: wider than the 1120 column, the house gutter on each side, capped at 1328 */
.tp-wall{width:min(calc(100% - 2 * var(--gut)),1328px);margin-inline:auto;container-type:inline-size}
.tp-wall.is-m{display:none}
/* row height from the wall's own width, so the widest row fills it exactly (K and C written by the build) */
.tp-wall.is-d{--H:calc((100cqw - var(--C)) / var(--K));display:flex;flex-direction:column;align-items:center;gap:14px}
.tp-row{display:flex;justify-content:center;align-items:center;gap:14px;height:var(--H)}

/* a stack keeps its windows the same width, whatever their aspects */
.tp-stack{display:flex;flex-direction:column;justify-content:center;gap:12px;height:100%;
  width:calc((var(--H) - var(--sg)) * var(--s))}
.tp-stack .tp-t{width:100%;height:auto}

/* a tile: the device itself, no card, no border, no tint */
.tp-t{position:relative;display:block;flex:none;height:100%;aspect-ratio:var(--ar);border-radius:6px;
  transition:transform .45s var(--ease);outline:none}
.tp-s{position:relative;display:block;width:100%;height:100%}
.tp-s img,.tp-s video{position:absolute;inset:0;width:100%;height:100%;display:block}
.tp-s img{object-fit:contain}
/* the clip sits inside the still's own silhouette: same box, its own proportions, the shop's mask */
.tp-s video{object-fit:contain;opacity:0;transition:opacity .16s linear;
  -webkit-mask:var(--mask) 0 0 / 100% 100% no-repeat;mask:var(--mask) 0 0 / 100% 100% no-repeat}
.tp-s video.on{opacity:1}

/* the only light added: a neutral LED floor under a live screen, the hero's 4.5px dot matrix, static */
.tp-t::after{content:"";position:absolute;left:-12%;right:-12%;bottom:-16px;height:34px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.14),transparent 70%);opacity:0;
  transition:opacity .9s var(--ease);
  -webkit-mask:radial-gradient(circle at 50% 50%, #000 40%, transparent 46%) 0 0 / 4.5px 4.5px;
          mask:radial-gradient(circle at 50% 50%, #000 40%, transparent 46%) 0 0 / 4.5px 4.5px}
.tp-t.is-live::after{opacity:1}
.tp-stack .tp-t::after{display:none}
.ll-lite .tp-t::after{display:none}

/* the name, on hover / focus only (and on the brand's other surfaces); Escape dismisses it */
.tp-chip{position:absolute;left:50%;bottom:10px;z-index:2;transform:translate(-50%,6px);opacity:0;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:1px;width:max-content;max-width:min(240px,180%);
  padding:7px 12px 8px;border-radius:12px;text-align:center;
  background:rgba(16,16,19,.92);box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.1), 0 12px 28px -14px #000;
  transition:opacity .3s var(--ease),transform .45s var(--ease)}
.tp-chip b{font-size:12.5px;font-weight:500;color:var(--ink);white-space:nowrap}
.tp-chip span{font-size:11.5px;color:var(--ink-2);line-height:1.3}
.tp-stack .tp-chip{bottom:50%;transform:translate(-50%,calc(50% + 6px))}
.tp-t.is-named .tp-chip{opacity:1;transform:translate(-50%,0)}
.tp-stack .tp-t.is-named .tp-chip{transform:translate(-50%,50%)}
/* the chip of the tile under the pointer can be hovered where it overflows (it belongs to the link) */
.tp-t.is-named:not(.is-sib) .tp-chip{pointer-events:auto}
.tp-t.is-sib .tp-chip span{display:none}

@media(hover:hover) and (pointer:fine){
  .tp-t:hover{transform:translateY(-4px)}
}
.tp-t:focus-visible{transform:translateY(-4px)}
.tp-t:focus-visible .tp-s{outline:2px solid var(--ink);outline-offset:4px;border-radius:8px}

/* the foot: what is in it, the door, the pass, the way back to freelance */
.tp-foot{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:28px}
.tp-foot .lab{text-wrap:balance}
.tp-tap{display:none;margin-top:10px;font-size:var(--t-small);color:var(--ink-2)}
.tp-acts{display:flex;align-items:center;gap:10px;margin-top:20px}
.tp-note{margin-top:18px;font-size:var(--t-small);color:var(--ink-2);max-width:58ch;text-wrap:pretty}
.tp-note + .tp-note{margin-top:8px}
.tp-note a{white-space:nowrap;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.3);transition:text-decoration-color .3s var(--ease)}
.tp-note a:hover{text-decoration-color:var(--ink)}
@media(hover:none){.tp-tap{display:block}}

/* below 900: the phones in 2 x 5, then the brands x their surfaces */
@media(max-width:899px){
  .tp-wall.is-d{display:none}
  .tp-wall.is-m{display:flex;flex-direction:column;gap:16px;width:min(calc(100% - 2 * var(--gut)),560px)}
  .tp-phones{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px 8px}
  .tp-wins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px;align-items:center}
  .tp-wall.is-m .tp-t{width:100%;height:auto}
  .tp-wins .tp-t[data-kind="dash"]{grid-column:1 / -1;margin-top:4px}
  .tp-wall.is-m .tp-chip{display:none}
  .tp-t::after{bottom:-10px;height:22px}
}
@media(max-width:640px){
  .tp-acts{width:100%;max-width:340px}
  .tp-acts .btn{flex:1;justify-content:center}
}

@media(prefers-reduced-motion:reduce){
  .tp-t,.tp-chip{transition:none}
  .tp-t::after{display:none}
}

/* the door in the hero, under the two buttons: three real screens, one line, down to the wall.
   One light runs slowly round its glass rim (the house's silver), the band of light crosses it on hover. */
@property --tp-rim{syntax:"<angle>";inherits:false;initial-value:0deg}
.tp-door{position:relative;display:inline-flex;align-items:center;gap:14px;margin-top:26px;padding:6px 6px 6px 18px;
  border-radius:var(--r-pill);font-size:14px;font-weight:500;letter-spacing:-.005em;color:var(--ink);isolation:isolate;
  background:linear-gradient(180deg,var(--glass-hi),transparent 46%),var(--glass-bg);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-border), var(--glass-shadow);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.tp-door::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%);background-size:280% 100%;background-position:130% 0}
.tp-door::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--tp-rim),transparent 0 62%,rgba(255,255,255,.75) 72%,transparent 82% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:tp-rim 7s linear infinite}
@keyframes tp-rim{to{--tp-rim:360deg}}
.tp-door:hover{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px rgba(255,255,255,.22), 0 18px 36px -20px rgba(0,0,0,.95)}
.tp-door:hover::before{opacity:1;animation:sheen .85s var(--ease) forwards}
/* the screens: two phones and a window in front, they open a little on hover */
.tp-door-s{display:flex;align-items:center;height:40px}
.tp-door-s img{display:block;height:38px;width:auto;filter:drop-shadow(0 5px 10px rgba(0,0,0,.75));transition:transform .55s var(--ease)}
.tp-door-s img:nth-child(2){height:28px;margin-inline:-10px;position:relative;z-index:1}
.tp-door-s img:first-child{transform:rotate(-4deg)}
.tp-door-s img:last-child{transform:rotate(4deg)}
.tp-door:hover .tp-door-s img:first-child{transform:translateX(-4px) rotate(-7deg)}
.tp-door:hover .tp-door-s img:last-child{transform:translateX(4px) rotate(7deg)}
.tp-door:hover .tp-door-s img:nth-child(2){transform:scale(1.06)}
.tp-door-go{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;flex:none;
  background:var(--surface-2);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  transition:background .35s var(--ease),color .35s var(--ease)}
.tp-door-go svg{width:13px;height:13px;transition:transform .45s var(--ease)}
.tp-door:hover .tp-door-go{background:var(--ink);color:#0A0A0C}
.tp-door:hover .tp-door-go svg{transform:translateY(2px)}
.ll-lite .tp-door::after{display:none}
@media(prefers-reduced-motion:reduce){.tp-door::after{animation:none}.tp-door-s img{transition:none}}
/* on a phone: the line alone */
@media(max-width:560px){
  .tp-door{gap:12px;padding:6px 6px 6px 18px;font-size:13px}
  .tp-door-s{display:none}
}