/* The margins of the notebook keep the same found-object vocabulary as the portrait. */
.skip-link{position:fixed;top:12px;left:12px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 16px;transform:translateY(-150%);transition:transform .2s}
.skip-link:focus{transform:translateY(0);color:var(--paper)}
.view{isolation:isolate;overflow:hidden}
.ambient-collage{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.ambient-collage .sprite{position:absolute;width:210px;height:210px;opacity:.10;filter:grayscale(1);transform:rotate(-20deg)}
.ambient-collage .sprite:nth-child(1){right:-34px;top:8%;transform:rotate(18deg)}
.ambient-collage .sprite:nth-child(2){left:-80px;bottom:9%;transform:rotate(-19deg)}
.ambient-collage .sprite:nth-child(3){right:24%;bottom:-115px;transform:rotate(24deg)}
#roadmap .ambient-collage .sprite:nth-child(1){top:10%;right:14%;transform:rotate(-14deg)}
#roadmap .ambient-collage .sprite:nth-child(2){left:-50px;top:38%;transform:rotate(22deg)}
#roadmap .ambient-collage .sprite:nth-child(3){right:-35px;bottom:2%;transform:rotate(-23deg)}
.story-art{transform:rotate(var(--chapter-tilt,-3deg));transition:transform .5s ease}
.record{cursor:grab;touch-action:none;user-select:none}
.record:active{cursor:grabbing}
.record:focus-visible{outline:3px solid var(--pink);outline-offset:7px}
.record:hover{box-shadow:12px 18px 25px #44392840,0 0 0 8px #b9757040}
.map-note.note-enter{animation:note-in .45s ease both}
@keyframes note-in{from{opacity:.45;transform:rotate(5deg) translateY(12px)}to{opacity:1;transform:rotate(2deg) translateY(0)}}
.object.collected{filter:drop-shadow(0 0 6px #8d7a5577)}
.object:active{scale:.92}
.inventory button{min-height:127px;display:flex;align-items:center;flex-direction:column;gap:5px;justify-content:center}
.inventory button:hover{border-color:var(--ink)}
.radio-panel .dialog-eyebrow{color:#d8c9b3}
.radio-panel input{margin-top:10px}
.radio-panel .hint{margin-bottom:0}
::view-transition-old(root){animation:paper-out .28s ease both}
::view-transition-new(root){animation:paper-in .52s cubic-bezier(.2,.75,.25,1) both}
@keyframes paper-out{to{opacity:.35;transform:translateX(-18px) rotate(-1deg);filter:blur(3px)}}
@keyframes paper-in{from{opacity:.35;transform:translateX(38px) rotate(1.5deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@media(max-width:700px){
  .small-note{display:none}
  .ambient-collage .sprite{width:135px;height:135px;opacity:.08}
  .ambient-collage .sprite:nth-child(3){display:none}
  .view#hideout{min-height:890px}
  #hideout .hero-copy{position:relative}
  .found-objects{bottom:68px}
  .object-label{top:98%}
  .hero-footer{bottom:12px}
  .record:focus-visible{outline-offset:2px}
}
@media(max-width:390px){
  .topbar nav{gap:6px}
  .navlink{font-size:11px}
  .view#hideout{min-height:915px}
  .portrait{top:415px;height:365px}
  .found-objects{bottom:72px}
  .hero-actions{gap:12px}
}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .map-note.note-enter{animation:none}
}