/* Reuse the original plate and its photographed hardware, with live HTML.
 * Frame crop: x350 y248 w802 h552 on the 1402x1122 source.
 * The previous photoreal.css is preserved but no longer loaded. */
:root {
  --desk-photo: url('../assets/environment/senior-desk-photo-v3-memories.webp');
  --header-height: 4.5rem;
}
.utility-header {
  position: fixed;
  inset: 12px 20px auto;
  min-height: var(--header-height);
  padding: .55rem 1.15rem;
  border: 1px solid rgba(224,209,168,.28);
  border-radius: 8px;
  background: rgba(15,25,45,.94);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px rgba(14,18,25,.24);
}
.utility-nav a { min-height: 44px; font-size: .83rem; }
.utility-donate { min-height: 44px; }
.skip-link { z-index: 200; }
.room-viewport {
  position: relative;
  display: grid;
  height: 100vh;
  height: 100dvh;
  min-height: 700px;
  place-items: center;
  overflow: hidden;
  background: url('../assets/textures/wall-cream.webp') center / 640px, #e8dcc8;
}
.room {
  position: relative;
  width: auto;
  height: min(100%, 80.0285vw);
  min-height: 0;
  aspect-ratio: 1402 / 1122;
  margin: 0;
  overflow: visible;
  isolation: auto;
  background: #e8dcc8;
}
.room-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.room__light, .pennant-line, .desk, .lamp, .notebook, .coffee-mug,
.phone, .permission-slip, .keyboard, .mouse, .sticky-note,
.monitor__camera, .monitor__label, .monitor__stand, .monitor__base,
.bulletin-board { display: none; }
.wall { display: contents; position: static; }
.wall::after { display: none; }

