/* ------------------------------------------------------------------
   Playground — List view (Figma 1356:18576). Normal scrolling page.
------------------------------------------------------------------- */
.lv-body { background: #fff; }

.lv {
  max-width: var(--page);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 389px minmax(0, 1129px);
  padding: 143px var(--gutter) 160px;
  align-items: start;
}

/* ---------- sidebar ---------- */
.lv-side {
  position: sticky;
  top: 143px;
  display: flex;
  flex-direction: column;
  gap: 29px;
  width: 374px;
}
.lv-side__logo {
  width: 128px;
  background: #f5f5f5; /* same grey as the logo frames, so the circle is filled edge to edge */
  height: 128px;
  display: grid;
  place-items: center;
  border: 1.6px solid #b5b0af;
  border-radius: 80px;
  overflow: hidden;
}
.lv-side__logo-in { position: relative; width: 128px; height: 94.933px; overflow: hidden; border-radius: 3.24px; }
.lv-side__title { display: flex; flex-direction: column; gap: 8px; }
.lv-side__title h1 { font-size: 28px; font-weight: 400; letter-spacing: -0.01em; }
.lv-side__title p { font-size: 14px; letter-spacing: -0.01em; color: var(--grey); }

/* filters — Figma: hover → grey (Dissolve 300ms ease-out), clicked → filled box + medium weight */
.lv-checks { display: flex; flex-direction: column; gap: 12px; }
.lv-check {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--black);
  cursor: pointer;
  transition: color .3s cubic-bezier(0, 0, .58, 1);
}
.lv-check input { position: absolute; opacity: 0; pointer-events: none; }
.lv-check__box {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1.2px solid #b5b0af;
  border-radius: 2px;
  background: #fff;
  transition: background-color .3s cubic-bezier(0, 0, .58, 1);
}
.lv-check__box img { position: absolute; inset: -1.2px; width: 16px; height: 16px; opacity: 0; transition: opacity .3s cubic-bezier(0, 0, .58, 1); }
.lv-check:hover { color: #b5b0af; }
.lv-check input:checked ~ .lv-check__label { font-weight: 500; }
.lv-check input:checked ~ .lv-check__box { background: #b5b0af; }
.lv-check input:checked ~ .lv-check__box img { opacity: 1; }
.lv-check:hover input:checked ~ .lv-check__label { color: var(--grey); }
.lv-check input:focus-visible ~ .lv-check__box { outline: 2px solid var(--black); outline-offset: 2px; }

.lv-back { display: inline-flex; align-items: center; gap: 8px; width: max-content; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.lv-back__icon { position: relative; width: 24px; height: 24px; }
.lv-back__icon img { position: absolute; width: 15px; height: 18.7px; }
.lv-back__icon .a { left: 5px; top: 5px; }
.lv-back__icon .b { left: 5px; top: 1px; transform: rotate(180deg); }
.lv-back:hover .lv-back__icon { animation: lv-spin .6s cubic-bezier(.4, 0, .2, 1); }
@keyframes lv-spin { to { transform: rotate(360deg); } }

/* ---------- grid ---------- */
.lv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 360px));
  column-gap: 24px;
  row-gap: 24px;
  justify-content: space-between;
}
.lv-tile { margin: 0; display: flex; flex-direction: column; }
.lv-tile[hidden] { display: none; }
/* Figma: hover → caption appears (Dissolve 300ms ease-out) */
.lv-tile__cap {
  height: 19px;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--black);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s cubic-bezier(0, 0, .58, 1);
}
.lv-tile:hover .lv-tile__cap { opacity: 1; }
.lv-tile__art { position: relative; aspect-ratio: 1; container-type: inline-size; }
/* iMac mockups read a little small next to the other objects — scale the whole artwork
   (screen video, stickers and floating objects included) up 10% from its centre */
