/*
 * Photographic environment layer.
 *
 * The source image supplies the physical wall, cork, wood, monitor hardware,
 * desk objects, material wear, perspective, and contact shadows. The working
 * website remains live HTML positioned inside the photographed LCD aperture.
 */

.room-viewport {
  position: relative;
  overflow: hidden;
  background: #d8cdbb;
}

.room {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1402 / 1122;
  background: #d8cdbb;
}

.room-photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

/* The photograph replaces the former code-drawn room and hardware. */
.room__light,
.pennant-line,
.desk,
.lamp,
.notebook,
.coffee-mug,
.phone,
.permission-slip,
.keyboard,
.mouse,
.monitor__camera,
.monitor__label,
.monitor__stand,
.monitor__base,
.sticky-note {
  display: none;
}

.wall {
  position: static;
  display: contents;
  background: none;
  box-shadow: none;
}

.wall::after {
  display: none;
}

/* Keep the live calendar, now registered to the paper in the photograph. */
.wall-calendar {
  z-index: 10;
  top: 13.6%;
  left: 1.25%;
  width: 21.5%;
  height: 27.6%;
  padding: clamp(0.55rem, 1.05vw, 1.05rem) clamp(0.6rem, 1.1vw, 1.15rem);
  border: 0;
  border-radius: 1px;
  background: rgba(248, 246, 240, 0.985);
  box-shadow:
    0 13px 25px rgba(43, 31, 18, 0.18),
    inset 0 0 0 1px rgba(73, 61, 46, 0.06);
  transform: none;
}

.wall-calendar::before {
  opacity: 0.38;
}

/* The photographed board remains visible; these transparent regions retain
   the original flyer interactions without placing flat artwork over it. */
.bulletin-board {
  z-index: 11;
  top: 10.25%;
  right: 0;
  width: 23.6%;
  height: 33.5%;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.bulletin-board .board-frame,
.bulletin-board .board-flyer > *,
.bulletin-board .board-photo {
  opacity: 0;
}

.bulletin-board .board-flyer {
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Exact LCD aperture registration from the 1402 × 1122 memory-wall plate. */
.monitor {
  z-index: 30;
  top: 24.96%;
  left: 27.6%;
  width: 52.5%;
  height: 43.32%;
  min-height: 0;
  aspect-ratio: auto;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.monitor__screen {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 1px;
  box-shadow:
    inset 0 0 28px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(220, 216, 204, 0.1);
}

/* Compress the home desktop just enough to keep its three file icons visible
   inside the photographed 16:10 LCD without changing the content hierarchy. */
.screen-home {
  padding: clamp(0.75rem, 1.25vw, 1.15rem);
}

.home-browser__content {
  padding: clamp(1rem, 1.55vw, 1.4rem) clamp(1.15rem, 2.2vw, 2rem);
}

.home-browser__content h1 {
  margin-bottom: 0.55rem;
}

.home-mission {
  margin-bottom: 0.75rem;
}

.desktop-icons {
  margin-block: 0.7rem;
}

@media (max-width: 767px) {
  .room-viewport {
    height: calc(660px * 1122 / 1402);
  }

  .room {
    left: 50%;
    width: 660px;
    height: auto;
    min-height: 0;
    transform: translateX(-54.4%);
  }

  /* Let the photographed paper show on small screens. Tour dates and the live
     countdown remain available inside the monitor, where they are readable. */
  .wall-calendar {
    opacity: 0;
    pointer-events: none;
  }

  .bulletin-board {
    top: 10.25%;
    right: 0;
    width: 23.6%;
    height: 33.5%;
  }

  .monitor {
    top: 24.96%;
    left: 27.6%;
    width: 52.5%;
    height: 43.32%;
  }

  .monitor__screen {
    grid-template-rows: 1.75rem minmax(0, 1fr);
  }

  .screen-scanlines,
  .monitor__screen.is-switching::after {
    top: 1.75rem;
  }

  .screen-toolbar {
    font-size: 0.4rem;
  }

  .screen-home {
    padding: 0.38rem;
  }

  .browser-chrome {
    height: 1.6rem;
    padding-inline: 0.45rem;
  }

  .home-browser__content {
    padding: 0.48rem 0.68rem 0.55rem;
  }

  .home-browser__content .screen-eyebrow {
    margin-bottom: 0.32rem;
    font-size: 0.45rem;
  }

  .home-browser__content h1 {
    margin-bottom: 0.3rem;
    font-size: 1.72rem;
    line-height: 0.98;
  }

  .home-mission {
    margin-bottom: 0.42rem;
    font-size: 0.56rem;
    line-height: 1.35;
  }

  .home-actions {
    gap: 0.35rem;
  }

  .home-actions .screen-button {
    min-height: 1.8rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.44rem;
  }

  .desktop-icons {
    margin-block: 0.45rem;
  }
}

@media (max-width: 380px) {
  .room-viewport {
    height: calc(640px * 1122 / 1402);
  }

  .room {
    width: 640px;
  }

  .monitor {
    top: 24.96%;
    height: 43.32%;
  }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .room-photo {
    animation: photographic-room-settle 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
}

@keyframes photographic-room-settle {
  from {
    filter: saturate(0.88) brightness(0.96);
    transform: scale(1.008);
  }
  to {
    filter: saturate(1) brightness(1);
    transform: scale(1);
  }
}