:root {
  --ink: #171b17;
  --ink-soft: #5f665f;
  --paper: #f0e8d8;
  --room: #0b110d;
  --cream: #f2ede1;
  --cream-soft: rgba(242, 237, 225, .72);
  --cream-faint: rgba(242, 237, 225, .42);
  --line: rgba(242, 237, 225, .12);
  --brass: #ad8d61;
  --brass-light: #d2b384;
  --brass-dark: #6e5638;
  --moss: #8fb49c;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: Bahnschrift, "Aptos", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(.2, .75, .25, 1);
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--room);
  color-scheme: dark;
}

body {
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  font-family: var(--sans);
  color: var(--cream);
  background:
    radial-gradient(ellipse at 76% 33%, rgba(185, 143, 88, .075), transparent 33%),
    radial-gradient(ellipse at 14% 82%, rgba(89, 130, 100, .08), transparent 36%),
    linear-gradient(146deg, #090e0a 0%, #0e1510 49%, #090e0a 100%);
}

body::before {
  content: "";
  position: fixed;
  z-index: 0;
  top: -30vw;
  right: -18vw;
  width: 56vw;
  height: 56vw;
  border-radius: 50%;
  background: rgba(113, 155, 127, .05);
  filter: blur(100px);
  pointer-events: none;
}

button { color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { color: var(--room); background: var(--brass-light); }
:focus-visible { outline: 2px solid var(--brass-light); outline-offset: 4px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.room-light {
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 77% 65%, rgba(220, 177, 113, .095), transparent 30%),
    radial-gradient(circle at 68% 83%, rgba(100, 137, 112, .04), transparent 34%);
  transition: opacity .8s ease;
}

.grain {
  position: fixed;
  z-index: 30;
  inset: 0;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.site-shell {
  position: relative;
  z-index: 2;
  width: min(100%, 1540px);
  min-height: 100svh;
  margin: 0 auto;
  padding: 20px clamp(20px, 4vw, 62px) 17px;
  display: flex;
  flex-direction: column;
}

.site-header {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: inline-flex; align-items: center; gap: 9px; min-width: max-content; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; color: var(--brass-light); }
.brand-mark svg { width: 100%; height: 100%; }
.brand-word { color: var(--cream); font-size: 12px; font-weight: 700; letter-spacing: .27em; line-height: 1; }
.brand-slash { color: var(--cream-faint); font-size: 13px; font-weight: 300; }
.brand-title { color: var(--cream-soft); font-family: var(--serif); font-size: 16px; font-style: italic; letter-spacing: .01em; }

.header-actions { display: flex; align-items: center; gap: 15px; }
.opened-label { color: var(--cream-faint); font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }

.quiet-button {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .022);
  color: var(--cream-soft);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}

.quiet-button:hover {
  color: var(--cream);
  border-color: rgba(210, 179, 132, .36);
  background: rgba(210, 179, 132, .05);
}

.room-page {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(340px, .78fr) minmax(540px, 1.22fr);
  align-items: center;
  gap: clamp(40px, 5.5vw, 92px);
  padding: clamp(26px, 4vh, 54px) 0 clamp(22px, 3.4vh, 42px);
}

.room-copy {
  width: 100%;
  max-width: 560px;
  justify-self: end;
  animation: copy-in .8s var(--ease) both;
}

@keyframes copy-in {
  from { opacity: 0; transform: translateY(13px); }
  to { opacity: 1; transform: translateY(0); }
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--cream-faint);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1.4;
  text-transform: uppercase;
}

.open-pip,
.local-pip {
  display: inline-block;
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--moss);
  box-shadow: 0 0 0 4px rgba(143, 180, 156, .07);
  animation: pip-breathe 5.5s ease-in-out infinite;
}

@keyframes pip-breathe {
  0%, 100% { opacity: .42; }
  50% { opacity: .92; }
}

h1 {
  margin: clamp(24px, 3.4vh, 40px) 0 0;
  color: var(--cream);
  font-family: var(--serif);
  font-size: clamp(66px, 7.1vw, 108px);
  font-weight: 400;
  line-height: .82;
  letter-spacing: -.06em;
  text-wrap: balance;
}