.lv-tile__art--imac { scale: 1.1; }
.lv-tile__art > img { width: 100%; height: 100%; }
.lv-tile__art > img.lv-tile__type { position: absolute; width: auto; height: auto; pointer-events: none; }   /* the screen's words as vectors, sharp at any size */
.lv-tile__screen { position: absolute; object-fit: cover; background: #000; }

/* tile "06": stickers pop on one after another (Figma Motion, 2s loop) */
.lv-st {
  position: absolute;
  max-width: none;
  opacity: 0;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* tile "11": objects float gently (Figma Motion, 2s); hover → enlarged object + label */
.lv-obj { position: absolute; display: block; cursor: default; }
.lv-obj img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.lv-obj__base {
  animation: 2s linear infinite alternate;
  transition: opacity .35s ease-out;
}
.lv-obj__hover {
  opacity: 0;
  transform: scale(.9);
  transform-origin: 30% 40%;
  transition: opacity .35s ease-out, transform 1.02s var(--gentle, cubic-bezier(.2, 1.2, .3, 1));
}
.lv-obj:hover .lv-obj__base { opacity: 0; }
.lv-obj:hover .lv-obj__hover { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lv-st { animation: none !important; opacity: 1; }
  .lv-obj__base { animation: none !important; }
}

/* ---------- New Message ---------- */
.lv-msg {
  position: fixed;
  z-index: 30;
  left: max(54px, calc((100vw - var(--page)) / 2 + 54px));
  bottom: 123px;
  width: 424.8px;
  filter: drop-shadow(0 5.4px 4.5px rgba(0, 0, 0, .15)) drop-shadow(0 1.8px 1.35px rgba(0, 0, 0, .3));
}
.lv-msg[hidden] { display: none; }
.lv-msg__win { will-change: clip-path, transform; }
.lv-msg__title {
  height: 42.3px;
  display: flex;
  align-items: center;
  gap: 12.6px;
  padding: 0 18.9px;
  border: .9px solid #b5b0af;
  border-bottom: 0;
  border-radius: 10.8px 10.8px 0 0;
  background: linear-gradient(#6697ee, #2c68d8);
  color: #fff;
}
.lv-msg__title h2 { font-size: 14.4px; font-weight: 500; letter-spacing: -0.01em; }
.lv-msg__ctrl { display: flex; align-items: center; gap: 7.6px; padding: 0 7.2px; }
.lv-msg__ctrl > * { width: 12.6px; height: 12.6px; border-radius: 50%; border: .45px solid rgba(0, 0, 0, .2); background: #d2d2d2; transition: filter .15s ease-out; }
.lv-msg__ctrl .is-close { background: #ff5f57; cursor: pointer; }
.lv-msg__ctrl .is-close:hover { filter: brightness(.82); }
.lv-msg__body {
  display: flex;
  gap: 14px;
  padding: 19px 22px 20px;
  background: #f8f8f8;
  border: .9px solid #b5b0af;
  border-radius: 0 0 10.8px 10.8px;
}
/* 63.9px avatar whose image carries its own soft shadow (drawn 80.1px, overhanging the box) */
.lv-msg__face { flex: none; width: 80.1px; height: 80.1px; margin: -6.3px -8.1px -9.9px -8.1px; }
.lv-msg__text { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; font-size: 16px; letter-spacing: -0.01em; color: var(--black); }
.lv-msg__from { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; }
.lv-msg__emoji { text-shadow: 0 1px 3px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .3); }
.lv-msg__who { font-weight: 500; margin-bottom: 3px; }

.lv-mail {
  position: fixed;
  z-index: 31;
  left: max(54px, calc((100vw - var(--page)) / 2 + 54px));
  bottom: 47px;
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  border: 1px solid #b5b0af;
  border-radius: 100px;
  background: #f8f8f8;
  font-size: 24px;
  line-height: 1;
  text-align: center;
  filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .15)) drop-shadow(0 2px 1.5px rgba(0, 0, 0, .3));
  transition: background-color .15s ease-out;
}
.lv-mail:hover { background: #ececec; }
/* unread indicator */
.lv-mail__dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ff3b30;
  border: 2px solid #f8f8f8;
  transform: scale(0);
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.lv-mail.has-unread .lv-mail__dot { transform: scale(1); }

/* ---------- smaller screens ---------- */
@media (max-width: 1500px) {
  .lv { grid-template-columns: 300px minmax(0, 1fr); }
  .lv-side { width: 280px; }
}
@media (max-width: 1000px) {
  .lv { grid-template-columns: 1fr; padding-top: 120px; gap: 48px; }
  .lv-side { position: static; width: auto; }
  .lv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv-msg { width: min(424.8px, calc(100vw - 32px)); left: 16px; }
  .lv-mail { left: 16px; }
}

/* nav: PLAYGROUND is the active link here (the home page pins the active width for "HOME") */
.lv-body .nav__link.is-active { width: auto; }

/* ---------- generated from Figma get_motion_context ---------- */
@keyframes lv-st-9051-o{0%{opacity:0}4.8%{opacity:0;animation-timing-function:ease-out}13.2%{opacity:1}100%{opacity:1}}
@keyframes lv-st-9051-t{0%{rotate:0.022rad;scale:1.051}4.8%{rotate:0.022rad;scale:1.051;animation-timing-function:cubic-bezier(0.22, 1, 0.36, 1)}30%{rotate:0rad;scale:1}100%{rotate:0rad;scale:1}}
.lv-st--9051{animation-name:lv-st-9051-o,lv-st-9051-t}
@keyframes lv-st-9110-o{0%{opacity:0}71.226%{opacity:0;animation-timing-function:ease-out}79.626%{opacity:1}100%{opacity:1}}
@keyframes lv-st-9110-t{0%{rotate:0.024rad;scale:1.051}71.226%{rotate:0.024rad;scale:1.051;animation-timing-function:cubic-bezier(0.22, 1, 0.36, 1)}96.426%{rotate:0rad;scale:1}100%{rotate:0rad;scale:1}}
.lv-st--9110{animation-name:lv-st-9110-o,lv-st-9110-t}
@keyframes lv-st-9121-o{0%{opacity:0}31.3%{opacity:0;animation-timing-function:ease-out}39.7%{opacity:1}100%{opacity:1}}
@keyframes lv-st-9121-t{0%{rotate:-0.034rad;scale:1.058}31.3%{rotate:-0.034rad;scale:1.058;animation-timing-function:cubic-bezier(0.22, 1, 0.36, 1)}56.5%{rotate:0rad;scale:1}100%{rotate:0rad;scale:1}}
.lv-st--9121{animation-name:lv-st-9121-o,lv-st-9121-t}
@keyframes lv-st-9134-o{0%{opacity:0}65.268%{opacity:0;animation-timing-function:ease-out}73.668%{opacity:1}100%{opacity:1}}
@keyframes lv-st-9134-t{0%{rotate:0.038rad;scale:1.055}65.268%{rotate:0.038rad;scale:1.055;animation-timing-function:cubic-bezier(0.22, 1, 0.36, 1)}90.468%{rotate:0rad;scale:1}100%{rotate:0rad;scale:1}}
.lv-st--9134{animation-name:lv-st-9134-o,lv-st-9134-t}
@keyframes lv-st-9138-o{0%{opacity:0}75.852%{opacity:0;animation-timing-function:ease-out}84.252%{opacity:1}100%{opacity:1}}
@keyframes lv-st-9138-t{0%{rotate:0.03rad;scale:1.045}75.852%{rotate:0.03rad;scale:1.045;animation-timing-function:cubic-bezier(0.22, 1, 0.36, 1)}100%{rotate:0rad;scale:1}}
.lv-st--9138{animation-name:lv-st-9138-o,lv-st-9138-t}
@keyframes lv-st-9152-o{0%{opacity:0}25.786%{opacity:0;animation-timing-function:ease-out}34.186%{opacity:1}100%{opacity:1}}
@keyframes lv-st-9152-t{0%{rotate:0.026rad;scale:1.056}25.786%{rotate:0.026rad;scale:1.056;animation-timing-function:cubic-bezier(0.22, 1, 0.36, 1)}50.986%{rotate:0rad;scale:1}100%{rotate:0rad;scale:1}}
.lv-st--9152{animation-name:lv-st-9152-o,lv-st-9152-t}
@keyframes lv-st-9159-o{0%{opacity:0}59.711%{opacity:0;animation-timing-function:ease-out}68.111%{opacity:1}100%{opacity:1}}
@keyframes lv-st-9159-t{0%{rotate:-0.027rad;scale:1.061}59.711%{rotate:-0.027rad;scale:1.061;animation-timing-function:cubic-bezier(0.22, 1, 0.36, 1)}84.911%{rotate:0rad;scale:1}100%{rotate:0rad;scale:1}}
.lv-st--9159{animation-name:lv-st-9159-o,lv-st-9159-t}
@keyframes lv-st-9179-o{0%{opacity:0}10.059%{opacity:0;animation-timing-function:ease-out}18.459%{opacity:1}100%{opacity:1}}
@keyframes lv-st-9179-t{0%{rotate:0.03rad;scale:1.045}10.059%{rotate:0.03rad;scale:1.045;animation-timing-function:cubic-bezier(0.22, 1, 0.36, 1)}35.259%{rotate:0rad;scale:1}100%{rotate:0rad;scale:1}}
.lv-st--9179{animation-name:lv-st-9179-o,lv-st-9179-t}
@keyframes lv-st-9202-o{0%{opacity:0}53.794%{opacity:0;animation-timing-function:ease-out}62.194%{opacity:1}100%{opacity:1}}
@keyframes lv-st-9202-t{0%{rotate:-0.038rad;scale:1.067}53.794%{rotate:-0.038rad;scale:1.067;animation-timing-function:cubic-bezier(0.22, 1, 0.36, 1)}78.994%{rotate:0rad;scale:1}100%{rotate:0rad;scale:1}}
.lv-st--9202{animation-name:lv-st-9202-o,lv-st-9202-t}
@keyframes lv-st-9211-o{0%{opacity:0}36.546%{opacity:0;animation-timing-function:ease-out}44.946%{opacity:1}100%{opacity:1}}
@keyframes lv-st-9211-t{0%{rotate:-0.029rad;scale:1.046}36.546%{rotate:-0.029rad;scale:1.046;animation-timing-function:cubic-bezier(0.22, 1, 0.36, 1)}61.746%{rotate:0rad;scale:1}100%{rotate:0rad;scale:1}}
.lv-st--9211{animation-name:lv-st-9211-o,lv-st-9211-t}
@keyframes lv-st-9269-o{0%{opacity:0}14.89%{opacity:0;animation-timing-function:ease-out}23.29%{opacity:1}100%{opacity:1}}
@keyframes lv-st-9269-t{0%{rotate:0.036rad;scale:1.047}14.89%{rotate:0.036rad;scale:1.047;animation-timing-function:cubic-bezier(0.22, 1, 0.36, 1)}40.09%{rotate:0rad;scale:1}100%{rotate:0rad;scale:1}}
.lv-st--9269{animation-name:lv-st-9269-o,lv-st-9269-t}
@keyframes lv-st-9272-o{0%{opacity:0}80.937%{opacity:0;animation-timing-function:ease-out}89.337%{opacity:1}100%{opacity:1}}
@keyframes lv-st-9272-t{0%{rotate:0.018rad;scale:1.059}80.937%{rotate:0.018rad;scale:1.059;animation-timing-function:cubic-bezier(0.22, 1, 0.36, 1)}100%{rotate:0rad;scale:1}}
.lv-st--9272{animation-name:lv-st-9272-o,lv-st-9272-t}
@keyframes lv-st-9294-o{0%{opacity:0}20.151%{opacity:0;animation-timing-function:ease-out}28.551%{opacity:1}100%{opacity:1}}
@keyframes lv-st-9294-t{0%{rotate:0.029rad;scale:1.049}20.151%{rotate:0.029rad;scale:1.049;animation-timing-function:cubic-bezier(0.22, 1, 0.36, 1)}45.351%{rotate:0rad;scale:1}100%{rotate:0rad;scale:1}}
.lv-st--9294{animation-name:lv-st-9294-o,lv-st-9294-t}
@keyframes lv-st-9307-o{0%{opacity:0}42.192%{opacity:0;animation-timing-function:ease-out}50.592%{opacity:1}100%{opacity:1}}
@keyframes lv-st-9307-t{0%{rotate:-0.039rad;scale:1.055}42.192%{rotate:-0.039rad;scale:1.055;animation-timing-function:cubic-bezier(0.22, 1, 0.36, 1)}67.392%{rotate:0rad;scale:1}100%{rotate:0rad;scale:1}}
.lv-st--9307{animation-name:lv-st-9307-o,lv-st-9307-t}
@keyframes lv-st-9347-o{0%{opacity:0}48.064%{opacity:0;animation-timing-function:ease-out}56.464%{opacity:1}100%{opacity:1}}
@keyframes lv-st-9347-t{0%{rotate:-0.027rad;scale:1.06}48.064%{rotate:-0.027rad;scale:1.06;animation-timing-function:cubic-bezier(0.22, 1, 0.36, 1)}73.265%{rotate:0rad;scale:1}100%{rotate:0rad;scale:1}}
.lv-st--9347{animation-name:lv-st-9347-o,lv-st-9347-t}
@keyframes lv-ob-oatmeal{0%{rotate:0rad;translate:0cqw 0cqw}6.25%{rotate:-0.002rad;translate:0.019cqw 0.113cqw}12.5%{rotate:-0.004rad;translate:0.031cqw 0.216cqw}18.75%{rotate:-0.005rad;translate:0.039cqw 0.301cqw}25%{rotate:-0.006rad;translate:0.044cqw 0.359cqw}31.25%{rotate:-0.007rad;translate:0.044cqw 0.387cqw}37.5%{rotate:-0.007rad;translate:0.039cqw 0.381cqw}43.75%{rotate:-0.007rad;translate:0.029cqw 0.343cqw}50%{rotate:-0.006rad;translate:0.015cqw 0.275cqw}56.25%{rotate:-0.005rad;translate:-0.002cqw 0.183cqw}62.5%{rotate:-0.004rad;translate:-0.023cqw 0.076cqw}68.75%{rotate:-0.002rad;translate:-0.046cqw -0.038cqw}75%{rotate:0rad;translate:-0.07cqw -0.149cqw}81.25%{rotate:0.002rad;translate:-0.094cqw -0.247cqw}87.5%{rotate:0.005rad;translate:-0.118cqw -0.323cqw}93.75%{rotate:0.007rad;translate:-0.141cqw -0.372cqw}100%{rotate:0.009rad;translate:-0.161cqw -0.389cqw}}
.lv-obj--oatmeal .lv-obj__base{animation-name:lv-ob-oatmeal}
@keyframes lv-ob-diary{0%{rotate:0rad;translate:0cqw 0cqw}6.25%{rotate:-0.001rad;translate:0.001cqw 0.059cqw}12.5%{rotate:-0.001rad;translate:-0.009cqw 0.09cqw}18.75%{rotate:0rad;translate:-0.022cqw 0.111cqw}25%{rotate:0.001rad;translate:-0.04cqw 0.116cqw}31.25%{rotate:0.002rad;translate:-0.063cqw 0.104cqw}37.5%{rotate:0.004rad;translate:-0.089cqw 0.075cqw}43.75%{rotate:0.006rad;translate:-0.117cqw 0.03cqw}50%{rotate:0.008rad;translate:-0.146cqw -0.028cqw}56.25%{rotate:0.011rad;translate:-0.176cqw -0.098cqw}62.5%{rotate:0.014rad;translate:-0.205cqw -0.176cqw}68.75%{rotate:0.017rad;translate:-0.232cqw -0.261cqw}75%{rotate:0.019rad;translate:-0.256cqw -0.348cqw}81.25%{rotate:0.022rad;translate:-0.276cqw -0.434cqw}87.5%{rotate:0.024rad;translate:-0.291cqw -0.516cqw}93.75%{rotate:0.025rad;translate:-0.301cqw -0.591cqw}100%{rotate:0.026rad;translate:-0.305cqw -0.656cqw}}
.lv-obj--diary .lv-obj__base{animation-name:lv-ob-diary}
@keyframes lv-ob-lighting{0%{rotate:0rad;translate:0cqw 0cqw}6.25%{rotate:0.002rad;translate:-0.025cqw -0.009cqw}12.5%{rotate:0.004rad;translate:-0.059cqw -0.055cqw}18.75%{rotate:0.007rad;translate:-0.092cqw -0.109cqw}25%{rotate:0.01rad;translate:-0.128cqw -0.177cqw}31.25%{rotate:0.013rad;translate:-0.163cqw -0.258cqw}37.5%{rotate:0.016rad;translate:-0.197cqw -0.349cqw}43.75%{rotate:0.019rad;translate:-0.228cqw -0.444cqw}50%{rotate:0.022rad;translate:-0.255cqw -0.542cqw}56.25%{rotate:0.025rad;translate:-0.278cqw -0.639cqw}62.5%{rotate:0.027rad;translate:-0.294cqw -0.73cqw}68.75%{rotate:0.029rad;translate:-0.304cqw -0.812cqw}75%{rotate:0.03rad;translate:-0.308cqw -0.882cqw}81.25%{rotate:0.031rad;translate:-0.304cqw -0.937cqw}87.5%{rotate:0.031rad;translate:-0.294cqw -0.975cqw}93.75%{rotate:0.031rad;translate:-0.277cqw -0.995cqw}100%{rotate:0.029rad;translate:-0.254cqw -0.996cqw}}
.lv-obj--lighting .lv-obj__base{animation-name:lv-ob-lighting}
@keyframes lv-ob-music{0%{rotate:0rad;translate:0cqw 0cqw}6.25%{rotate:0.002rad;translate:-0.024cqw -0.086cqw}12.5%{rotate:0.004rad;translate:-0.047cqw -0.195cqw}18.75%{rotate:0.007rad;translate:-0.068cqw -0.302cqw}25%{rotate:0.009rad;translate:-0.086cqw -0.411cqw}31.25%{rotate:0.01rad;translate:-0.101cqw -0.517cqw}37.5%{rotate:0.012rad;translate:-0.112cqw -0.616cqw}43.75%{rotate:0.013rad;translate:-0.117cqw -0.704cqw}50%{rotate:0.014rad;translate:-0.119cqw -0.779cqw}56.25%{rotate:0.014rad;translate:-0.115cqw -0.836cqw}62.5%{rotate:0.014rad;translate:-0.107cqw -0.874cqw}68.75%{rotate:0.014rad;translate:-0.094cqw -0.891cqw}75%{rotate:0.013rad;translate:-0.078cqw -0.887cqw}81.25%{rotate:0.011rad;translate:-0.058cqw -0.862cqw}87.5%{rotate:0.01rad;translate:-0.036cqw -0.817cqw}93.75%{rotate:0.008rad;translate:-0.012cqw -0.754cqw}100%{rotate:0.006rad;translate:0.012cqw -0.674cqw}}
.lv-obj--music .lv-obj__base{animation-name:lv-ob-music}
@keyframes lv-ob-trinkets{0%{rotate:0rad;translate:0cqw 0cqw}6.25%{rotate:0.002rad;translate:-0.019cqw -0.111cqw}12.5%{rotate:0.004rad;translate:-0.028cqw -0.201cqw}18.75%{rotate:0.005rad;translate:-0.034cqw -0.271cqw}25%{rotate:0.006rad;translate:-0.034cqw -0.311cqw}31.25%{rotate:0.006rad;translate:-0.029cqw -0.319cqw}37.5%{rotate:0.006rad;translate:-0.017cqw -0.293cqw}43.75%{rotate:0.005rad;translate:-0.001cqw -0.236cqw}50%{rotate:0.004rad;translate:0.02cqw -0.153cqw}56.25%{rotate:0.002rad;translate:0.045cqw -0.051cqw}62.5%{rotate:0rad;translate:0.072cqw 0.062cqw}68.75%{rotate:-0.002rad;translate:0.102cqw 0.175cqw}75%{rotate:-0.005rad;translate:0.132cqw 0.279cqw}81.25%{rotate:-0.007rad;translate:0.161cqw 0.365cqw}87.5%{rotate:-0.01rad;translate:0.189cqw 0.426cqw}93.75%{rotate:-0.013rad;translate:0.214cqw 0.455cqw}100%{rotate:-0.015rad;translate:0.235cqw 0.452cqw}}
.lv-obj--trinkets .lv-obj__base{animation-name:lv-ob-trinkets}
@keyframes lv-ob-perfume{0%{rotate:0rad;translate:0cqw 0cqw}6.25%{rotate:0.001rad;translate:0.005cqw -0.046cqw}12.5%{rotate:0rad;translate:0.023cqw -0.062cqw}18.75%{rotate:-0.001rad;translate:0.044cqw -0.068cqw}25%{rotate:-0.003rad;translate:0.07cqw -0.057cqw}31.25%{rotate:-0.005rad;translate:0.1cqw -0.03cqw}37.5%{rotate:-0.008rad;translate:0.133cqw 0.013cqw}43.75%{rotate:-0.011rad;translate:0.168cqw 0.07cqw}50%{rotate:-0.014rad;translate:0.204cqw 0.139cqw}56.25%{rotate:-0.017rad;translate:0.238cqw 0.217cqw}62.5%{rotate:-0.02rad;translate:0.27cqw 0.301cqw}68.75%{rotate:-0.023rad;translate:0.299cqw 0.388cqw}75%{rotate:-0.026rad;translate:0.323cqw 0.474cqw}81.25%{rotate:-0.028rad;translate:0.341cqw 0.557cqw}87.5%{rotate:-0.03rad;translate:0.354cqw 0.633cqw}93.75%{rotate:-0.032rad;translate:0.359cqw 0.699cqw}100%{rotate:-0.033rad;translate:0.358cqw 0.752cqw}}
.lv-obj--perfume .lv-obj__base{animation-name:lv-ob-perfume}
@keyframes lv-ob-glasses{0%{rotate:0rad;translate:0cqw 0cqw}6.25%{rotate:-0.001rad;translate:0.02cqw 0.026cqw}12.5%{rotate:-0.003rad;translate:0.045cqw 0.087cqw}18.75%{rotate:-0.005rad;translate:0.069cqw 0.155cqw}25%{rotate:-0.008rad;translate:0.094cqw 0.235cqw}31.25%{rotate:-0.01rad;translate:0.117cqw 0.324cqw}37.5%{rotate:-0.012rad;translate:0.139cqw 0.42cqw}43.75%{rotate:-0.014rad;translate:0.158cqw 0.518cqw}50%{rotate:-0.016rad;translate:0.174cqw 0.614cqw}56.25%{rotate:-0.018rad;translate:0.186cqw 0.706cqw}62.5%{rotate:-0.019rad;translate:0.193cqw 0.789cqw}68.75%{rotate:-0.02rad;translate:0.196cqw 0.86cqw}75%{rotate:-0.02rad;translate:0.194cqw 0.917cqw}81.25%{rotate:-0.02rad;translate:0.187cqw 0.957cqw}87.5%{rotate:-0.02rad;translate:0.176cqw 0.978cqw}93.75%{rotate:-0.019rad;translate:0.161cqw 0.981cqw}100%{rotate:-0.018rad;translate:0.142cqw 0.964cqw}}
.lv-obj--glasses .lv-obj__base{animation-name:lv-ob-glasses}
@keyframes lv-ob-camera{0%{rotate:0rad;translate:0cqw 0cqw}6.25%{rotate:-0.003rad;translate:0.029cqw 0.096cqw}12.5%{rotate:-0.005rad;translate:0.054cqw 0.209cqw}18.75%{rotate:-0.008rad;translate:0.077cqw 0.318cqw}25%{rotate:-0.01rad;translate:0.095cqw 0.424cqw}31.25%{rotate:-0.012rad;translate:0.109cqw 0.524cqw}37.5%{rotate:-0.013rad;translate:0.116cqw 0.613cqw}43.75%{rotate:-0.014rad;translate:0.118cqw 0.689cqw}50%{rotate:-0.015rad;translate:0.114cqw 0.748cqw}56.25%{rotate:-0.015rad;translate:0.105cqw 0.787cqw}62.5%{rotate:-0.014rad;translate:0.09cqw 0.807cqw}68.75%{rotate:-0.013rad;translate:0.07cqw 0.805cqw}75%{rotate:-0.012rad;translate:0.047cqw 0.782cqw}81.25%{rotate:-0.01rad;translate:0.02cqw 0.738cqw}87.5%{rotate:-0.007rad;translate:-0.009cqw 0.676cqw}93.75%{rotate:-0.005rad;translate:-0.039cqw 0.598cqw}100%{rotate:-0.002rad;translate:-0.069cqw 0.506cqw}}
.lv-obj--camera .lv-obj__base{animation-name:lv-ob-camera}
@keyframes lv-ob-airpods{0%{rotate:0rad;translate:0cqw 0cqw}6.25%{rotate:-0.002rad;translate:0.017cqw 0.106cqw}12.5%{rotate:-0.004rad;translate:0.022cqw 0.179cqw}18.75%{rotate:-0.005rad;translate:0.023cqw 0.232cqw}25%{rotate:-0.005rad;translate:0.017cqw 0.253cqw}31.25%{rotate:-0.005rad;translate:0.004cqw 0.24cqw}37.5%{rotate:-0.004rad;translate:-0.015cqw 0.195cqw}43.75%{rotate:-0.003rad;translate:-0.039cqw 0.121cqw}50%{rotate:-0.001rad;translate:-0.068cqw 0.026cqw}56.25%{rotate:0.002rad;translate:-0.101cqw -0.084cqw}62.5%{rotate:0.005rad;translate:-0.135cqw -0.198cqw}68.75%{rotate:0.008rad;translate:-0.171cqw -0.307cqw}75%{rotate:0.011rad;translate:-0.206cqw -0.401cqw}81.25%{rotate:0.014rad;translate:-0.239cqw -0.472cqw}87.5%{rotate:0.017rad;translate:-0.269cqw -0.514cqw}93.75%{rotate:0.02rad;translate:-0.294cqw -0.524cqw}100%{rotate:0.023rad;translate:-0.314cqw -0.5cqw}}
.lv-obj--airpods .lv-obj__base{animation-name:lv-ob-airpods}
@keyframes lv-ob-book{0%{rotate:0rad;translate:0cqw 0cqw}6.25%{rotate:0rad;translate:-0.007cqw 0.033cqw}12.5%{rotate:0.001rad;translate:-0.024cqw 0.032cqw}18.75%{rotate:0.002rad;translate:-0.042cqw 0.023cqw}25%{rotate:0.003rad;translate:-0.062cqw -0.003cqw}31.25%{rotate:0.005rad;translate:-0.085cqw -0.045cqw}37.5%{rotate:0.007rad;translate:-0.109cqw -0.101cqw}43.75%{rotate:0.009rad;translate:-0.134cqw -0.168cqw}50%{rotate:0.012rad;translate:-0.158cqw -0.246cqw}56.25%{rotate:0.014rad;translate:-0.18cqw -0.329cqw}62.5%{rotate:0.016rad;translate:-0.2cqw -0.416cqw}68.75%{rotate:0.018rad;translate:-0.217cqw -0.502cqw}75%{rotate:0.019rad;translate:-0.23cqw -0.586cqw}81.25%{rotate:0.021rad;translate:-0.239cqw -0.662cqw}87.5%{rotate:0.022rad;translate:-0.243cqw -0.729cqw}93.75%{rotate:0.023rad;translate:-0.243cqw -0.784cqw}100%{rotate:0.023rad;translate:-0.237cqw -0.824cqw}}
.lv-obj--book .lv-obj__base{animation-name:lv-ob-book}
@keyframes lv-ob-mouse{0%{rotate:0rad;translate:0cqw 0cqw}6.25%{rotate:0.002rad;translate:-0.027cqw -0.042cqw}12.5%{rotate:0.005rad;translate:-0.058cqw -0.117cqw}18.75%{rotate:0.007rad;translate:-0.088cqw -0.196cqw}25%{rotate:0.01rad;translate:-0.117cqw -0.285cqw}31.25%{rotate:0.013rad;translate:-0.144cqw -0.38cqw}37.5%{rotate:0.015rad;translate:-0.167cqw -0.478cqw}43.75%{rotate:0.018rad;translate:-0.187cqw -0.575cqw}50%{rotate:0.02rad;translate:-0.202cqw -0.667cqw}56.25%{rotate:0.021rad;translate:-0.212cqw -0.751cqw}62.5%{rotate:0.022rad;translate:-0.216cqw -0.823cqw}68.75%{rotate:0.023rad;translate:-0.214cqw -0.881cqw}75%{rotate:0.023rad;translate:-0.206cqw -0.922cqw}81.25%{rotate:0.023rad;translate:-0.193cqw -0.946cqw}87.5%{rotate:0.022rad;translate:-0.174cqw -0.95cqw}93.75%{rotate:0.02rad;translate:-0.152cqw -0.936cqw}100%{rotate:0.019rad;translate:-0.126cqw -0.902cqw}}
.lv-obj--mouse .lv-obj__base{animation-name:lv-ob-mouse}
@keyframes lv-ob-incense{0%{rotate:0rad;translate:0cqw 0cqw}6.25%{rotate:0.003rad;translate:-0.033cqw -0.104cqw}12.5%{rotate:0.006rad;translate:-0.058cqw -0.216cqw}18.75%{rotate:0.009rad;translate:-0.08cqw -0.323cqw}25%{rotate:0.011rad;translate:-0.096cqw -0.423cqw}31.25%{rotate:0.013rad;translate:-0.106cqw -0.514cqw}37.5%{rotate:0.014rad;translate:-0.109cqw -0.591cqw}43.75%{rotate:0.015rad;translate:-0.106cqw -0.651cqw}50%{rotate:0.015rad;translate:-0.095cqw -0.693cqw}56.25%{rotate:0.014rad;translate:-0.078cqw -0.714cqw}62.5%{rotate:0.013rad;translate:-0.055cqw -0.714cqw}68.75%{rotate:0.011rad;translate:-0.027cqw -0.693cqw}75%{rotate:0.009rad;translate:0.004cqw -0.651cqw}81.25%{rotate:0.006rad;translate:0.038cqw -0.591cqw}87.5%{rotate:0.003rad;translate:0.073cqw -0.514cqw}93.75%{rotate:0rad;translate:0.109cqw -0.423cqw}100%{rotate:-0.003rad;translate:0.142cqw -0.323cqw}}
.lv-obj--incense .lv-obj__base{animation-name:lv-ob-incense}

/* phones: list view only — no way back to the fun view, and the message says why */
.lv-msg__mob { display: none; }
@media (max-width: 760px) {
  .lv-back { display: none; }
  .lv-msg__desk { display: none; }
  .lv-msg__mob { display: block; }
  /* one line only; photo sits with an even 20px above and below */
  .lv-msg__one { white-space: nowrap; font-size: min(16px, 4.1vw); }
  .lv-msg__body { padding-bottom: 19px; }
  /* sit lower: less empty space under the message (mail button 24px up, message 14px above it) */
  .lv-mail { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .lv-msg { bottom: calc(93px + env(safe-area-inset-bottom, 0px)); }
  /* the menu sheet covers the page, so the message + mail button step aside while it's open */
  .lv-msg, .lv-mail { transition: opacity .25s ease, visibility 0s, background-color .15s ease-out; }
  .mnav-open .lv-msg, .mnav-open .lv-mail { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility 0s .25s; }
}

/* ------------------------------------------------------------------
   Project detail (click a tile): opens in the grid's place, the sidebar
   stays. Big picture on top, then title, details and More Info.
------------------------------------------------------------------- */
.lv-tile[data-project] { cursor: pointer; }
.lv-tile[data-project]:focus-visible { outline: 2px solid var(--black); outline-offset: 4px; border-radius: 6px; }
.lv.has-detail .lv-grid { display: none; }
.lv-side { grid-column: 1; grid-row: 1; }
.lv-grid { grid-column: 2; grid-row: 1; }   /* grid and detail share one cell, so the panel can slide over the grid */
.lv-detail { grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-direction: column; }
.lv-detail[hidden] { display: none; }
.lv-detail__back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 2px;
  margin: -6px 0 18px -8px; padding: 4px 12px 4px 2px; border: 0; border-radius: 100px; background: none;
  font: 500 18px/1.2 var(--sans); letter-spacing: -0.01em; color: var(--black); cursor: pointer;
  transition: background-color .15s ease-out;
}
.lv-detail__back:hover { background: #f2f2f2; }
.lv-detail__media {
  position: relative; flex: none; width: 100%; aspect-ratio: 16 / 9;   /* one frame for every project: full column width, the Draw My Life shape */
  overflow: hidden; border-radius: 8px; background: #f5f5f5;
}
.lv-detail__media::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 1px #b5b0af; pointer-events: none; }
.lv-detail__frame, .lv-detail__frame > :is(img, video, iframe) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lv-detail__frame > :is(img, video) { object-fit: cover; }
.lv-detail__frame > :is(img, video).is-fit { object-fit: contain; background: transparent; }   /* a picture far from 16:9 (e.g. square posts) shows whole on the frame's grey */
.lv-detail__media.is-art .lv-detail__frame > img { object-fit: contain; padding: 4%; }   /* the tile's object, whole, on the grey */
.lv-detail__frame > video { background: transparent; }
.lv-detail__frame > .lv-detail__tile { position: absolute; top: 4%; bottom: 4%; left: 50%; width: auto; height: 92%; translate: -50% 0; }   /* the tile, whole and centred, same as in the grid */   /* the frame colour shows while a video loads: no black or stray flash */
.lv-detail__frame > .win__play { z-index: 2; width: 84px; height: 84px; }
.lv-detail__media .zv__nav { z-index: 4; }
.lv-detail__media.is-single .zv__nav { display: none; }
.lv-detail__count { min-height: 17px; margin-top: 10px; text-align: right; font-family: var(--mono); font-size: 14px; letter-spacing: -0.02em; color: var(--grey); }
.lv-detail__text { flex: none; display: flex; flex-direction: column; gap: 16px; margin-top: 14px; max-width: 760px; }
.lv-detail__title { font-size: 28px; font-weight: 400; letter-spacing: -0.01em; }
.lv-detail__meta { display: flex; flex-direction: column; gap: 3px; padding: 0; background: none; box-shadow: none; font-size: 15px; letter-spacing: 0; color: var(--grey); }
.lv-detail__meta[hidden], .lv-detail__info[hidden] { display: none; }
.lv-detail__info { display: flex; flex-direction: column; gap: 8px; }
.lv-detail__info .win__more { font-size: 16px; }
.lv-detail__desc { font-size: 18px; line-height: 1.4; letter-spacing: 0; }
.lv-para { display: block; }
.lv-para + .lv-para { margin-top: .6em; }
@media (min-width: 761px) { .lv-detail__desc.is-tight .lv-para + .lv-para { margin-top: 0; } }   /* a blank line between paragraphs, a little tighter than a full line */
@media (max-width: 1000px) {
  .lv-detail { grid-column: 1; grid-row: auto; }
}

/* move-in: while sliding, the panel is a fixed sheet over the grid (script sets its box) */
.lv { overflow-x: clip; }
.lv-detail.is-moving {
  position: fixed !important; z-index: 5; overflow: hidden;   /* under the nav (z 10), over the grid */
  background: #fff;
}
@media (max-width: 1000px) {
  .lv-grid, .lv-detail { grid-column: 1; grid-row: 2; }   /* phones: the panel takes the grid's place under the sidebar */
}
@media (max-width: 760px) {
  .lv.is-detail .lv-checks { display: none; }   /* phones: no filters while a project is open; back with "All works" */
  .lv.is-detail .lv-side { display: none; }   /* phones: a project open = just the project, no logo / title / filters */
  .lv.is-detail { row-gap: 0; }   /* no gap left over from the hidden sidebar: "All works" sits close under the nav */
  .lv-detail__media { aspect-ratio: var(--mar, 16 / 9); transition: aspect-ratio .35s cubic-bezier(.32, .72, 0, 1); }   /* phones: each project's own shape (taller), set per project */
}

/* SITE row (phones only), same as the footer row on the other pages */
.lv-foot { display: none; }
@media (max-width: 760px) {
  .lv-foot { display: block; padding: 0 var(--gutter) 30px; font-size: 14px; font-weight: 500; }   /* same type and bottom spacing as the footer on the other pages */
  .lv:not(.is-detail) { padding-bottom: 72px; }   /* the row follows the grid without a long blank */
  .lv.is-detail ~ .lv-foot { display: none; }
}