/* Small Worlds: her personal work laid out on a desk, with filters and a light table. */

.w-filter{border-top:1px solid var(--rule-2);padding-top:10px}
.w-filter .pills{display:flex;margin-top:12px;padding:0;border:0}
.pill span{opacity:.8;margin-left:4px}
.pill[aria-pressed="true"] span{opacity:1}   /* counts stay legible, on the chosen pill too */

/* ---- the desk ---- */
.w-desk{padding-block:var(--s5) var(--s8)}
.w-grid{list-style:none;margin:0;padding:0;columns:4;column-gap:calc(var(--gutter) * 2.2)}
.w-grid li{break-inside:avoid;padding-block:var(--s4) var(--s5);transition:opacity .4s var(--paper-ease)}
.w-grid li[hidden]{display:none}
.w-obj{display:block;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:zoom-in;
  transform:rotate(var(--rot,0deg));transition:transform .6s var(--paper-ease)}
.w-obj picture{display:block}
.w-obj img{width:100%;height:auto;box-shadow:0 2px 2px rgba(36,32,28,.08),0 30px 46px -30px rgba(36,32,28,.62);transition:box-shadow .6s var(--paper-ease)}
.w-cap{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px;margin-top:12px;font-size:var(--t-small);line-height:1.4;color:var(--ink-2)}
.w-cap .mono{color:var(--accent);padding-top:.15em}
.w-obj:focus-visible{transform:rotate(0deg) translateY(-6px)}
/* hover only where a pointer can hover: on touch it sticks to the last tap */
@media (hover:hover){.w-obj:hover{transform:rotate(0deg) translateY(-6px)}}
.w-obj:hover img{box-shadow:0 2px 2px rgba(36,32,28,.08),0 44px 60px -34px rgba(36,32,28,.7)}
.w-obj:hover .w-cap span:last-child{color:var(--ink)}
.w-obj:focus-visible{outline:2px solid var(--accent);outline-offset:8px}
.w-grid li.in-f{animation:w-in .55s var(--paper-ease) both;animation-delay:calc(var(--k,0) * 35ms)}
@keyframes w-in{from{opacity:0;transform:translateY(10px)}}
.w-note{margin-top:var(--s5)}
:root[data-theme="blueprint"] .w-obj img{box-shadow:0 1px 0 rgba(0,0,0,.3),0 30px 50px -26px rgba(0,0,0,.75)}
@media (prefers-color-scheme:dark){:root:not([data-theme="day"]) .w-obj img{box-shadow:0 1px 0 rgba(0,0,0,.3),0 30px 50px -26px rgba(0,0,0,.75)}}
@media (max-width:1099px){.w-grid{columns:3}}
@media (max-width:599px){.w-grid{columns:2;column-gap:var(--gutter)}.w-cap{grid-template-columns:22px minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.w-obj,.w-grid li.in-f{transition:none;animation:none}}

/* ---- the light table ---- */
.lt{position:fixed;inset:0;overscroll-behavior:contain;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:#141210;color:#EDE8DF;display:none;grid-template-rows:minmax(0,1fr) auto}
.lt[open]{display:grid;animation:lt-in .35s var(--paper-ease)}
.lt::backdrop{background:rgba(20,18,16,.6)}
@keyframes lt-in{from{opacity:0}}
.lt-stage{display:grid;place-items:center;padding:clamp(16px,4vw,56px) clamp(16px,4vw,56px) 0;min-height:0}
.lt-stage picture{display:contents}
.lt-stage img{max-width:100%;max-height:calc(100 * var(--svh) - 120px);width:auto;height:auto;object-fit:contain;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);animation:lt-img .45s var(--paper-ease)}
@keyframes lt-img{from{opacity:0;transform:scale(.985)}}
.lt-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px var(--s5);padding:18px clamp(16px,4vw,56px) max(18px,env(safe-area-inset-bottom))}
.lt-cap{display:flex;gap:16px;align-items:baseline;font:400 var(--t-body)/1.35 var(--serif)}
.lt-cap .mono{color:#F2A5A0}
.lt-nav{display:flex;gap:6px}
.lt-nav button{background:none;border:1px solid rgba(237,232,223,.28);border-radius:999px;padding:10px 14px 9px;color:#EDE8DF;cursor:pointer;transition:border-color .3s,color .3s}
.lt-nav button:hover{border-color:#F2A5A0;color:#F2A5A0}
.lt-nav button:focus-visible{outline:2px solid #F2A5A0;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.lt[open],.lt-stage img{animation:none}}