h1 em {
  display: inline-block;
  margin-left: clamp(8px, 1.1vw, 16px);
  color: #b3c5b4;
  font-weight: 400;
  letter-spacing: -.055em;
}

.room-lede {
  max-width: 45ch;
  margin: clamp(23px, 3.1vh, 34px) 0 0;
  color: rgba(242, 237, 225, .76);
  font-size: clamp(13px, 1.08vw, 15px);
  line-height: 1.75;
}

.room-body {
  max-width: 54ch;
  margin-top: clamp(21px, 3vh, 32px);
}

.room-body p {
  margin: 0 0 13px;
  color: rgba(242, 237, 225, .57);
  font-family: var(--serif);
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 1.68;
}

.room-body p:last-child { margin-bottom: 0; }

.room-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(24px, 3.4vh, 38px);
  padding-top: 14px;
  border-top: 1px solid rgba(242, 237, 225, .09);
}

.room-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--cream-faint);
  font-family: var(--serif);
  font-size: 12px;
  font-style: italic;
  line-height: 1.5;
}

.sound-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 29px;
  padding: 0 10px;
  border: 1px solid rgba(242, 237, 225, .12);
  border-radius: 999px;
  background: transparent;
  color: var(--cream-faint);
  font-family: var(--sans);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}

.sound-toggle:hover {
  color: var(--cream-soft);
  border-color: rgba(210, 179, 132, .3);
  background: rgba(210, 179, 132, .04);
}

.sound-toggle[aria-pressed="true"] {
  color: var(--brass-light);
  border-color: rgba(210, 179, 132, .32);
  background: rgba(210, 179, 132, .055);
}

.sound-icon {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  width: 13px;
  height: 11px;
  color: currentColor;
}

.sound-icon span {
  display: block;
  width: 2px;
  height: 4px;
  border-radius: 1px;
  background: currentColor;
  opacity: .55;
  transform-origin: bottom;
  transition: height .25s ease, opacity .25s ease;
}

.sound-icon span:nth-child(2) { height: 8px; }
.sound-icon span:nth-child(3) { height: 6px; }

.sound-toggle[aria-pressed="true"] .sound-icon span {
  opacity: 1;
  animation: sound-bar 2.8s ease-in-out infinite;
}

.sound-toggle[aria-pressed="true"] .sound-icon span:nth-child(2) { animation-delay: .35s; }
.sound-toggle[aria-pressed="true"] .sound-icon span:nth-child(3) { animation-delay: .7s; }

@keyframes sound-bar {
  0%, 100% { transform: scaleY(.62); }
  50% { transform: scaleY(1.12); }
}

.hint-pip {
  display: inline-block;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dfb87f;
  box-shadow: 0 0 0 4px rgba(223, 184, 127, .08), 0 0 13px rgba(223, 184, 127, .4);
  transition: opacity .5s ease, background .5s ease, box-shadow .5s ease;
}

body.lamp-off .hint-pip {
  background: var(--cream-faint);
  box-shadow: 0 0 0 4px rgba(242, 237, 225, .035);
}

body.lamp-off .room-light { opacity: .55; }

.room-stage {
  width: 100%;
  max-width: 810px;
  justify-self: start;
  animation: room-in 1s var(--ease) both;
}

@keyframes room-in {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.window-block { position: relative; }

.room-window {
  position: relative;
  width: 100%;
  padding: clamp(9px, .95vw, 13px);
  border-radius: 2px;
  background:
    linear-gradient(138deg, rgba(255, 255, 255, .18), transparent 18%),
    linear-gradient(90deg, #3e3324 0%, #6b5940 13%, #4b3d2c 46%, #756147 78%, #3b3123 100%);
  box-shadow:
    0 28px 55px rgba(0, 0, 0, .38),
    0 4px 10px rgba(0, 0, 0, .4),
    inset 0 1px 0 rgba(255, 244, 218, .26),
    inset 0 -2px 4px rgba(0, 0, 0, .34);
}

.room-window::before,
.room-window::after {
  content: "";
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

.room-window::before {
  inset: 4px;
  border: 1px solid rgba(255, 238, 207, .12);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .24);
}

.room-window::after {
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, .06), transparent 32%, transparent 72%, rgba(255, 239, 207, .025));
}

