/* ============================================================
   CONCEPTO P — the scrapbook on 01 (assets/js/scrapbook.js)
   Paper, tape, the frame. It is held to the screen like the transfer
   pieces and moves only in steps of the scroll.
   ============================================================ */
.scb{ position:relative; height:0; z-index:2; pointer-events:none; }
.scb-page{ position:fixed; left:var(--gutter, 24px); bottom:clamp(64px, 11vh, 120px);
  width:clamp(220px, 26vw, 360px); opacity:0; visibility:hidden; transform-origin:30% 90%; }
.scb.is-on .scb-page{ visibility:visible; }

/* the frame, mounted on a card of warm paper with two pieces of tape */
.scb-card{ position:relative; margin:0; padding:10px 10px 30px;
  background:#efe9dc;
  background-image:
    radial-gradient(120% 90% at 20% 10%, rgba(255,252,244,.55), rgba(255,252,244,0) 60%),
    repeating-linear-gradient(93deg, rgba(120,100,70,.035) 0 1px, rgba(0,0,0,0) 1px 5px);
  box-shadow:0 0 0 1px rgba(22,19,16,.18), 0 1px 0 rgba(10,8,6,.45);
  transform:rotate(-1.6deg); }
.scb-img{ display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover;
  background:#1a1714; box-shadow:0 0 0 1px rgba(22,19,16,.35); }

.scb-tape{ position:absolute; display:block; width:72px; height:20px; z-index:1;
  background:rgba(232,222,196,.72);
  box-shadow:0 0 0 .5px rgba(90,76,50,.18);
  clip-path:polygon(0 8%, 6% 0, 12% 10%, 20% 2%, 30% 9%, 42% 0, 55% 7%, 68% 1%, 80% 9%, 90% 0, 100% 6%,
    100% 92%, 93% 100%, 84% 90%, 72% 99%, 60% 91%, 48% 100%, 36% 92%, 24% 100%, 12% 91%, 4% 100%, 0 94%); }
.scb-tape.is-a{ top:-9px; left:14px; transform:rotate(-7deg); }
.scb-tape.is-b{ top:-8px; right:12px; transform:rotate(9deg); }

/* the facts, typed on slips and taped on one by one */
.scb-facts{ display:flex; flex-wrap:wrap; gap:6px 8px; margin:14px 0 0 4px; }
.scb-slip{ margin:0; padding:5px 8px 4px; font-size:9px; letter-spacing:.2em; line-height:1.5;
  color:#161310; background:#f3eee2; box-shadow:0 0 0 1px rgba(22,19,16,.16), 0 1px 0 rgba(10,8,6,.35);
  visibility:hidden; }
.scb-slip.is-on{ visibility:visible; }
.scb-slip.is-name{ background:#161310; color:#f3eee2; }

/* the way on: quiet words, only on the last step */
.scb-way{ display:inline-flex; flex-direction:column; gap:4px; margin:16px 0 0 4px; pointer-events:auto;
  color:rgba(243,240,232,.9); text-decoration:none; visibility:hidden;
  text-shadow:0 1px 2px rgba(10,10,10,.6); }
.scb-way .mono{ font-size:9px; letter-spacing:.28em; opacity:.72; }
.scb-way-t{ font-family:"Instrument Serif", "Bodoni Moda", serif; font-size:26px; line-height:1;
  border-bottom:1px solid rgba(243,240,232,.35); padding-bottom:3px; }
.scb-way.is-on{ visibility:visible; }
.scb-way:hover .scb-way-t, .scb-way:focus-visible .scb-way-t{ border-bottom-color:rgba(243,240,232,.85); }

/* no roll chosen: three strips on the page */
.scb-strips{ display:flex; flex-direction:column; gap:14px; }
.scb-k{ margin:0 0 2px; font-size:9px; letter-spacing:.28em; color:rgba(243,240,232,.72);
  text-shadow:0 1px 2px rgba(10,10,10,.55); }
.scb-strip{ position:relative; display:flex; align-items:center; gap:12px; width:100%; margin:0; padding:7px 12px 7px 7px;
  border:0; border-radius:0; cursor:pointer; pointer-events:auto; text-align:left;
  background:#efe9dc; box-shadow:0 0 0 1px rgba(22,19,16,.18), 0 1px 0 rgba(10,8,6,.45);
  visibility:hidden; }
.scb-strip.is-on{ visibility:visible; }
.scb-strip .scb-tape{ width:46px; height:16px; top:-7px; left:auto; right:18px; }
.scb-strip-img{ display:block; width:96px; height:64px; object-fit:cover; background:#1a1714; flex:none; }
.scb-strip-t{ font-size:10px; letter-spacing:.24em; color:#161310; }
.scb-strip:focus-visible{ outline:1px solid #161310; outline-offset:3px; }

@media (max-width:760px){
  .scb-page{ width:46vw; bottom:clamp(72px, 12vh, 110px); }
  .scb-strip-img{ width:64px; height:44px; }
  .scb-way-t{ font-size:20px; }
}