.scrapbook-page { padding-block: 2rem 3rem; }
.scrapbook-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.75rem; }
.scrapbook-heading h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.5rem); color: var(--accent); background: none; -webkit-text-stroke: 0; text-shadow: 0 0 9px rgb(125 219 157 / 7%); }
.scrapbook-heading p { margin: .5rem 0 0; color: var(--text-secondary); font-size: .9375rem; }
.scrapbook-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 4px; gap: .5rem; }
.scrapbook-item { position: relative; display: block; align-self: start; width: 100%; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: .375rem; color: var(--text); background: var(--surface); cursor: zoom-in; text-align: left; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.scrapbook-item img { display: block; width: 100%; height: auto; aspect-ratio: var(--image-ratio); object-fit: cover; border-radius: inherit; }
.scrapbook-item .scrapbook-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-secondary); font-size: .6875rem; letter-spacing: .04em; pointer-events: none; }
.scrapbook-item-caption { position: absolute; inset: auto 0 0; margin: 0; padding: 1.5rem .75rem .75rem; border-radius: 0 0 .375rem .375rem; background: linear-gradient(transparent, rgb(0 0 0 / 85%)); color: var(--ivory); font: inherit; font-size: .8125rem; line-height: 1.4; opacity: 0; transition: opacity .2s ease; pointer-events: none; overflow-wrap: anywhere; }
.scrapbook-item:focus-visible { z-index: 2; transform: scale(1.055); border-color: var(--accent-hover); }
.scrapbook-item:focus-visible .scrapbook-item-caption { opacity: 1; }
@media (hover: hover) {
  .scrapbook-item:hover { z-index: 2; transform: scale(1.055); border-color: var(--accent-hover); box-shadow: -5px 2px 18px rgb(var(--hover-amber-rgb) / 12%), 0 3px 14px rgb(var(--hover-rgb) / 8%), 5px 2px 18px rgb(var(--hover-rose-rgb) / 12%); }
  .scrapbook-item:hover .scrapbook-item-caption { opacity: 1; }
}
.scrapbook-viewer { inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--background); color: var(--text); }
.scrapbook-viewer::backdrop { background: var(--background); }
.scrapbook-viewer-layout { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: .5rem clamp(1rem, 3vw, 2.5rem); }
.scrapbook-viewer-top, .scrapbook-viewer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .5rem; }
.scrapbook-viewer-top { color: var(--accent); font-size: .8125rem; }
.scrapbook-viewer-top .icon-button { font-size: 1.75rem; }
.scrapbook-full-image { min-height: 0; display: flex; justify-content: center; }
.scrapbook-full-image img { max-width: 100%; width: 100%; height: 100%; object-fit: contain; }
.scrapbook-viewer-bottom p { margin: 0; font-size: .875rem; overflow-wrap: anywhere; }
#scrapbook-count { color: var(--text-secondary); font-size: .75rem; }
.scrapbook-viewer-bottom > div:first-child { min-width: 0; }
@media (max-width: 1000px) { .scrapbook-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .scrapbook-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .scrapbook-page { padding-top: 1rem; } .scrapbook-heading { align-items: flex-start; flex-direction: column; gap: .5rem; } }
@media (prefers-reduced-motion: reduce) { .scrapbook-item, .scrapbook-item-caption { transition: none; } .scrapbook-item:hover, .scrapbook-item:focus-visible { transform: none; } }