.room-glass {
  position: relative;
  width: 100%;
  aspect-ratio: 1.64 / 1;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(0, 0, 0, .52);
  background:
    linear-gradient(to bottom, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-low) 100%);
  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, .18),
    inset 0 0 0 1px rgba(255, 248, 233, .04);
  transition: background 1.2s ease;
  --sky-top: #152429;
  --sky-mid: #4d5e5c;
  --sky-low: #ba8760;
  --sun: #f3d8ae;
  --glow: rgba(244, 203, 148, .42);
  --glow-soft: rgba(244, 203, 148, .1);
  --island: #263b2e;
  --island-dark: #0e1812;
  --tree: #15271c;
  --star-opacity: .12;
  --sun-x: 76%;
  --sun-y: 32%;
  --island-x: 61%;
}

.room-glass::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(7, 12, 10, .12), transparent 22%, transparent 78%, rgba(5, 8, 6, .17)),
    radial-gradient(ellipse at 50% 112%, rgba(242, 218, 175, .12), transparent 52%);
  pointer-events: none;
}

.room-glass::after {
  content: "";
  position: absolute;
  z-index: 7;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(255, 250, 239, .035) 0 18%, transparent 18% 54%, rgba(255, 250, 239, .022) 54% 60%, transparent 60%),
    radial-gradient(ellipse at 22% 8%, rgba(255, 249, 235, .055), transparent 22%);
  pointer-events: none;
}

.room-stars {
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: var(--star-opacity);
  background-image:
    radial-gradient(circle at 8% 22%, rgba(255, 249, 230, .9) 0 .9px, transparent 1.5px),
    radial-gradient(circle at 14% 42%, rgba(255, 249, 230, .7) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 21% 14%, rgba(255, 249, 230, .8) 0 1px, transparent 1.6px),
    radial-gradient(circle at 28% 31%, rgba(255, 249, 230, .75) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 35% 9%, rgba(255, 249, 230, .65) 0 .7px, transparent 1.3px),
    radial-gradient(circle at 43% 24%, rgba(255, 249, 230, .85) 0 .9px, transparent 1.5px),
    radial-gradient(circle at 52% 13%, rgba(255, 249, 230, .7) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 58% 37%, rgba(255, 249, 230, .6) 0 .7px, transparent 1.3px),
    radial-gradient(circle at 68% 19%, rgba(255, 249, 230, .8) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 74% 8%, rgba(255, 249, 230, .7) 0 .7px, transparent 1.3px),
    radial-gradient(circle at 83% 27%, rgba(255, 249, 230, .9) 0 1px, transparent 1.6px),
    radial-gradient(circle at 92% 12%, rgba(255, 249, 230, .7) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 90% 46%, rgba(255, 249, 230, .55) 0 .7px, transparent 1.3px),
    radial-gradient(circle at 48% 48%, rgba(255, 249, 230, .55) 0 .7px, transparent 1.3px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: opacity 1.2s ease;
}

.room-cloud {
  position: absolute;
  z-index: 1;
  height: 5.5%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(242, 235, 222, .2) 22%, rgba(250, 242, 226, .26) 48%, rgba(242, 235, 222, .12) 80%, transparent);
  filter: blur(7px);
  opacity: .55;
  pointer-events: none;
}

.room-cloud-a { top: 27%; left: 8%; width: 37%; }
.room-cloud-b { top: 47%; right: 7%; width: 29%; opacity: .35; transform: scaleY(.76); }

.room-sun {
  position: absolute;
  z-index: 3;
  left: var(--sun-x);
  top: var(--sun-y);
  width: 5.7%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sun);
  box-shadow:
    0 0 23px 7px var(--glow),
    0 0 80px 30px var(--glow-soft);
  transform: translate(-50%, -50%);
  transition: left 1.2s ease, top 1.2s ease, background 1.2s ease;
}

.room-island {
  position: absolute;
  z-index: 3;
  left: var(--island-x);
  bottom: 17%;
  width: 39%;
  height: 12.5%;
  border-radius: 50% 50% 48% 48% / 60% 60% 40% 40%;
  background:
    linear-gradient(to bottom, rgba(164, 184, 144, .28), transparent 22%),
    linear-gradient(to bottom, var(--island), var(--island-dark));
  box-shadow:
    0 14px 20px rgba(5, 9, 7, .2),
    inset 0 2px 0 rgba(201, 214, 180, .12);
  transform: translateX(-50%);
  transition: left 1.2s ease, background 1.2s ease;
}

