/* ---------- fullscreen image viewer ----------
       the card media opens the same file fullscreen; click / Esc to close */
    .lb {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1000;
      background: rgba(4, 7, 13, .9);
      -webkit-backdrop-filter: blur(calc(10*var(--t)));
      backdrop-filter: blur(calc(10*var(--t)));
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(16px, 4vw, 56px);
      cursor: zoom-out;
      opacity: 0;
      transition: opacity .25s ease
    }

    .lb.on {
      opacity: 1
    }

    .lb[hidden] {
      display: none
    }

    .lb img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      border-radius: 12px;
      box-shadow: 0 30px 90px rgba(0, 0, 0, .7)
    }

    .lb-x {
      position: absolute;
      top: clamp(12px, 2.5vw, 26px);
      right: clamp(14px, 2.5vw, 30px);
      font-family: 'Chakra S', 'Inter S', sans-serif;
      font-weight: 700;
      font-size: clamp(14px, 1.6vw, 18px);
      color: #D7E2EA;
      border: 2px solid rgba(215, 226, 234, .35);
      border-radius: 999px;
      width: clamp(32px, 3vw, 40px);
      height: clamp(32px, 3vw, 40px);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .25s ease, color .25s ease
    }

    .lb:hover .lb-x {
      background: #D7E2EA;
      color: #0C0C0C
    }

    body.lb-open {
      overflow: hidden
    }

    /* ---------- back to top ---------- */
    .totop {
      position: fixed;
      right: calc(16*var(--t));
      bottom: calc(16*var(--t));
      z-index: 890;
      width: calc(46*var(--t));
      height: calc(46*var(--t));
      border: 2px solid rgba(215, 226, 234, .5);
      border-radius: 999px;
      background: rgba(10, 15, 26, .58);
      -webkit-backdrop-filter: blur(calc(14*var(--t)));
      backdrop-filter: blur(calc(14*var(--t)));
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transform: translateY(calc(8*var(--t)));
      transition: opacity .3s ease, transform .3s ease, visibility .3s, background .25s ease, border-color .25s ease
    }

    .totop.on {
      opacity: 1;
      visibility: visible;
      transform: none
    }

    .totop svg {
      width: calc(12*var(--t));
      height: calc(8*var(--t));
      fill: #fff
    }

    .totop:hover {
      background: #D7E2EA;
      border-color: #D7E2EA
    }

    .totop:hover svg {
      fill: #0C0C0C
    }