<style>
    @font-face {
      font-family: 'HostGrotesk';
      src: url('HostGrotesk-Regular.woff') format('woff');
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'HostGrotesk', Arial, sans-serif;
      overflow: hidden;
    }

    h2 {
      font-family: 'HostGrotesk', Arial, sans-serif;
    }

    .desk-container {
      position: relative;
      width: 100vw;
      height: 100vh;
    }

    /* Background wall */
    .wall {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
    }

    /* Desk/table - further down */
    .table {
      position: absolute;
      bottom: -40%;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
      z-index: 2;
    }

    /* Chair - in front of everything on desk */
    .chair {
      position: absolute;
      bottom: -25%;
      left: 50%;
      transform: translateX(-50%);
      width: 32%;
      z-index: 10;
    }

    /* Clickable items */
    .desk-item {
      position: absolute;
      cursor: pointer;
      transition: transform 0.3s ease, filter 0.3s ease;
    }

    .desk-item:hover {
      transform: scale(1.05);
      filter: brightness(1.1);
      z-index: 100 !important;
    }

    .imac-font-book:hover {
      transform: translateX(-50%) scale(1.05);
    }

    .desk-item img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* WALL ITEMS - High on the wall */
    .printed-matter {
      top: 30%;
      left: 13%;
      width: 9%;
      z-index: 2;
    }

    .riso-print {
      top: 5%;
      left: 24%;
      width: 20%;
      z-index: 2;
    }

    .matisse-poster {
      top: 0%;
      left: 42%;
      width: 30%;
      z-index: 2;
    }

    .colour-swatches {
      top: -10%;
      right: 11%;
      width: 24%;
      z-index: 2;
    }

    /* LEFT SHELF ITEMS */
    .book-stack {
      bottom: 28%;
      left: 22%;
      width: 18%;
      z-index: 6;
    }

    .drawer-books {
      position: absolute;
      bottom: 12%;
      left: 18%;
      width: 16%;
      z-index: 3;
      pointer-events: none;
    }

    .drawer-books img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* CENTER - iMac (behind chair) */
    .imac-font-book {
      bottom: 35%;
      left: 49%;
      transform: translateX(-50%);
      width: 30%;
      z-index: 4;
    }

    /* RIGHT SHELF ITEMS */
    .lamp {
      bottom: 33%;
      right: 28%;
      width: 9%;
      z-index: 5;
    }

     .trashcan-pen-holder {
      bottom: 33%;
      right: 34%;
      width: 5.5%;
      z-index: 15;
    }

    .smiski-figurine {
      bottom: 33%;
      right: 27%;
      width: 3%;
      z-index: 6;
    }

    .plant-drawer {
      position: absolute;
      bottom: -12%;
      right: 18%;
      width: 18%;
      z-index: 3;
      pointer-events: none;
    }

    .plant-drawer img {
      width: 100%;
      height: auto;
      display: block;
    }
  

   
    /* Modal */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.6);
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding-top: 0;
      z-index: 1000;
    }

    .modal-overlay.hidden {
      display: none;
    }

    .modal-content {
      background: #1070bf;
      padding: 40px;
      border-radius: 0 0 20px 20px;
      max-width: 600px;
      width: 90%;
      box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
      position: relative;
      text-align: center;
    }

    .modal-content h2 {
      margin-top: 0;
      margin-bottom: 20px;
      font-size: 21px;
      color: #FFF8E3;
      word-wrap: break-word;
    }

    .modal-content p {
      line-height: 1.3;
      color: #FFF8E3;
      margin-bottom: 12px;
      font-size: 16px;
      word-wrap: break-word;
    }

    .modal-button {
      background: #FFF8E3;
      color: #1070bf;
      border: none;
      padding: 12px 30px;
      border-radius: 25px;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.3s ease;
      margin: 0 auto;
      display: block;
    }

    .modal-button:hover {
      background: #f7e8b9;
    }
  </style>