/* The calendar stays on the side wall, never over the LCD. */
.wall-calendar {
  z-index: 10;
  top: 26%;
  left: max(calc((100% - 100vw) / 2 + 1.5vw), calc(10% - min(15vw, 15rem) - 2rem));
  width: min(15vw, 15rem);
  height: auto;
  min-height: 0;
  padding: .9rem;
  border: 1px solid rgba(65,47,28,.12);
  border-radius: 1px;
  background: #f5f0e6 url('../assets/textures/wall-cream.webp') center / 900px;
  background-blend-mode: soft-light;
  box-shadow: 4px 9px 15px rgba(48,34,20,.25);
  transform: rotate(-1.5deg);
}
.calendar-header { flex-wrap: wrap; gap: .45rem; }
.calendar-header h2 { font-size: clamp(1.15rem,1.8vw,1.9rem); }
.calendar-controls button { width: 44px; height: 44px; }
.calendar-grid { grid-auto-rows: minmax(22px,auto); }
.calendar-footer { display: grid; gap: .4rem; }
.calendar-footer p { text-align: left; }
.calendar-tour-jump { min-height: 44px; text-align: left; }
.monitor {
  position: absolute;
  z-index: 30;
  top: 22%;
  left: 10%;
  width: 88%;
  height: 62%;
  min-height: 0;
  aspect-ratio: auto;
  padding: 3.35% 5.4% 3.7% 4%;
  border: 0;
  border-radius: 10px;
  background: none;
  box-shadow: 5px 15px 25px rgba(36,27,20,.26);
  transform: none;
}
.monitor::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background-image: var(--desk-photo);
  background-size: 174.813% 203.261%;
  background-position: 58.333% 43.509%;
  pointer-events: none;
}
/* Photographed stand crop: x576 y798 w310 h69. */
.monitor::after {
  content: '';
  position: absolute;
  z-index: -2;
  top: calc(100% - 1px);
  left: 28.2%;
  width: 38.65%;
  height: 12.5%;
  background-image: var(--desk-photo);
  background-size: 452.258% 1626.087%;
  background-position: 52.747% 75.783%;
  clip-path: polygon(33% 0,68% 0,68% 29%,87% 38%,98% 57%,100% 77%,93% 90%,74% 100%,22% 100%,5% 86%,0 70%,2% 52%,16% 37%,33% 29%);
  pointer-events: none;
}
.monitor__screen {
  width: 100%;
  height: 100%;
  border: 1px solid #111a24;
  border-radius: 1px;
  grid-template-rows: 44px minmax(0,1fr);
  box-shadow: inset 0 0 22px rgba(0,0,0,.3);
}
.screen-toolbar { font-size: .65rem; letter-spacing: .04em; }
.screen-toolbar__right { gap: .8rem; }
.screen-expand {
  min-height: 44px;
  padding: 0 .7rem;
  border: 0;
  border-left: 1px solid #ffffff24;
  background: transparent;
  color: #e5c774;
  font: 600 .72rem var(--font-body);
  cursor: pointer;
}
.screen-expand:hover { background: #ffffff12; }
.screen-scanlines { display: none; }
.monitor__screen.is-switching::after { top: 44px; }
.screen-home { padding: clamp(.75rem,1vw,1rem); }
.home-browser__content { padding: clamp(1rem,1.35vw,1.4rem) clamp(1rem,2vw,2rem); }
.home-browser__content h1 { font-size: clamp(2.25rem,3.4vw,3.1rem); }
.home-mission { max-width: 62ch; font-size: 1rem; line-height: 1.55; }
.home-actions .screen-button { min-height: 44px; font-size: .75rem; }
.desktop-icons { margin: .65rem 0; gap: 1.25rem; }
.desktop-icon { min-height: 68px; width: 100px; }
.desktop-icon strong { font-size: .72rem; }
.browser-chrome div { font-size: .65rem; }

/* Explicit reading mode preserves routes and content scroll position. */
.screen-expanded .monitor {
  position: fixed;
  top: 102px;
  right: 1.5vw;
  bottom: 24px;
  left: 1.5vw;
  width: auto;
  height: auto;
  padding: 20px 24px 27px;
}
.screen-expanded .monitor::after { display: none; }
.screen-expanded .wall-calendar { visibility: hidden; }

@media (max-width: 1199px), (max-aspect-ratio: 3 / 2) {
  .room-viewport { min-height: 740px; }
  .room { width: 100%; height: 100%; aspect-ratio: auto; }
  .room-photo { object-fit: cover; object-position: center; }
  .monitor { top: 20%; left: 3%; width: 94%; height: 70%; padding: 26px 22px 30px; }
  .wall-calendar { display: none; }
  .screen-toolbar__right > span { display: none; }
}
@media (max-width: 767px) {
  :root { --header-height: 3.65rem; }
  .utility-header { inset: 8px 8px auto; gap: .5rem; padding: .45rem .6rem; }
  .utility-brand { width: 7.2rem; }
  .utility-nav { border-radius: 0 0 8px 8px; }
  .utility-nav a { min-height: 48px; font-size: .9rem; }
  .room-viewport { min-height: 760px; }
  .room-photo { object-position: 54% center; }
  .monitor { top: 145px; left: 8px; width: calc(100% - 16px); height: calc(100% - 195px); padding: 15px 10px 20px; }
  .monitor::after { height: 35px; }
  .screen-toolbar { padding-inline: .5rem; gap: .3rem; font-size: .6rem; }
  .screen-toolbar__right { gap: .35rem; }
  .screen-expand { padding-inline: .45rem; font-size: .65rem; }
  .screen-home { padding: .65rem; }
  .home-browser__content { padding: 1rem .85rem; }
  .home-browser__content h1 { font-size: clamp(2rem,8vw,2.7rem); line-height: 1.08; }
  .home-browser__content .screen-eyebrow { font-size: .65rem; }
  .home-mission { font-size: 1rem; line-height: 1.5; }
  .home-actions { gap: .6rem; }
  .home-actions .screen-button { flex: 1 1 120px; font-size: .7rem; padding: .65rem; }
  .desktop-icons { justify-content: space-between; gap: .25rem; }
  .desktop-icon { width: 31%; }
  .screen-expanded .monitor { top: 84px; right: 4px; bottom: 8px; left: 4px; padding: 12px 7px 16px; }
}
@media (min-width: 768px) and (max-height: 720px) {
  .room-viewport { min-height: 660px; }
  .screen-expanded .monitor { top: 98px; bottom: 10px; }
}
@media (max-width: 380px) {
  .screen-toolbar__right { display: flex; }
  .screen-toolbar__right time { display: none; }
}
/* Short laptops need more LCD height to expose the home file shortcuts. */
@media (min-width: 1200px) and (max-height: 820px) and (min-aspect-ratio: 3 / 2) {
  .monitor { top: 18%; height: 72%; }
}