/* ==========================================================================
   SCRAPBOOK — Build with it (Design Completion Campaign, 2026-09-29).
   More of the pile: each field a scrap of its own paper on the kraft board,
   taped at the corners, within 1.5deg of upright (the room's rule for scraps
   that carry sentences), overlapping only the blank foot of the one before.
   Colours and faces are the room's ("Marker SK", "Caveat SK", declared in
   x-scrapbook.css). Contrast per pair as in the room sheet (all >= 7:1).
   Every class is gsb- or scoped to .gm--scrapbook. Nothing moves; below
   820px the rotations and overlaps come off.
   ========================================================================== */
.gm--scrapbook {
  --gm-tag-inverse: #FFFFFF;
  max-width: 62rem; margin: clamp(2rem, 5vw, 4rem) auto; padding: 0 clamp(0.5rem, 2vw, 1.5rem);
  color: var(--gm-color-board-ink); font: 400 0.95rem/1.6 Georgia, "Times New Roman", serif;
}
.gm--scrapbook .gm__head { position: relative; margin: 0 auto 2.5rem; max-width: 46rem; padding: clamp(1.1rem, 3vw, 1.75rem) clamp(1.1rem, 3vw, 2rem); background: #F4EFE6; color: #221C13; grid-template-columns: 1fr; gap: 0.5rem; box-shadow: 0 1px 2px rgba(46, 33, 20, 0.2), 0 6px 16px rgba(46, 33, 20, 0.14); }
.gm--scrapbook .gm__title { grid-row: auto; font: 400 clamp(1.8rem, 4vw, 2.6rem)/1.1 var(--gm-font); }
.gm--scrapbook .gm__key, .gm--scrapbook .gm__get { opacity: 1; }
.gm--scrapbook .gm-t { font-family: "Courier New", Courier, monospace; font-weight: 700; }
.gm--scrapbook .gm-f__n { font: 400 0.75rem/1 "Courier New", Courier, monospace; }
.gm--scrapbook .gm-f__name { font: 400 1.35rem/1.1 var(--gm-font); }
.gm--scrapbook .gm-f__note { opacity: 1; }

.gsb-board { list-style: none; margin: 0; padding: 0; }
.gsb-board > li { position: relative; }
.gsb-f {
  position: relative; padding: 1.35rem 1.25rem 3.6rem;
  box-shadow: 0 1px 2px rgba(46, 33, 20, 0.22), 0 10px 22px rgba(46, 33, 20, 0.2);
}
.gsb-f::before, .gsb-f::after {
  content: ""; position: absolute; width: clamp(3.4rem, 8vw, 5.2rem); height: 1.35rem; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 0.4rem, rgba(255, 255, 255, 0) 0.4rem 0.8rem), var(--gsb-tape, rgba(214, 178, 92, 0.62));
  box-shadow: 0 1px 2px rgba(46, 33, 20, 0.12);
}
.gsb-f::before { top: -0.55rem; left: -1rem; transform: rotate(-36deg); }
.gsb-f::after { top: -0.5rem; right: -1.1rem; transform: rotate(40deg); }

