/* Six peer objects share the desk; each opens into its own reading or playback view. */
.sr-only { position:absolute!important; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.stage { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); align-content:center; align-items:center; justify-items:center; gap:38px 28px; width:min(1000px,100%); min-height:640px; padding:36px 0; }
.object-rack { display:contents; }
.stage .notebook { grid-column:span 2; width:70%; max-width:200px; height:auto; min-height:0; aspect-ratio:3/4; }
.stage .notebook:not(.is-open) { margin:0; transform:rotate(-3deg); }
.stage .notebook:not(.is-open):hover { transform:translateY(-6px) rotate(-1deg); }
.stage .desk-object { position:relative; inset:auto; grid-column:span 2; width:100%; max-width:260px; min-height:0; margin:0; transform:none; }
.stage .cd-player { transform:rotate(-8deg); }
.stage .camcorder { width:110%; max-width:285px; transform:rotate(5deg); }
.stage .mailbox { grid-column:1 / span 2; max-width:250px; transform:rotate(-3deg); }
.stage .quote-board { grid-column:3 / span 2; width:110%; max-width:285px; transform:rotate(3deg); }
.stage .film-camera { grid-column:5 / span 2; width:110%; max-width:285px; transform:rotate(-4deg); }
.stage .desk-object:hover { transform:translateY(-6px) rotate(0); }
.stage .object-photo { max-height:none; }
.quote-board .object-photo { aspect-ratio:1.3; }
.cover-front { container-type:inline-size; background:transparent; border:0; box-shadow:none; overflow:visible; }
.notebook-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.notebook:not(.is-open)::after { opacity:0; }
/* Cover lettering scales with the physical cover, rather than the viewport. */
.name-label { top:24%; left:31%; right:15%; height:23%; padding:0; border:0; background:none; box-shadow:none; border-radius:0; transform:none; display:flex; flex-direction:column; justify-content:center; }
.label-title { font:900 4.9cqw/1.05 Arial,Helvetica,sans-serif; letter-spacing:.01em; border:0; padding:0; margin-bottom:1.4cqw; }
.label-name,.label-location { display:block; margin:0 8%; border-bottom:1px solid #8d8c86; text-transform:none; letter-spacing:0; white-space:nowrap; font:400 7.2cqw/1.12 var(--hand); }
.label-location { font-size:6.1cqw; margin-top:1.2cqw; }
.label-sub { font:400 2.1cqw/1.2 Georgia,serif; letter-spacing:0; text-transform:none; text-align:left; margin:1.6cqw 8% 0; }
.work-label { top:57%; left:19%; right:7%; gap:2.3cqw; }
.work-label > span { flex:1; min-width:0; max-width:none; font-size:5.2cqw; line-height:1.15; padding:2.2cqw 2.5cqw; }
.clay-sticker { flex-shrink:0; padding:1.2cqw 3cqw; border-radius:3.2cqw; }
.clay-sticker img { width:30cqw; height:16.2cqw; }
.toc li { margin-bottom:32px; }
.toc-line { color:#323630; text-decoration:none; padding-right:0; padding-left:30px; font-size:20px; line-height:32px; }
.toc-line::after { display:none; }
.toc-line .essay-number { position:absolute; left:0; top:0; float:none; color:#878a7e; font-size:15px; }
.toc-line:hover { color:#884730; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
/* Opening an object provides room to read without changing its closed desk size. */
.stage:has(.notebook.is-open) { display:flex; min-height:640px; }
.stage:has(.notebook.is-open) .object-rack { display:none; }
.stage .notebook.is-open { width:min(430px,100%); max-width:430px; height:590px; min-height:590px; margin:0; transform:translateX(20%) rotate(0); }
@media(max-width:999px) {
 .stage { min-height:580px; gap:32px 20px; }
 .stage .notebook.is-open { transform:none; }
 .is-open .cover { transform:rotateY(-105deg); visibility:hidden; }
}
@media(max-width:650px) {
 .stage { width:min(430px,100%); grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 18px; min-height:0; padding:28px 0; }
 .stage .camcorder { grid-column:1 / span 2; }
 .stage .mailbox { grid-column:3 / span 2; }
 .stage .quote-board { grid-column:1 / span 2; }
 .stage .film-camera { grid-column:3 / span 2; }
 .stage .notebook.is-open { width:100%; }
}
/* An actual local film, clean and unobstructed inside the CRT. */
#bhaumik-video { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; background:#000; }
/* One line of social marks; the rest of the mailbox is stationery. */
.object-dialog[data-room="mailbox"] { width:min(590px,calc(100vw - 24px)); background:#e9e4d8; }
[data-room="mailbox"] .dialog-inner { padding:22px; }
[data-room="mailbox"] .dialog-head { margin-bottom:8px; }
[data-room="mailbox"] .dialog-head h2 { font:18px Georgia,serif; }
.mail-links { display:flex; justify-content:center; gap:28px; padding:0 0 20px; }
.mail-links a { display:flex; align-items:center; gap:7px; padding:8px 0; font:13px var(--ui); border:0; }
.mail-links a:hover { padding-left:0; color:#506f81; }
.mail-links svg { width:20px; height:20px; fill:currentColor; }
.letter-form { margin:0; padding:0; border:0; }
.letter-paper { background:#fffdf5; padding:24px 30px 28px; box-shadow:0 2px 3px #30251020,0 6px 20px #3025100c; color:#3c403c; }
.letter-date { display:block; text-align:right; font:12px Georgia,serif; color:#8c8779; margin-bottom:30px; }
.letter-form h3 { font:italic 24px Georgia,serif; margin:0 0 22px; }
.letter-form textarea { min-height:224px; margin:0; padding:0; border:0; border-radius:0; background:repeating-linear-gradient(transparent 0 31px,#cbc6b64a 31px 32px); font:18px/32px Georgia,serif; color:#333c43; }
.letter-form textarea::placeholder,.letter-form input::placeholder { color:#a6a194; }
.letter-signoff { margin:25px 0 5px; font:italic 19px Georgia,serif; }
.letter-form input { width:65%; padding:5px 0; margin:0; border:0; border-bottom:1px solid #d7d0bf; background:transparent; font:italic 20px/1.5 Georgia,serif; }
#letter-send { display:block; margin:22px auto 0; padding:11px 28px; border:1px solid #969786; border-radius:2px; background:#f5f2e8; color:#3c4946; font:15px Georgia,serif; cursor:pointer; }
#letter-send:hover { background:#fffef7; }
.letter-help,.letter-status,#letter-destination { text-align:center; font:12px/1.5 var(--ui); }
#letter-destination { display:block; }
@media(max-width:450px) { .mail-links { gap:19px; } .letter-paper { padding:23px 21px; } [data-room="mailbox"] .dialog-inner { padding:15px; } }
/* The clipping reader is a magnetic dry-erase board, separate from the notebook. */
.object-dialog[data-room="board"] { width:min(1030px,calc(100vw - 24px)); background:transparent; border:0; border-radius:4px; box-shadow:none; }
[data-room="board"] .dialog-inner { padding:0; }
[data-room="board"] .dialog-head { position:absolute; z-index:5; right:23px; top:24px; margin:0; }
[data-room="board"] .dialog-head > div { display:none; }
.dry-erase-board { border:14px ridge #b9c0c4; border-radius:9px; padding:35px 38px 25px; background:linear-gradient(125deg,#fff,#f8faf9 60%,#ecf0ef); box-shadow:inset 0 0 7px #45565b35,0 20px 50px #10221c66; }
.board-title { margin:0 50px 20px 0; font:italic 27px/1.25 Georgia,serif; color:#254a58; }
#board-room .scrapbook-spread { display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center; padding:30px 0; min-height:390px; }
#board-room .quote-clipping { transform:rotate(-2deg); }
#board-room .companion-clipping { width:100%; margin:25px 0 0; transform:rotate(3deg); }
#board-room .paper-tape,#board-room .companion-clipping::before { width:20px; height:20px; border-radius:50%; left:calc(50% - 10px); top:-10px; border:1px solid #851b1c; background:radial-gradient(circle at 35% 25%,#e49387,#a82c2d 65%,#672326); box-shadow:1px 3px 3px #17271f60; transform:none; }
#board-room .companion-clipping::before { background:radial-gradient(circle at 35% 25%,#b3d3d9,#366874 65%,#244651); border-color:#234650; z-index:2; }
#board-room .quote-controls { padding-top:15px; margin-top:0; border-top:1px solid #d4dad7; font-family:var(--ui); }
#board-room .page-turn { font:14px var(--ui); border:0; background:transparent; }
#board-room .quote-count { font:12px var(--ui); }
.quote-image-button > span { font-family:var(--ui); }
@media(max-width:700px) {
 .dry-erase-board { padding:26px 22px 18px; border-width:10px; }
 .board-title { font-size:23px; }
 #board-room .scrapbook-spread { grid-template-columns:1fr; gap:16px; min-height:0; }
 #board-room .companion-clipping { width:90%; margin-left:auto; }
 [data-room="board"] .dialog-head { top:18px; right:15px; }
}
.notebook:not(.is-open) .pages { visibility:hidden; }