.record-dialog { width:1080px; max-width:calc(100vw - 60px); max-height:none; padding:0; border:0; background:transparent; color:#253126; overflow:visible; box-shadow:none; perspective:1600px; }
.record-dialog[open] { display:block; }
.record-dialog::backdrop { background:#0d1a14bb; backdrop-filter:blur(9px); }
.record-sheet { position:relative; display:grid; grid-template-columns:43% 57%; max-height:88svh; overflow:auto; background:#efe5ca url('assets/detail-paper.webp') center/cover; border-radius:2px 5px 2px 4px; box-shadow:0 35px 90px #0007,0 2px 3px #0005,inset 0 0 30px #75644718; isolation:isolate; }
.record-sheet::before { content:''; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent 49.6%,#75613b16 49.9%,#fff9e43b 50.2%,transparent 50.6%),linear-gradient(0deg,transparent 49.5%,#75613b14 50%,#fff9e440 50.3%,transparent 50.7%); }
.record-dialog[open] .record-sheet { animation:paper-spread 1050ms cubic-bezier(.22,.61,.36,1) both; }
.record-unfold { position:absolute; inset:0; z-index:4; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; pointer-events:none; perspective:1200px; animation:fold-cover 1050ms linear both; }
.record-unfold span { background:#e8ddc1 url('assets/detail-paper.webp'); background-size:200% 200%; backface-visibility:hidden; border:1px solid #a38d6810; box-shadow:0 0 18px #49362025; }
.record-unfold span:nth-child(1) { background-position:left top; transform-origin:right bottom; animation:fold-northwest 820ms cubic-bezier(.22,.61,.36,1) both; }
.record-unfold span:nth-child(2) { background-position:right top; transform-origin:left bottom; animation:fold-northeast 890ms cubic-bezier(.22,.61,.36,1) both; }
.record-unfold span:nth-child(3) { background-position:left bottom; transform-origin:right top; animation:fold-southwest 920ms cubic-bezier(.22,.61,.36,1) both; }
.record-unfold span:nth-child(4) { background-position:right bottom; transform-origin:left top; animation:fold-southeast 970ms cubic-bezier(.22,.61,.36,1) both; }
.record-sheet .dialog-close { right:18px; top:18px; z-index:6; border-radius:50%; background:#26362d; color:#f1e8d1; border:0; width:38px; height:38px; font-size:14px; }
.record-dialog-image { position:relative; min-height:560px; padding:76px 30px 70px 42px; display:flex; align-items:center; background:transparent; transform:rotate(-3deg); z-index:2; }
.record-dialog-image img { position:static; width:100%; height:auto; max-height:430px; padding:11px; object-fit:contain; background:#f6eddb; border:1px solid #9b89663b; box-shadow:4px 10px 17px #45351e30; }
.record-photo-holder { position:relative; width:100%; }
.record-photo-holder::after { content:''; position:absolute; top:-17px; left:18px; width:20px; height:62px; border:3px solid #858678; border-radius:12px; box-shadow:2px 1px 2px #0002,inset 1px 0 #f6f4e6; }
.record-sheet { scrollbar-width:thin; scrollbar-color:#89745366 transparent; clip-path:polygon(.1% .6%,14% .1%,28% .3%,42% 0,57% .4%,72% .1%,86% .3%,99.7% 0,100% 19%,99.8% 40%,100% 62%,99.8% 81%,100% 99.5%,83% 100%,66% 99.8%,49% 100%,31% 99.7%,15% 100%,0 99.6%,.2% 77%,0 55%,.1% 34%,0 13%); }
.record-sheet::-webkit-scrollbar { width:6px; }
.record-sheet::-webkit-scrollbar-track { background:transparent; }
.record-sheet::-webkit-scrollbar-thumb { background:#89745366; border-radius:4px; }
.record-dialog-image > span { bottom:28px; left:43px; right:25px; font-size:8px; line-height:1.6; opacity:.65; font-family:'Courier New',monospace; }
.record-dialog-copy { position:relative; z-index:2; padding:77px 55px 40px 34px; }
.record-dialog-copy > .overline { display:none; }
.record-dialog h2 { font-size:clamp(48px,5vw,69px); line-height:.95; margin:0 0 24px; }
.record-person { font-family:'Courier New',monospace; font-size:11px; line-height:1.6; padding-bottom:19px; margin-bottom:22px; border-color:#54482e30; }
#record-body { font-size:13px; line-height:1.85; opacity:.87; }
.record-actions { gap:18px; margin-top:28px; padding-top:20px; border-top:1px solid #54482e30; }
.record-actions > .archive-link,.record-actions > .save-button { min-height:42px; padding:11px 17px; border:1px solid #5c4e3635; background:#f9f3e760; font-size:11px; color:#253126; }
.record-actions > .archive-link:hover,.record-actions > .save-button:hover { background:#26362d; color:#f6edd8; }
.record-dialog[open] .record-dialog-image { animation:paper-contents 650ms 360ms both; }
.record-dialog[open] .record-dialog-copy { animation:paper-contents 650ms 470ms both; }
@keyframes paper-spread { 0% { transform:scale(.15,.22) rotate(-12deg); filter:brightness(.8); } 45% { transform:scale(.78,.87) rotate(2deg); } 78% { transform:scale(1.012) rotate(-.35deg); } 100% { transform:none; filter:none; } }
@keyframes fold-cover { 0%,65% { opacity:1; } 100% { opacity:0; visibility:hidden; } }
@keyframes fold-northwest { from { transform:rotateX(-75deg) rotateY(70deg); filter:brightness(.66); } to { transform:none; filter:none; } }
@keyframes fold-northeast { from { transform:rotateX(-68deg) rotateY(-80deg); filter:brightness(.8); } to { transform:none; filter:none; } }
@keyframes fold-southwest { from { transform:rotateX(83deg) rotateY(64deg); filter:brightness(.7); } to { transform:none; filter:none; } }
@keyframes fold-southeast { from { transform:rotateX(72deg) rotateY(-74deg); filter:brightness(.6); } to { transform:none; filter:none; } }
@keyframes paper-contents { from { opacity:0; translate:0 12px; } to { opacity:1; translate:0 0; } }
@media(max-width:760px) {
  .record-dialog { max-width:calc(100vw - 26px); width:520px; }
  .record-sheet { display:block; max-height:90svh; }
  .record-dialog-image { min-height:0; height:auto; padding:56px 28px 47px; transform:rotate(-2deg); }
  .record-dialog-image img { max-height:310px; width:auto; max-width:100%; margin:auto; }
  .record-photo-holder::after { top:-15px; left:18px; height:49px; width:16px; border-width:2px; }
  .record-dialog-image > span { bottom:16px; left:28px; right:28px; font-size:7px; }
  .record-dialog-copy { padding:20px 28px 30px; }
  .record-dialog-copy > .overline { font-size:9px; margin-bottom:18px; }
  .record-dialog h2 { font-size:49px; }
  .record-person { font-size:10px; }
  #record-body { font-size:12px; line-height:1.8; }
}
.no-motion .record-sheet,.no-motion .record-sheet * { animation:none!important; }
.no-motion .record-unfold { display:none; }
@media(prefers-reduced-motion:reduce) {
  .record-dialog[open] .record-sheet,.record-dialog[open] .record-sheet * { animation:none; }
  .record-unfold { display:none; }
}