/* One paper size and one coordinate system, shared by every composition. */
.single-desk{padding:65px 112px 28px 20px}
.notebook{width:min(calc((100svh - 150px)*.70),calc(100vw - 185px),720px);aspect-ratio:.70}
.single-content{inset:7% 9% 8%;isolation:auto}
.single-content>.placed{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h,auto);transform:rotate(var(--r,0deg));margin:0}
.single-content .page-heading{top:0;left:0;right:0;z-index:3}
.single-content .diary-title{font-size:8.7cqw;line-height:1.1;white-space:normal}
.single-content .diary-note{font-size:3.15cqw;line-height:1.25;margin-top:1.4cqw}
.single-content .diary-kicker{font-size:3.1cqw;line-height:1.15;margin-bottom:1.2cqw}
[data-page=hello] .page-heading{text-align:center}
[data-page=hello] .diary-title{font-size:11.2cqw}
.single-content .pencil-note{font-size:3.6cqw;line-height:1.2;color:#987783;z-index:1}
.single-content .theme-sticker{object-fit:contain;opacity:.94;z-index:1;pointer-events:none}
.portrait-collage{mix-blend-mode:multiply}.portrait-collage img{object-fit:contain}
.diary-memo{padding:1.9cqw 2cqw;background:#f8efe0;box-shadow:1px 2px 3px #69565518;z-index:1;color:#8b7079;font:3.5cqw/1.45 var(--hand)}
.diary-memo p{margin:0;position:relative;z-index:1}
.diary-memo.ruled{background:repeating-linear-gradient(0deg,transparent 0 calc(5.1cqw - 1px),#c7b6b333 calc(5.1cqw - 1px) 5.1cqw),#faf0df;border-left:1px solid #dab2b34d}
.diary-memo.torn{background:#f0e6e9;clip-path:polygon(0 2%,8% 0,17% 3%,27% 0,39% 2%,51% 0,64% 3%,78% 0,91% 2%,100% 0,100% 96%,91% 100%,80% 97%,68% 100%,55% 97%,42% 100%,30% 98%,16% 100%,0 97%)}
.single-content .corners:after{content:'';position:absolute;inset:-.4cqw;z-index:25;pointer-events:none;background:linear-gradient(135deg,#e8d7bb 0 49%,transparent 51%) top left,linear-gradient(-45deg,#e8d7bb 0 49%,transparent 51%) bottom right;background-size:4cqw 4cqw;background-repeat:no-repeat}
[data-page=team] .diary-memo p{width:72%}
[data-page=team] .theme-sticker{z-index:2}
.single-folio{bottom:3%;font-size:2.6cqw;color:#b19999}

/* The whole photograph is visible; no portrait crop is imposed on a landscape. */
.single-content .portrait-print{height:auto;padding:1.25cqw 1.25cqw 1cqw;background:#fffdf8;display:flex;flex-direction:column;gap:.9cqw;isolation:isolate;box-shadow:1px 3px 5px #69565524;z-index:2}
.single-content .portrait-print .photo-button{position:relative;width:100%;height:auto;aspect-ratio:var(--photo-ratio);flex:none;z-index:0;overflow:hidden}
.single-content .photo-static{cursor:default}.single-content .photo-static:hover img{filter:none}
.single-content .portrait-print img{width:100%;height:100%;object-fit:contain;background:#fffdf8}
.single-content .portrait-print figcaption{position:static;min-height:1.15em;font-size:3.05cqw;line-height:1.15;padding:0 .45cqw;color:#816f73;white-space:normal;z-index:1}
.single-content .taped:before{z-index:20;left:36%;top:-1.55cqw;width:29%;height:3.9cqw;background:repeating-linear-gradient(0deg,#e4c5ccba 0 1px,#e9cdd3c9 1px 3px);transform:rotate(-7deg);box-shadow:0 1px 1px #8a62721a;backdrop-filter:none}
.single-content .clipped:after{z-index:25;top:-2.8cqw;left:9%;width:2.5cqw;height:8.1cqw;border:.48cqw double #a3a1a3;border-radius:2cqw;transform:rotate(9deg);box-shadow:1px 1px 0 #fff9,1px 2px 2px #51434922}
.print-play,.strip-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:7cqw;height:7cqw;border-radius:50%;background:#fffaf0e8;color:#715661;font:5.3cqw/1 var(--hand);box-shadow:0 1px 4px #42303920;pointer-events:none}
.portrait-film{display:grid;gap:1.4cqw;padding:2cqw 1.5cqw;background:#40383d;box-shadow:2px 4px 5px #70546022;isolation:isolate;z-index:2}
.portrait-film.frames-4{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:1fr}
.portrait-film.frames-6{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.portrait-film .strip-play{width:4.7cqw;height:4.7cqw;font-size:3.7cqw}
.portrait-film:before,.portrait-film:after{content:'';position:absolute;left:1.5cqw;right:1.5cqw;height:.8cqw;pointer-events:none;background:repeating-linear-gradient(90deg,#f7efe3 0 1.2cqw,transparent 1.2cqw 3cqw)}
.portrait-film:before{top:.7cqw}.portrait-film:after{bottom:.7cqw}
.portrait-film button{position:relative;display:block;padding:0;min-width:0;min-height:0;overflow:hidden;background:#242125}
.portrait-film img{width:100%;height:100%;object-fit:cover}
.portrait-film button small{position:absolute;right:.8cqw;bottom:.5cqw;font-size:2.8cqw;line-height:1.2;background:#fff8eadd;padding:0 .5cqw}
.portrait-film button:hover .strip-play{background:#fffdf8}
.portrait-film button:focus-visible{outline-color:#f7d5de;outline-offset:1px}

/* A dedicated listening page keeps the player, controls and signature apart. */
.single-content .diary-cassette{z-index:2}
.single-content .cassette-object{position:relative;aspect-ratio:1.5}
.single-content .cassette-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.single-content .cassette-label{left:14%;top:14%;width:72%;font:5.2cqw/1 var(--script);z-index:1}
.single-content .tape-side{font-size:2.3cqw;z-index:1}
.single-content .deck-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.2cqw 2cqw;align-items:center;padding:2cqw 1cqw 0;transform:none}
.single-content .deck-toggle{grid-column:1;grid-row:1;justify-self:start;font-size:3.8cqw;white-space:nowrap;min-height:34px;padding:0;text-align:left}
.single-content .deck-toggle>span{font-size:2.4cqw;margin-right:1cqw}
.single-content .deck-mute{grid-column:2;grid-row:1;justify-self:end;font-size:3.1cqw;white-space:nowrap;min-height:34px;padding:0}
.single-content .deck-seek{grid-column:1;grid-row:2;min-width:0;width:100%;height:30px}
.single-content .deck-time{grid-column:2;grid-row:2;font-size:3cqw;text-align:right}
.single-signoff{display:flex;align-items:center;justify-content:space-between;gap:2cqw}.single-signoff p{margin:0;font-size:3.3cqw;color:#9b7d88}.single-signoff span{font:6cqw/1.25 var(--script)}
.reel-tracks{display:flex;gap:9px;overflow-x:auto;padding:12px 2px 3px;max-width:min(85vw,960px)}
.reel-track{position:relative;flex:0 0 87px;height:68px;padding:4px;background:#fff9ed}
.reel-track span{position:absolute;bottom:3px;right:4px;padding:1px 4px;background:#fff9ede6;font-size:15px}
.reel-track[aria-current=true]{outline:2px solid #b27b92;outline-offset:-1px}
.media-viewer:has(.reel-tracks:not([hidden])) .viewer-video{max-height:60dvh}

@media(max-width:1000px){
 .edition-bar{position:relative;top:auto;left:auto;right:auto;margin:12px 18px 0;font-size:18px}
 .edition-bar nav{font-size:16px;gap:15px}
 .single-desk{padding:24px 98px 22px 15px;min-height:calc(100svh - 40px)}
 .notebook{width:min(calc((100svh - 150px)*.70),calc(100vw - 130px),650px)}
 .chapter-slips{width:calc(6% + 90px);gap:1.1cqw;top:10%}
 .chapter-slips button{font-size:16px;min-height:36px;padding-block:4px}
 .single-navigation{font-size:18px;gap:4px}.single-navigation .reading-position{font-size:16px}
}
@media(max-width:600px){
 .edition-bar{margin:10px 14px 0;font-size:17px}.edition-bar nav{font-size:14px;gap:11px}
 .single-desk{padding:24px 13px 28px 12px;width:100%;min-height:calc(100svh - 44px);justify-content:center}
 .notebook{width:calc(100% - 48px);max-width:440px;aspect-ratio:.70}
 .chapter-slips{top:7%;width:calc(6% + 45px);gap:1.3cqw}
 .chapter-slips button{min-height:32px;font-size:12px;line-height:1.05;white-space:normal;padding:5px 3px 5px calc(6cqw + 3px)}
 .chapter-slips button[aria-current=true],.chapter-slips button:hover{translate:3px 0}
 .single-navigation{width:calc(100% - 48px);max-width:440px;padding-top:8px;font-size:17px}
 .single-navigation button{min-width:65px;padding-inline:0}.single-navigation .reading-position{font-size:15px}
 .single-content .diary-title{font-size:max(25px,8.7cqw)}
 .single-content .diary-note,.single-content .diary-kicker{font-size:max(11px,3.15cqw)}
 .single-content .portrait-print figcaption{font-size:max(11px,3.05cqw)}
 .single-content .pencil-note{font-size:max(12px,3.6cqw)}
 .diary-memo{font-size:max(11px,3.5cqw)}
 .single-content .deck-toggle{font-size:15px;min-height:26px}.single-content .deck-mute{font-size:12px;min-height:26px}
 .single-content .deck-seek{height:24px}
 .single-content .deck-time{font-size:12px}.single-content .deck-controls{gap:0 8px;padding-top:4px}
 .single-signoff p{font-size:12px}.single-signoff span{font-size:25px}
 .single-folio{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.single-navigation button,.chapter-slips button{transition:none}}
@media(max-width:360px){
 [data-page=listening] .diary-cassette{left:17%;top:47%;width:60%}
 .single-signoff p{font-size:10px;white-space:nowrap}
 .single-signoff span{font-size:22px}
}