.room-island-under {
  position: absolute;
  z-index: 2;
  left: var(--island-x);
  bottom: 12%;
  width: 29%;
  height: 9%;
  background: linear-gradient(to bottom, var(--island-dark), rgba(8, 13, 10, 0));
  clip-path: polygon(8% 0, 88% 0, 72% 35%, 57% 72%, 43% 100%, 27% 58%, 12% 26%);
  transform: translateX(-50%);
  opacity: .8;
  transition: left 1.2s ease;
}

.room-tree {
  position: absolute;
  z-index: 4;
  left: calc(var(--island-x) - 4.2%);
  bottom: calc(17% + 7.6%);
  width: .7%;
  height: 12.2%;
  background: linear-gradient(to right, #1c2d21, #0e1812);
  transform: rotate(-2deg);
  transform-origin: bottom;
}

.room-tree-crown {
  position: absolute;
  z-index: 4;
  left: calc(var(--island-x) - 8.2%);
  bottom: calc(17% + 17%);
  width: 9.2%;
  height: 11.8%;
  border-radius: 52% 48% 46% 54% / 52% 56% 44% 48%;
  background:
    radial-gradient(circle at 34% 38%, rgba(140, 167, 127, .22), transparent 32%),
    linear-gradient(155deg, #263b2c, var(--tree) 60%, #0b130e);
  box-shadow: 0 5px 12px rgba(0, 0, 0, .16);
  transform: rotate(-3deg);
}

.room-tree-crown::before {
  content: "";
  position: absolute;
  left: -16%;
  bottom: 4%;
  width: 63%;
  height: 72%;
  border-radius: 50%;
  background: var(--tree);
  transform: rotate(-8deg);
}
.room-house {
  position: absolute;
  z-index: 4;
  left: calc(var(--island-x) + 6.4%);
  bottom: calc(17% + 7.5%);
  width: 5.4%;
  height: 5.2%;
  background: linear-gradient(to bottom, #3b3e31, #22271f);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .24);
}

.room-house::before {
  content: "";
  position: absolute;
  left: -12%;
  bottom: 100%;
  width: 124%;
  height: 55%;
  background: #2e342a;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.room-house::after {
  content: "";
  position: absolute;
  left: 27%;
  bottom: 16%;
  width: 28%;
  height: 36%;
  background: #e0b979;
  box-shadow: 0 0 7px rgba(224, 185, 121, .46);
}

.room-mullion {
  position: absolute;
  z-index: 6;
  background:
    linear-gradient(90deg, rgba(58, 47, 33, .92), rgba(116, 95, 65, .98) 48%, rgba(48, 39, 28, .9));
  box-shadow:
    0 0 0 1px rgba(24, 18, 12, .24),
    0 2px 9px rgba(0, 0, 0, .25);
}

.room-mullion-v { top: 0; bottom: 0; left: 50%; width: 1.15%; transform: translateX(-50%); }
.room-mullion-h { left: 0; right: 0; top: 54%; height: 1.25%; transform: translateY(-50%); }

.window-caption,
.window-readout {
  position: absolute;
  z-index: 5;
  color: rgba(247, 240, 225, .58);
  font-size: clamp(6.5px, .6vw, 8px);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(4, 7, 5, .5);
}

.window-caption { top: 4.2%; left: 4.6%; }
.window-readout { bottom: 4.5%; left: 4.6%; display: flex; align-items: center; gap: 9px; }
.readout-rule { width: 16px; height: 1px; background: rgba(247, 240, 225, .24); }

.window-sill {
  width: calc(100% + 28px);
  height: clamp(16px, 1.7vw, 22px);
  margin: -1px 0 0 -14px;
  position: relative;
  background: linear-gradient(to bottom, #6c593f, #433625 48%, #2b2218);
  box-shadow:
    0 8px 12px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 243, 216, .2);
}

.window-sill::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 5px;
  background: rgba(0, 0, 0, .18);
}

.desk {
  position: relative;
  width: calc(100% + 22px);
  margin: -3px 0 0 -11px;
  padding: clamp(17px, 2vw, 24px) clamp(16px, 2.3vw, 30px) clamp(15px, 1.8vw, 20px);
  overflow: hidden;
  background:
    repeating-linear-gradient(91deg, transparent 0 43px, rgba(255, 240, 210, .012) 43px 44px, transparent 44px 87px),
    linear-gradient(96deg, rgba(255, 240, 210, .04), transparent 29%, transparent 68%, rgba(255, 240, 210, .035)),
    linear-gradient(to bottom, #3a2d21, #281f16 42%, #1b150f);
  box-shadow:
    0 18px 20px -12px rgba(0, 0, 0, .65),
    inset 0 1px 0 rgba(255, 240, 211, .17),
    inset 0 -1px 0 rgba(0, 0, 0, .45);
}

.desk::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  height: 13px;
  background: linear-gradient(to bottom, rgba(255, 238, 206, .08), transparent);
  pointer-events: none;
}

.desk::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  background: rgba(4, 7, 5, .38);
  opacity: 0;
  pointer-events: none;
  transition: opacity .65s ease;
}

body.lamp-off .desk::after { opacity: 1; }
body.lamp-off .desk-glow { opacity: 0; }
body.lamp-off .object-lamp .object-icon { color: var(--cream-faint); filter: none; }

.desk-glow {
  position: absolute;
  z-index: 1;
  inset: -80% -20% -30% 30%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 77% 67%, rgba(255, 202, 129, .38), transparent 27%),
    radial-gradient(ellipse at 77% 67%, rgba(255, 188, 105, .14), transparent 58%);
  mix-blend-mode: screen;
  transition: opacity .65s ease;
}

