/* Front page: questions on a DPO's notepad, the instrument answering in the margin. Builds on story.css. */
.pad{position:relative;width:min(100%,640px);justify-self:center;padding:30px 30px 34px 58px;border-top:18px solid var(--paper-deep);transform:rotate(-1deg);
  background-color:var(--paper);
  background-image:repeating-linear-gradient(transparent 0 33px,var(--paper-rule) 33px 34px);background-position:0 12px}
.pad.pad-b{transform:rotate(.8deg)}
.pad::before{content:"";position:absolute;left:42px;top:0;bottom:0;width:1px;background:rgba(176,58,46,.4)}
.pad .head{position:absolute;top:-18px;left:0;right:0;display:flex;justify-content:space-between;padding:0 14px;font:600 9px/18px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-mid)}
.pad .q{margin:0 0 16px;font:italic 400 clamp(26px,3vw,40px)/1.22 var(--serif);color:var(--paper-ink);text-wrap:balance}
.pad .q .l{display:block;clip-path:inset(0 100% 0 0)}
.play .pad .q .l{animation:write .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d)}
@keyframes write{to{clip-path:inset(0 0 0 0)}}
.pad .ans{margin:0;max-width:44ch;font:400 clamp(16px,1.35vw,19px)/1.6 var(--serif);color:var(--paper-mid)}
.play .pad.a{animation-name:filein;animation-duration:1s}
.play .pad.pad-b.a{animation-name:filein-b}
@keyframes filein-b{from{opacity:0;transform:translateY(70px) rotate(2.5deg)}to{opacity:1;transform:rotate(.8deg)}}
@media(max-width:799px){.pad{padding:24px 20px 26px 44px}.pad::before{left:32px}}

/* sheet 4: the pile of notes, the case file on top, the doors and the log */
.pile{position:relative;width:min(100%,600px);justify-self:center}
.ghost{position:absolute;inset:0;border-radius:4px;opacity:.85}
.ghost.g1{transform:rotate(2.2deg) translate(10px,6px)}
.ghost.g2{transform:rotate(-2.6deg) translate(-8px,10px)}
.pile .file{position:relative;width:100%}
.log{margin:0;display:grid;border-top:1px solid var(--line-strong)}
.log>div{display:grid;grid-template-columns:13ch 1fr;gap:14px;padding:8px 0;border-bottom:1px solid var(--line);font:12.5px/1.5 var(--mono)}
.log dt{color:var(--accent);letter-spacing:.1em;text-transform:uppercase;font-size:10.5px;padding-top:2px}
.log dd{margin:0;color:var(--ink)}
#sheet-4 .readout{max-width:560px}