/* 滿版桌面：桌景依照片比例鋪滿畫面（cover），超出的部分可以拖曳；物件位置以桌景照片的百分比定位 */
.experience { position: fixed; inset: 0; overflow: hidden; padding: 0; background: #0b0907; }
.desk { position: relative; width: 100%; height: 100%; }

.desk__viewport { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; cursor: grab; }
.desk__viewport::-webkit-scrollbar { display: none; }
.desk__viewport.is-dragging { cursor: grabbing; user-select: none; }
.desk__viewport.is-dragging .desk-object { pointer-events: none; }

.desk__stage {
  --desk-ratio: 1.7768;
  --desk-img: url('../assets/images/interactive-desk.webp');
  --desk-zoom: 1;
  position: relative;
  width: max(100vw * var(--desk-zoom), calc(100dvh * var(--desk-ratio) * var(--desk-zoom)));
  height: max(100dvh * var(--desk-zoom), calc(100vw / var(--desk-ratio) * var(--desk-zoom)));
  background: #120c08;
  isolation: isolate;
}
.desk__stage::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0.42), transparent 22%, transparent 70%, rgba(0,0,0,0.4)); pointer-events: none; }
.desk__photo { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }

/* 下方提示：電腦版放在收音機下方的空處，不蓋住其他物件 */
.desk__drag-hint { position: absolute; z-index: 15; left: max(1rem, var(--safe-left)); bottom: max(1rem, var(--safe-bottom)); width: max-content; max-width: min(26rem, calc(100% - 2rem)); margin: 0; padding: 0.55rem 1.2rem; border: 1px solid rgba(255, 214, 170, 0.35); border-radius: 1.2rem; color: #fff3dc; background: rgba(10, 7, 5, 0.78); font: 700 1rem/1.5 var(--hand); text-align: left; pointer-events: none; animation: drag-hint 3.2s ease-in-out infinite; }
.desk__drag-hint[hidden] { display: none; }
@keyframes drag-hint { 50% { border-color: rgba(255, 214, 170, 0.7); box-shadow: 0 0 1.2rem rgba(255, 170, 90, 0.25); } }

/* 總編的便條：進桌面時攤開，按「開始整理」收成左上角的小便條 */
/* 便條貼在桌景左上角的空處（新桌景刻意留白），不擋到收音機 */
.editor-note { position: absolute; z-index: 25; top: calc(var(--safe-top) + 3.6rem); left: max(1rem, var(--safe-left)); width: min(28rem, calc(100% - 2rem)); pointer-events: none; }
.editor-note > * { pointer-events: auto; }
.editor-note__paper { position: relative; padding: 1.15rem 1.35rem 1rem; color: var(--paper-ink); background: #efe4cc; box-shadow: 0 1.4rem 2.6rem rgba(0,0,0,0.55); transform: rotate(-1.2deg); }
.editor-note__paper::before { content: ''; position: absolute; top: -0.65rem; left: 1.5rem; width: 5.5rem; height: 1.4rem; background: rgba(226, 204, 140, 0.85); transform: rotate(-4deg); }
.editor-note__from { margin: 0 0 0.4rem; color: #a3402b; font: 700 0.72rem var(--sans); letter-spacing: 0.12em; }
.editor-note h1 { margin: 0 0 0.45rem; font: 600 clamp(1.25rem, 1.8vw, 1.75rem)/1.25 var(--serif); text-wrap: balance; }
.editor-note__paper > p:not([class]) { margin: 0 0 0.45rem; color: #4d3d2f; font: 400 0.84rem/1.6 var(--sans); }
.editor-note .primary-button { color: #f4ecd6; background: #a3402b; border-color: #a3402b; }
.editor-note .primary-button:hover { background: #8a3220; }
.editor-note__tab { display: none; padding: 0.55rem 0.9rem; border: 0; color: var(--paper-ink); background: #efe4cc; box-shadow: 0 0.8rem 1.6rem rgba(0,0,0,0.5); font: 700 0.95rem var(--hand); transform: rotate(-2deg); cursor: pointer; }
.editor-note.is-collapsed .editor-note__paper { display: none; }
.editor-note.is-collapsed .editor-note__tab { display: inline-block; }

/* 物件熱區：位置以桌景照片（電腦版 1672×941，左上角留給總編的便條）的百分比定位（--x --y --w），--ar 是熱區寬高比，--dx --dy 是提示小點在熱區裡的位置 */
.desk-object {
  --dx: 50%;
  --dy: 50%;
  position: absolute;
  top: calc(var(--y) * 1%);
  left: calc(var(--x) * 1%);
  width: calc(var(--w) * 1%);
  display: block;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.desk-object:focus-visible { outline: none; }
.desk-object--computer { --x: 31.1; --y: 29.2; --w: 32.2; --ar: 1.47; --dx: 50%; --dy: 35%; z-index: 2; }
.desk-object--notebook { --x: 27.5; --y: 69.1; --w: 25.7; --ar: 1.79; --dx: 58%; --dy: 48%; z-index: 3; }
.desk-object--map { --x: 47.2; --y: 0; --w: 38; --ar: 1.92; --dx: 50%; --dy: 55%; }
.desk-object--speaker { --x: 2.1; --y: 51; --w: 25.1; --ar: 1.42; --dx: 50%; --dy: 60%; z-index: 3; }
.desk-object--photo { --x: 54.1; --y: 71.2; --w: 23.9; --ar: 2; --dx: 45%; --dy: 45%; z-index: 4; }

/* 滑過時：從桌景裁出同一塊畫面疊上去，放大一點、變亮，物件看起來像被拿起來；邊緣用遮罩淡掉，看不出接縫 */
.desk-object__visual {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ar);
  background: var(--desk-img) no-repeat;
  background-size: calc(10000% / var(--w)) calc(10000% * var(--ar) / (var(--w) * var(--desk-ratio)));
  background-position: calc(var(--x) / (100 - var(--w)) * 100%) calc(var(--y) / (100 - var(--w) * var(--desk-ratio) / var(--ar)) * 100%);
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 55%, transparent 100%);
  opacity: 0;
  transition: opacity 220ms ease, transform 320ms cubic-bezier(0.2, 0.8, 0.3, 1), filter 320ms ease;
}
.desk-object:hover .desk-object__visual,
.desk-object:focus-visible .desk-object__visual { opacity: 1; transform: scale(1.06); filter: brightness(1.22) saturate(1.12); }

/* 呼吸的小點：提示這裡可以點；看過之後變成小勾勾 */
.object-glow { position: absolute; z-index: 3; top: var(--dy); left: var(--dx); width: 1.05rem; height: 1.05rem; margin: -0.525rem 0 0 -0.525rem; border: 2px solid #fff2cf; border-radius: 50%; background: #e9974f; box-shadow: 0 0 0 0.3rem rgba(255, 190, 122, 0.16), 0 0 1.4rem 0.45rem rgba(255, 136, 66, 0.6); pointer-events: none; animation: object-pulse 2.2s ease-in-out infinite; }
@keyframes object-pulse { 50% { transform: scale(1.25); box-shadow: 0 0 0 0.55rem rgba(255, 190, 122, 0.05), 0 0 2rem 0.7rem rgba(255, 136, 66, 0.75); } }
.desk-object.is-done .object-glow { display: grid; place-items: center; border-color: #fff8e6; background: rgba(242, 237, 226, 0.92); box-shadow: 0 0 0.8rem rgba(255, 190, 122, 0.35); animation: none; }
.desk-object.is-done .object-glow::after { content: '✓'; color: #2b1d13; font: 800 0.7rem/1 var(--sans); }
.desk-object:focus-visible .object-glow { outline: 2px solid var(--ember-bright); outline-offset: 4px; }

/* 物件名稱：寫在小點上方的手寫標註，箭頭指著小點 */
.desk-object__copy { position: absolute; z-index: 3; left: var(--dx); bottom: calc(100% - var(--dy) + 0.75rem); display: grid; justify-items: center; color: #fff3dc; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 0.8rem rgba(0, 0, 0, 0.85); white-space: nowrap; transform: translateX(-50%) rotate(-4deg); pointer-events: none; transition: transform 240ms ease; }
.desk-object__copy strong { font: 700 clamp(1.05rem, 1.5vw, 1.35rem)/1.2 var(--hand); letter-spacing: 0.04em; }
.desk-object__copy em { display: none; }
.desk-object__copy::after { content: ''; width: 1.1rem; height: 0.85rem; margin-top: 0.05rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 17'%3E%3Cpath d='M4 2c6 1 9 5 9 12m-4-3 4 4 4-5' fill='none' stroke='%23fff3dc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9)); }
.desk-object:hover .desk-object__copy,
.desk-object:focus-visible .desk-object__copy { transform: translateX(-50%) rotate(-4deg) translateY(-0.25rem); }

.desk-object--wish { z-index: 4; left: 5%; bottom: 4%; width: 17%; transform: rotate(-5deg); }
.wish-visual { aspect-ratio: 1.4 / 1; display: grid; place-items: center; padding: 1rem; color: #4a3425; background: #d8bd86; box-shadow: 0 1rem 1.6rem #000; font: 600 clamp(0.82rem, 1.25vw, 1.1rem) var(--serif); text-align: center; }

.object-dialog { width: min(43rem, calc(100% - 2rem)); max-height: min(88dvh, 52rem); overflow: auto; padding: clamp(1.5rem, 4vw, 3.5rem); border: 1px solid rgba(255, 183, 120, 0.26); color: var(--ink); background: linear-gradient(145deg, #231913, #0d0b09 70%); box-shadow: 0 2rem 7rem #000; }
.object-dialog--wide { width: min(72rem, calc(100% - 2rem)); }
.object-dialog::backdrop { background: rgba(3, 2, 2, 0.82); backdrop-filter: blur(8px); }
.object-dialog .dialog-close { color: var(--ink); }
.object-dialog h2 { max-width: 17em; margin: 0 0 1rem; font: 600 clamp(1.8rem, 5vw, 3.4rem)/1.18 var(--serif); text-wrap: balance; }
.object-dialog > p:last-child { color: var(--ink-muted); }
.dialog-photo { width: 100%; max-height: 55dvh; object-fit: cover; filter: sepia(0.18); }
.dialog-lede--dark { color: var(--ink-muted); }

.story-form { display: grid; gap: 0.8rem; margin-top: 1.5rem; }
.story-form label { font: 600 1rem var(--serif); }
.story-form textarea,
.story-form input[type='text'],
.story-form input[type='email'] {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 0;
  color: var(--ink);
  background: rgba(0,0,0,0.34);
}
.story-form textarea { min-height: 8rem; resize: vertical; padding: 0.9rem; }
.story-form input[type='email'],
.story-form input[type='text'] { width: 100%; min-height: 3rem; padding: 0 0.9rem; }
.story-form input[type='file'] { max-width: 100%; color: var(--ink-muted); font-size: 0.8rem; }
.file-field { display: grid; margin-top: 0.5rem; }
.file-field small,
.form-footer small { color: var(--ink-muted); font: 400 0.72rem/1.5 var(--sans); }
.memory-preview { width: min(100%, 26rem); max-height: 18rem; object-fit: cover; border: 1px solid var(--line); }
.form-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.35rem; }
.form-status { margin: 0; padding: 0.65rem 0.75rem; border-left: 2px solid #8fb58c; color: #c9e3c7; background: rgba(42, 74, 41, 0.24); font-size: 0.82rem; }
.form-status[data-kind='error'] { border-color: var(--ember-bright); color: #ffd0b2; background: rgba(114, 41, 22, 0.26); }

/* 總編 CHECK LIST：固定在畫面右下角的紙條 */
.checklist { position: fixed; z-index: 20; right: var(--safe-right); bottom: var(--safe-bottom); width: min(18.5rem, calc(100% - 2rem)); color: var(--paper-ink); background: #efe4cc; box-shadow: 0 1.2rem 3rem rgba(0,0,0,0.6); transform: rotate(-0.6deg); }
.checklist::before { content: ''; position: absolute; top: -0.6rem; left: 50%; width: 5.5rem; height: 1.4rem; background: rgba(226, 204, 140, 0.8); transform: translateX(-50%) rotate(-3deg); }
.checklist__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 3rem; padding: 0.9rem 1.1rem 0.5rem; border: 0; color: inherit; background: transparent; font: 700 1rem var(--sans); letter-spacing: 0.08em; cursor: pointer; }
.checklist__progress { padding: 0.1rem 0.5rem; border: 1.5px solid #a3402b; color: #a3402b; font: 700 0.8rem var(--sans); }
.checklist.is-ready .checklist__progress { border-color: #2f6b3a; color: #2f6b3a; }
.checklist.is-collapsed .checklist__body { display: none; }
.checklist__body { padding: 0 1.1rem 1rem; }
.checklist__lede { margin: 0 0 0.6rem; color: #6d5a48; font: 400 0.8rem/1.5 var(--sans); }
.checklist__items { display: grid; gap: 0.2rem; margin: 0; padding: 0; list-style: none; }
.checklist__item,
.checklist__depart { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.65rem; width: 100%; padding: 0.5rem 0.3rem; border: 0; border-bottom: 1px dashed rgba(39, 29, 22, 0.25); color: inherit; background: transparent; text-align: left; font-family: var(--hand); cursor: pointer; }
.checklist__item:hover { background: rgba(255, 214, 72, 0.22); }
.checklist__item strong,
.checklist__depart strong { display: block; font: 700 1.05rem/1.4 var(--hand); }
.checklist__item small,
.checklist__depart small { display: block; color: #7a6a52; font: 400 0.75rem/1.4 var(--sans); }
.checklist__box { position: relative; width: 1.2rem; height: 1.2rem; margin-top: 0.15rem; border: 2px solid #3a2c20; }
.checklist__item.is-checked .checklist__box::after { content: '✓'; position: absolute; left: 0.05rem; top: -0.55rem; color: #a3402b; font: 800 1.45rem/1 var(--hand); }
.checklist__item.is-checked strong { text-decoration: line-through; text-decoration-color: rgba(163, 64, 43, 0.7); }
.checklist__depart { margin-top: 0.5rem; padding: 0.65rem 0.6rem; border: 2px solid #3a2c20; }
.checklist__depart:disabled { opacity: 0.45; cursor: not-allowed; }
.checklist__depart:not(:disabled) { color: #f4ecd6; background: #a3402b; border-color: #a3402b; }
.checklist__depart:not(:disabled) small { color: #f7dccb; }
.checklist__depart:not(:disabled) .checklist__box { border-color: #f4ecd6; }
.checklist__depart:not(:disabled):hover { background: #8a3220; }

@media (max-width: 720px) {
  .checklist { right: 0; bottom: 0; width: 100%; transform: none; }
  .checklist::before { display: none; }
  .form-footer { align-items: stretch; flex-direction: column; }
  .board-form__row { grid-template-columns: 1fr; }
  .paper-post:first-child { display: block; }
  .object-dialog { width: calc(100% - 1rem); max-height: 94dvh; padding: 1.2rem; }
}


/* 留言板：投稿表單；讀者版用報紙排版 */
.board-form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.board-form__row > div { display: grid; gap: 0.4rem; }
.board-form__row .file-field { margin-top: 0; }
.board-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.board-privacy { margin: 0; color: var(--ink-muted); font: 400 0.76rem/1.6 var(--sans); }

.paper { margin-top: 1.25rem; padding: clamp(1rem, 3vw, 2rem); color: #1f1a14; background: #efe8d8; box-shadow: inset 0 0 4rem rgba(120, 96, 60, 0.18); font-family: var(--serif); }
.paper__masthead { text-align: center; border-bottom: 3px double #1f1a14; padding-bottom: 0.8rem; margin-bottom: 1rem; }
.paper__meta { display: flex; justify-content: space-between; margin: 0 0 0.4rem; padding-bottom: 0.3rem; border-bottom: 1px solid #1f1a14; font: 600 0.7rem var(--sans); letter-spacing: 0.12em; }
.paper__title { margin: 0; font: 900 clamp(2.2rem, 6vw, 3.8rem)/1.05 var(--serif); letter-spacing: 0.2em; }
.paper__sub { margin: 0.4rem 0 0; color: #4b4135; font-size: 0.82rem; }
.paper__status { margin: 0 0 0.6rem; color: #6b5d4b; font: 400 0.8rem var(--sans); }
.paper__status:empty { display: none; }
.paper__columns { columns: 3 15rem; column-gap: 1.6rem; column-rule: 1px solid rgba(31, 26, 20, 0.35); }
.paper-post { break-inside: avoid; margin: 0 0 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(31, 26, 20, 0.35); }
.paper-post:first-child { column-span: all; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 1.6rem; border-bottom: 2px solid #1f1a14; }
.paper-post:first-child > :not(.paper-post__figure) { grid-column: 2; }
.paper-post:first-child .paper-post__figure { grid-column: 1; grid-row: 1 / span 6; margin: 0; }
.paper-post:first-child:not(.paper-post--photo) { display: block; }
.paper-post:first-child .paper-post__headline { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.paper-post__kicker { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.3rem; color: #a3402b; font: 700 0.72rem var(--sans); letter-spacing: 0.12em; }
.paper-post__sample { padding: 0 0.35rem; border: 1px solid currentColor; font-size: 0.65rem; letter-spacing: 0.05em; }
.paper-post__headline { margin: 0 0 0.6rem; font: 800 1.25rem/1.35 var(--serif); }
.paper-post__figure { margin: 0 0 0.6rem; }
.paper-post__figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(0.35) contrast(1.05); }
.paper-post__figure figcaption { margin-top: 0.25rem; color: #6b5d4b; font: 400 0.68rem var(--sans); }
.paper-post__body { margin: 0 0 0.6rem; font-size: 0.95rem; line-height: 1.85; text-align: justify; }
.paper-post__prompt { margin: 0 0 0.5rem; color: #6b5d4b; font: 400 0.72rem/1.5 var(--sans); }
.paper-post__footer { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; font: 600 0.8rem var(--sans); }
.paper-like { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.2rem; padding: 0 0.7rem; border: 1px solid #1f1a14; color: #1f1a14; background: transparent; font: 700 0.85rem var(--sans); cursor: pointer; }
.paper-like[aria-pressed='true'] { color: #f4ecd6; background: #a3402b; border-color: #a3402b; cursor: default; }
.paper-like:disabled { opacity: 0.6; }

/* 直式畫面（手機）：換成直式桌景與對應的物件位置，名稱常駐顯示 */
@media (max-aspect-ratio: 4/5) {
  /* 直式桌景剛好塞滿畫面高度；物件都放在中間 70% 寬，兩側被裁掉也不會切到物件 */
  .desk__stage { --desk-ratio: 0.6667; --desk-zoom: 1; --desk-img: url('../assets/images/interactive-desk-mobile.webp'); }
  /* 直式桌景（1024×1536） */
  .desk-object--map { --x: 37.6; --y: 0; --w: 57.6; --ar: 1.39; --dx: 45%; --dy: 60%; }
  .desk-object--speaker { --x: 2; --y: 46.2; --w: 32.7; --ar: 1.34; --dx: 66%; --dy: 55%; }
  .desk-object--computer { --x: 33.7; --y: 27.7; --w: 44.4; --ar: 1.12; --dx: 50%; --dy: 35%; }
  .desk-object--notebook { --x: 11.7; --y: 63.8; --w: 41; --ar: 1.47; --dx: 58%; --dy: 48%; }
  .desk-object--photo { --x: 52.2; --y: 66.4; --w: 40; --ar: 1.55; --dx: 40%; --dy: 45%; }
  /* 手機：便條貼在上方、蓋在地圖上，精簡成標語＋說明，盡量不碰到下面的收音機 */
  .editor-note { top: calc(var(--safe-top) + 3.8rem); }
  .editor-note__paper { padding: 1rem 1.1rem 0.9rem; }
  .editor-note h1 { font-size: 1.2rem; }
  .editor-note__paper > p:not([class]) { font-size: 0.85rem; }
  /* 手機：便條收起後，提示出現在上方原本便條的位置 */
  .desk__drag-hint { top: calc(var(--safe-top) + 6.6rem); right: max(1rem, var(--safe-right)); bottom: auto; left: max(1rem, var(--safe-left)); width: auto; max-width: none; font-size: 0.92rem; text-align: center; }
}

/* 桌上可以點的小東西：光點比主要物件小、暗，閃爍節奏錯開（--glow-delay 由 js/props.js 依序設定）；點過就熄掉 */
.desk-prop { z-index: 1; }
.object-glow--minor { width: 0.62rem; height: 0.62rem; margin: -0.31rem 0 0 -0.31rem; border-width: 1.5px; border-color: rgba(255, 242, 207, 0.8); background: rgba(233, 151, 79, 0.75); box-shadow: 0 0 0.8rem 0.2rem rgba(255, 136, 66, 0.4); opacity: 0.85; animation: minor-pulse 3.4s ease-in-out var(--glow-delay, 0s) infinite; transition: opacity 300ms ease; }
@keyframes minor-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 0.95; transform: scale(1.1); } }
.desk-prop.is-seen .object-glow--minor { opacity: 0; animation: none; }
.desk-prop--lamp { --x: 10.5; --y: 6.4; --w: 14.4; --ar: 1.55; }
.desk-prop--window { --x: 32; --y: 0; --w: 12.6; --ar: 0.79; }
.desk-prop--mug { --x: 64.6; --y: 51; --w: 9; --ar: 1.07; z-index: 3; }
.desk-prop--shelf { --x: 88.5; --y: 0; --w: 11.5; --ar: 0.58; }
/* 記者證掛在軟木板右下角的圖釘上（畫在桌景裡），光點在證件上 */
.desk-prop--badge { --x: 79.2; --y: 29.8; --w: 5.8; --ar: 0.36; --dx: 50%; --dy: 88%; z-index: 2; }

/* 手寫文字泡泡 */
.prop-note { position: fixed; z-index: 40; width: max-content; max-width: min(21rem, calc(100vw - 2rem)); margin: 0; padding: 0.65rem 0.9rem; color: #2b1d13; white-space: pre-line; background: #f4ecd6; box-shadow: 0 0.8rem 1.6rem rgba(0, 0, 0, 0.5); font: 700 1.02rem/1.55 var(--hand); transform: translate(-50%, -100%) rotate(-1.5deg); pointer-events: none; animation: prop-note-in 220ms ease; }
.prop-note::after { content: ''; position: absolute; left: 50%; bottom: -0.45rem; width: 0.9rem; height: 0.9rem; margin-left: -0.45rem; background: inherit; transform: rotate(45deg); }
.prop-note[hidden] { display: none; }
@keyframes prop-note-in { from { opacity: 0; transform: translate(-50%, calc(-100% + 0.4rem)) rotate(-1.5deg); } }


@media (max-aspect-ratio: 4/5) {
  .desk-prop--lamp { --x: 9.8; --y: 15.6; --w: 21.5; --ar: 1.1; }
  .desk-prop--window { --x: 15.6; --y: 0; --w: 18; --ar: 0.63; }
  .desk-prop--mug { --x: 78; --y: 46.2; --w: 15; --ar: 1.03; }
  .desk-prop--shelf { display: none; }
  .desk-prop--badge { --x: 85.4; --y: 23.8; --w: 9.8; --ar: 0.37; --dx: 50%; --dy: 88%; }
}