.desk-objects {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: clamp(4px, .7vw, 9px);
}

.desk-object {
  min-width: 0;
  min-height: 72px;
  padding: 5px 2px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: rgba(242, 237, 225, .74);
  appearance: none;
  transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}

.object-cup { margin-bottom: 2px; }
.object-ledger { margin-bottom: 6px; }
.object-postcard { margin-bottom: 1px; }
.object-key { margin-bottom: 7px; }
.object-stone { margin-bottom: 3px; }

.object-lamp { position: relative; }

.object-lamp::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 19px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 195, 113, .24), transparent 68%);
  filter: blur(5px);
  transform: translateX(-50%);
  opacity: .9;
  pointer-events: none;
  transition: opacity .65s ease;
}

body.lamp-off .object-lamp::before { opacity: 0; }

.desk-object:hover,
.desk-object:focus-visible {
  color: var(--brass-light);
  border-color: rgba(210, 179, 132, .18);
  background: rgba(210, 179, 132, .045);
}

.desk-object:focus-visible { outline-offset: 2px; }

.object-icon {
  width: clamp(30px, 3.2vw, 40px);
  height: clamp(30px, 3.2vw, 40px);
  display: grid;
  place-items: center;
  color: inherit;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28));
  transition: color .25s ease, filter .25s ease, transform .25s ease;
}

.object-icon svg { width: 100%; height: 100%; }
.desk-object:hover .object-icon,
.desk-object:focus-visible .object-icon { transform: translateY(-2px); }

.object-lamp .object-icon {
  color: #e0b97d;
  filter: drop-shadow(0 0 7px rgba(234, 186, 115, .34)) drop-shadow(0 2px 3px rgba(0, 0, 0, .28));
}

.object-label {
  max-width: 100%;
  color: rgba(242, 237, 225, .58);
  font-size: clamp(7px, .62vw, 8.5px);
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .25s ease;
}

.desk-object:hover .object-label,
.desk-object:focus-visible .object-label { color: var(--cream-soft); }
.object-lamp .object-label { color: rgba(224, 185, 125, .78); }
body.lamp-off .object-lamp .object-label { color: var(--cream-faint); }

.stage-note {
  margin: 13px 0 0;
  color: rgba(242, 237, 225, .3);
  font-family: var(--serif);
  font-size: 11px;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 13px;
  border-top: 1px solid rgba(242, 237, 225, .08);
}

.footer-note {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--cream-faint);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.footer-signature {
  gap: 10px;
  font-weight: 500;
  letter-spacing: .11em;
}

.footer-signature a { transition: color .2s ease; }
.footer-signature a:hover { color: var(--brass-light); }
.footer-rule { width: 18px; height: 1px; background: rgba(242, 237, 225, .16); }

