/* disassembled.com: the home page.
   The home page is a table. Each thing that was taken apart is a photo tile lying on it, like a print thrown on a desk.
   You can drag the tiles about. "Knoll it" lines them up in neat rows. "Mess it up" throws them again. A tap on a tile
   opens its teardown: the tile's sheet colour floods the window, and the teardown page opens on that same colour.

   The page uses the stage, the title, the counter and the toolbox from teardown.css, and adds the table and the tiles.
   home.js runs it, and tools/build.py writes the page. With no scripts the tiles are a plain grid of links. */

.home .stage{color:#fff;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:44px 44px;background-position:center top}
.home .title{margin:14px 0 4px}
.home .sub{max-width:900px;margin:0 0 6px;font-size:20px;font-weight:400}
.home .tally{background:var(--yellow);color:var(--ink)}
.home .tally b{font-size:26px}

/* a tile: a print with a white edge, the photo, and its number and name under it */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;max-width:900px;margin:22px auto 0;padding:0}
.tile{display:block;padding:8px 8px 10px;background:#fff;color:var(--ink);text-decoration:none;box-shadow:0 8px 20px rgba(0,0,0,.5);-webkit-tap-highlight-color:transparent}
.tile:visited,.tile:hover{background:#fff;color:var(--ink)}
.tile img,.tile .blank{display:block;width:100%;height:auto;background:var(--mat,#ddd)}
.tile .blank{aspect-ratio:var(--ar,1);background:repeating-linear-gradient(45deg,#ececec 0 12px,#f7f7f7 12px 24px);display:grid;place-items:center;font:400 40px/1 var(--head);color:#c9c9c9}
.tile-t{display:block;margin-top:8px;font:400 16px/1.12 var(--head);letter-spacing:.03em;text-transform:uppercase}
.tile-t b{font-weight:400;color:#8a8a8a}
.tile-n{display:block;margin-top:4px;font:700 11px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#666}
.tile:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* ---------- the table, with scripts on ---------- */
.live .home .hud{max-width:min(46vw,560px)}
.live .home .title{margin:0}
.live .home .name{font-size:clamp(30px,4.4vw,70px);line-height:.98}
.live .home .sub{margin:8px 0 0;font-size:clamp(15px,1.5vw,20px);line-height:1.3}
.live .home .tally{opacity:1;margin-top:10px}
.live .tiles{position:absolute;inset:0;display:block;max-width:none;margin:0}
.live .tile{position:absolute;left:0;top:0;width:var(--tw,160px);padding:var(--pad,8px);padding-bottom:calc(var(--pad,8px) * 1.2);touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;
  transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg)) scale(var(--k,1));will-change:transform;transition:box-shadow .2s}
.live .tile.glide{transition:transform .6s cubic-bezier(.2,.9,.3,1.06),box-shadow .2s}
.live .tile.held{cursor:grabbing;--k:1.05;box-shadow:0 24px 44px rgba(0,0,0,.6)}
.live .tile img,.live .tile .blank{height:var(--ph,160px);aspect-ratio:auto;-webkit-user-drag:none;pointer-events:none}
.live .tile-t{margin-top:calc(var(--fs,14px) * .55);height:calc(var(--fs,14px) * 1.12 * var(--lines,2));overflow:hidden;font-size:var(--fs,14px)}
.live .tile-n{margin-top:calc(var(--fs,14px) * .25);font-size:max(8px,calc(var(--fs,14px) * .68));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live .tile.nope{animation:nope .45s ease-in-out}
@keyframes nope{0%,100%{rotate:0deg}25%{rotate:-4deg}60%{rotate:3deg}}
@media (max-width:700px){
  .live .home .hud{max-width:calc(100% - 24px)}
  .live .home .name{font-size:clamp(22px,8vw,36px)}
  .live .home .sub{margin-top:5px;font-size:14px}
  .live .home .tally{margin-top:7px}
}
@media (max-height:480px){
  .live .home .name{font-size:24px}
  .live .home .sub{display:none}
}
/* the sheet colour of a tile floods the window on the way to its teardown */
.flood{position:fixed;inset:0;z-index:2000;background:var(--mat,#ddd);clip-path:inset(var(--ft,50%) var(--fr,50%) var(--fb,50%) var(--fl,50%));transition:clip-path .42s cubic-bezier(.5,0,.2,1)}
.flood.go{clip-path:inset(0)}
@media (prefers-reduced-motion:reduce){
  .live .tile.glide{transition-duration:.01s}
  .live .tile.nope{animation:none}
}