/* papers: the room's own stock, one per scrap */
.gsb-p--card { background: repeating-linear-gradient(180deg, transparent 0 1.45rem, rgba(35, 48, 59, 0.12) 1.45rem calc(1.45rem + 1px)), #F6F1E3; color: #23303B; --gsb-tape: rgba(120, 168, 189, 0.58); }
.gsb-p--pad { background: repeating-linear-gradient(180deg, transparent 0 1.6rem, rgba(58, 46, 7, 0.16) 1.6rem calc(1.6rem + 1px)), #F8E9A0; color: #3A2E07; --gsb-tape: rgba(226, 156, 100, 0.58); }
.gsb-p--grid { background: linear-gradient(rgba(36, 26, 68, 0.1) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, rgba(36, 26, 68, 0.1) 1px, transparent 1px) 0 0 / 14px 14px, #E6E0F2; color: #241A44; --gsb-tape: rgba(214, 120, 120, 0.5); }
.gsb-p--clip { background: #EFE9DC; color: #1F1D1A; --gsb-tape: rgba(201, 188, 152, 0.62); }
.gsb-p--marker { background: #FBF7EF; color: #402020; --gsb-tape: rgba(150, 190, 140, 0.55); }
.gsb-p--manila { background: #E8D9B0; color: #241B06; --gsb-tape: rgba(188, 152, 201, 0.6); }

/* hand placement: no two edges or rotations shared; sentences within 1.5deg */
.gsb-f--1 { width: 64%; margin-left: 2%; transform: rotate(-1.2deg); }
.gsb-f--2 { width: 58%; margin-left: 39%; margin-top: -1.5rem; transform: rotate(1.1deg); }
.gsb-f--3 { width: 52%; margin-left: 9%; margin-top: -1.4rem; transform: rotate(-0.7deg); }
.gsb-f--4 { width: 55%; margin-left: 43%; margin-top: -1.6rem; transform: rotate(1.4deg); }
.gsb-f--5 { width: 47%; margin-left: 5%; margin-top: -1.3rem; transform: rotate(-1.4deg); }
.gsb-f--6 { width: 94%; margin-left: 3%; margin-top: -1.2rem; transform: rotate(0.4deg); }
.gsb-f--7 { width: 50%; margin-left: 31%; margin-top: -1.4rem; transform: rotate(-0.9deg); }
.gsb-f--8 { width: 57%; margin-left: 12%; margin-top: -1.5rem; transform: rotate(1deg); }

.gsb-hand { margin: 0.6rem 0 0; font: 600 1.35rem/1.2 var(--gm-font-hand); }
.gsb-print { margin: 0.6rem 0 0; font-size: 0.92rem; }
.gsb-marker { margin: 0; font: 400 clamp(1.4rem, 3vw, 1.9rem)/1.2 var(--gm-font); }
.gsb-caveat { margin: 0; font: 600 1.6rem/1.2 var(--gm-font-hand); }

.gsb-sws { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 14px 16px; font-size: 0.82rem; }
.gsb-sws li { display: grid; gap: 2px; transform: rotate(var(--r)); }
.gsb-sws span { display: block; width: 64px; height: 44px; box-shadow: 0 1px 3px rgba(46, 33, 20, 0.3); }
.gsb-sws code { font-size: 0.72rem; }

.gsb-pile { position: relative; height: 130px; max-width: 18rem; }
.gsb-pile i { position: absolute; width: 44%; height: 58px; box-shadow: 0 1px 3px rgba(46, 33, 20, 0.3); }
.gsb-pile i:nth-child(1) { left: 4%; top: 6px; background: #F6F1E3; transform: rotate(-6deg); }
.gsb-pile i:nth-child(2) { left: 34%; top: 22px; background: #C9DFF2; transform: rotate(4deg); }
.gsb-pile i:nth-child(3) { left: 14%; top: 54px; background: #F8E9A0; transform: rotate(-2deg); }
.gsb-pile i:nth-child(4) { left: 50%; top: 62px; background: #F4C7D2; transform: rotate(7deg); }

.gsb-att { display: flex; gap: 22px; align-items: center; }
.gsb-att span { position: relative; display: block; width: 76px; height: 54px; background: #D9CFBD; }
.gsb-att__tape::before { content: ""; position: absolute; left: -8px; right: -8px; top: 20px; height: 14px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.3) 0 6px, transparent 6px 12px), rgba(214, 120, 120, 0.55); transform: rotate(-4deg); }
.gsb-att__corner::before, .gsb-att__corner::after { content: ""; position: absolute; border: 10px solid transparent; }
.gsb-att__corner::before { top: -2px; left: -2px; border-top-color: currentColor; border-left-color: currentColor; }
.gsb-att__corner::after { bottom: -2px; right: -2px; border-bottom-color: currentColor; border-right-color: currentColor; }
.gsb-att__dot { background: radial-gradient(circle, rgba(255,255,255,0.9) 0 5px, transparent 5.5px) 8px 8px / 40px 28px, #D9CFBD !important; }

.gsb-slot { display: grid; place-items: center; min-height: 150px; padding: 16px; background: #2E2114; text-align: center; }
.gsb-slot p { margin: 0; max-width: 30ch; padding: 8px 12px; background: #F6F1E3; color: #23303B; font: 700 0.78rem/1.4 "Courier New", Courier, monospace; letter-spacing: 0.04em; }

.gsb-nav { display: flex; flex-wrap: wrap; gap: 6px; align-items: end; border-bottom: 2px solid currentColor; }
.gsb-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 6px 6px 0 0; color: #1F1D1A; font: 400 1rem/1 var(--gm-font); text-decoration: none; }
.gsb-nav a:nth-child(1) { background: #CFE8D4; }
.gsb-nav a:nth-child(2) { background: #F8E9A0; min-height: 52px; }
.gsb-nav a:nth-child(3) { background: #F4C7D2; min-height: 40px; }
.gsb-nav a:hover { transform: translateY(-3px); }
.gsb-nav a[aria-current] { transform: translateY(-6px); }
.gsb-nav a[aria-current]::after { content: ""; position: absolute; top: -6px; left: 30%; width: 40%; height: 12px; background: rgba(214, 178, 92, 0.62); }
.gsb-nav a:focus-visible, .gsb-card:focus-visible, .gsb-btn:focus-visible, .gsb-form input:focus-visible { outline: 3px solid #2E2114; outline-offset: 3px; }
.gsb-ui { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 28px; margin-top: 26px; align-items: start; }
.gsb-card { position: relative; display: grid; gap: 4px; padding: 16px 16px 26px; background: #FFFFFF; color: #14161A; text-decoration: none; transform: rotate(-1.4deg); box-shadow: 0 1px 2px rgba(46, 33, 20, 0.22), 0 8px 18px rgba(46, 33, 20, 0.18); }
.gsb-card::before, .gsb-card::after { content: ""; position: absolute; border: 9px solid transparent; }
.gsb-card::before { top: -3px; left: -3px; border-top-color: #2E2114; border-left-color: #2E2114; }
.gsb-card::after { bottom: -3px; right: -3px; border-bottom-color: #2E2114; border-right-color: #2E2114; }
.gsb-card:hover { box-shadow: 0 2px 4px rgba(46, 33, 20, 0.25), 0 14px 28px rgba(46, 33, 20, 0.24); }
.gsb-card__tag { font: 400 0.7rem/1.4 "Courier New", Courier, monospace; color: #5A524A; }
.gsb-card b { font: 400 1.3rem/1.1 var(--gm-font); }
.gsb-form { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; padding: 14px 16px 18px; background: #F8E9A0; color: #3A2E07; }
.gsb-form label { flex-basis: 100%; font: 600 1.35rem/1.1 var(--gm-font-hand); }
.gsb-form input { flex: 1 1 11rem; min-width: 0; height: 2.75rem; padding: 0 4px; border: 0; border-bottom: 2px solid #3A2E07; border-radius: 0; background: transparent; color: #3A2E07; }
.gsb-btn { min-height: 44px; padding: 6px 18px; border: 0; border-radius: 999px; background: #F4C7D2; color: #4A1322; font: 400 1rem/1 var(--gm-font) !important; cursor: pointer; transform: rotate(-2deg); box-shadow: 0 1px 3px rgba(46, 33, 20, 0.3); }
.gsb-btn:hover { transform: none; }
.gsb-btn:active { box-shadow: none; }

.gsb-book { display: flex; align-items: end; gap: 0; height: 70px; }
.gsb-book i { display: block; width: 110px; height: 60px; background: #8A6A48; border-radius: 2px; }
.gsb-book i:nth-child(2) { height: 66px; width: 12px; background: repeating-linear-gradient(180deg, #F6F1E3 0 3px, #C9DFF2 3px 5px, #F8E9A0 5px 8px); }
.gsb-book i:nth-child(3) { transform: rotate(-12deg); transform-origin: left bottom; }

@media (max-width: 51.24rem) {
  .gsb-board > li > .gsb-f { width: auto; margin-left: 0; margin-top: 0; transform: none; }
  .gsb-board > li + li { margin-top: 1.6rem; }
  .gsb-f { padding-bottom: 1.5rem; }
  .gsb-f::before { left: -0.4rem; }
  .gsb-f::after { right: -0.4rem; }
  .gsb-ui { grid-template-columns: 1fr; }
  .gm--scrapbook .gm-ls li { grid-template-columns: 1fr; gap: 0.25rem; }
}
/* Present, never arriving: the board is motionless. */
.js-reveal .sk-page main > section.gm--scrapbook { opacity: 1; transform: none; transition: none; will-change: auto; }