.noscript-note {
  position: fixed;
  z-index: 40;
  right: 18px;
  bottom: 18px;
  max-width: 330px;
  padding: 13px 15px;
  border: 1px solid rgba(242, 237, 225, .15);
  background: rgba(11, 17, 13, .94);
  color: var(--cream-soft);
  font-size: 11px;
  line-height: 1.6;
}

.noscript-note a { color: var(--brass-light); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1120px) {
  .room-page {
    grid-template-columns: minmax(300px, .76fr) minmax(470px, 1.24fr);
    gap: clamp(30px, 4.2vw, 60px);
  }

  h1 { font-size: clamp(62px, 7.3vw, 91px); }
  .room-copy { max-width: 500px; }
  .object-icon { width: 30px; height: 30px; }
}

@media (max-width: 940px) {
  .opened-label { display: none; }

  .room-page {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    align-content: start;
    gap: clamp(30px, 5vw, 46px);
    padding-top: clamp(30px, 5vh, 54px);
  }

  .room-copy { max-width: 680px; justify-self: start; }
  .room-stage { max-width: 800px; justify-self: center; }
  h1 { font-size: clamp(66px, 10vw, 96px); }
  .room-lede, .room-body { max-width: 58ch; }
}

@media (max-width: 620px) {
  .site-shell { padding: 16px 18px 14px; }
  .site-header { min-height: 36px; }
  .brand { gap: 7px; }
  .brand-mark { width: 26px; height: 26px; }
  .brand-title, .brand-slash { display: none; }
  .header-actions { gap: 8px; }
  .quiet-button { min-height: 29px; padding: 0 10px; font-size: 8px; letter-spacing: .1em; }

  .room-page { padding-top: 28px; gap: 28px; padding-bottom: 24px; }
  h1 { font-size: clamp(62px, 17vw, 82px); margin-top: 24px; }
  .room-lede { font-size: 13px; line-height: 1.7; margin-top: 22px; }
  .room-body { margin-top: 20px; }
  .room-body p { font-size: 14.5px; line-height: 1.65; }
  .room-controls { flex-wrap: wrap; row-gap: 11px; margin-top: 23px; padding-top: 12px; }
  .room-hint { font-size: 11.5px; }

  .room-glass { aspect-ratio: 1.5 / 1; }
  .room-sun { width: 7%; }
  .window-caption { font-size: 7px; letter-spacing: .11em; }
  .window-readout { display: block; font-size: 7px; line-height: 1.65; }
  .window-readout .readout-rule { display: none; }
  #roomLight { display: block; }

  .desk { width: calc(100% + 12px); margin-left: -6px; padding: 15px 10px 14px; }
  .desk-objects { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px 6px; }
  .desk-object { margin-bottom: 0; min-height: 62px; padding: 4px 2px; gap: 6px; }
  .object-icon { width: 30px; height: 30px; }
  .object-label { font-size: 7px; letter-spacing: .08em; }
  .stage-note { margin-top: 11px; font-size: 10px; }

  .site-footer { flex-direction: column; align-items: flex-start; gap: 7px; padding-top: 11px; }
  .footer-note { font-size: 7px; }
  .footer-signature { width: 100%; justify-content: space-between; }
}

@media (max-height: 760px) and (min-width: 941px) {
  .site-shell { padding-top: 13px; padding-bottom: 11px; }
  .site-header { min-height: 34px; }
  .room-page { padding-top: 16px; padding-bottom: 12px; }
  h1 { margin-top: 23px; font-size: clamp(62px, 6.5vw, 92px); }
  .room-lede { margin-top: 20px; }
  .room-body { margin-top: 17px; }
  .room-body p { margin-bottom: 10px; font-size: 14px; line-height: 1.6; }
  .room-controls { margin-top: 20px; padding-top: 10px; }
  .room-window { padding: 9px; }
  .room-glass { aspect-ratio: 1.78 / 1; }
  .desk { padding-top: 13px; padding-bottom: 11px; }
  .desk-object { min-height: 54px; gap: 5px; }
  .object-icon { width: 27px; height: 27px; }
  .stage-note { margin-top: 8px; }
  .site-footer { padding-top: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}