/* Layout · Scrapbook (round 33): pieces of paper laid on a dotted page. Cards sit a little crooked with a strip of
   tape across the top, photos are prints with a white border and a handwritten caption, the programme is written on
   lined notebook paper with a margin line, the countdown is four tear-off calendar leaves, headings get a handwritten
   kicker. The reply form stays straight so it's easy to fill in. Colours and fonts are the design's (the kicker uses
   its script font). Loaded after the design's CSS. */
html.l-scrapbook { --sb-paper: color-mix(in srgb, var(--bg) 86%, #fff); --sb-tape: color-mix(in srgb, var(--accent) 38%, rgba(255, 255, 255, .55)); --sb-shadow: 0 2px 2px rgba(0, 0, 0, .06), 0 14px 24px -18px rgba(0, 0, 0, .55); }
html.l-scrapbook .inv { background-color: var(--bg); background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.4px); background-size: 20px 20px; }
html.l-scrapbook .inv > .s:not(.s-hero) { background: transparent; padding: 58px var(--gutter) 54px; }
html.l-scrapbook .inv > .s:not(.s-hero)::before { display: none; }

/* headings: a handwritten kicker on a slant */
html.l-scrapbook .inv .sh { margin-bottom: 28px; }
html.l-scrapbook .inv .sh > :not(.sh-k):not(.sh-t) { display: none; }
html.l-scrapbook .inv .sh::before, html.l-scrapbook .inv .sh::after { content: none; display: none; }
html.l-scrapbook .inv .sh-k { display: inline-block; margin: 0 0 6px; padding: 2px 12px; transform: rotate(-3deg); font-family: var(--script); font-size: 1.35rem; letter-spacing: 0; text-transform: none; color: var(--accent);
  background: linear-gradient(transparent 55%, color-mix(in srgb, var(--accent) 22%, transparent) 55% 88%, transparent 88%); }

/* paper pieces with tape */
html.l-scrapbook .inv :is(.vn-c, .pp-g, .dr-roles > div, .gl-it, .story-body, .tml-i, .faq, .rs-done) {
  position: relative; background: var(--sb-paper); border: 0; border-radius: 2px; box-shadow: var(--sb-shadow); color: var(--ink); }
html.l-scrapbook .inv :is(.vn-c, .pp-g, .story-body, .faq)::after {
  content: ""; position: absolute; z-index: 2; left: 50%; top: -11px; width: 92px; height: 24px; margin-left: -46px; border: 0; border-radius: 1px; transform: rotate(-4deg); opacity: 1;
  background: var(--sb-tape); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); pointer-events: none; }
html.l-scrapbook .inv :is(.vn-c, .pp-g):nth-child(even)::after { transform: rotate(5deg); left: 30%; }
html.l-scrapbook .inv .vn-c::before, html.l-scrapbook .inv .vn-c > svg { display: none; }
html.l-scrapbook .inv :is(.vn-c, .pp-g, .dr-roles > div, .gl-it):nth-child(odd) { transform: rotate(-1.2deg); }
html.l-scrapbook .inv :is(.vn-c, .pp-g, .dr-roles > div, .gl-it):nth-child(even) { transform: rotate(1.1deg); }
html.l-scrapbook .inv .vn { gap: 26px; padding-top: 8px; }
html.l-scrapbook .inv .vn-c { padding: 30px 20px 24px; }
html.l-scrapbook .inv .pp { gap: 26px; padding-top: 8px; }
html.l-scrapbook .inv .pp-g { padding: 26px 18px 20px; }
html.l-scrapbook .inv .story-body { padding: 28px 22px 14px; margin-top: 8px; transform: rotate(-.6deg); }
html.l-scrapbook .inv .faq { padding: 18px 20px 6px; margin-top: 8px; }
html.l-scrapbook .inv .faq details:last-child { border-bottom: 0; }

/* countdown: tear-off calendar leaves */
html.l-scrapbook .inv .cd { gap: 6px; }
html.l-scrapbook .inv .cd-u { min-width: 0; }
html.l-scrapbook .inv .cd-u span { font-size: .6rem; letter-spacing: .08em; }
html.l-scrapbook .inv .cd-u b { color: var(--ink); -webkit-text-fill-color: currentColor; }
html.l-scrapbook .inv .tl, html.l-scrapbook .inv .story-body { color: var(--ink); }
html.l-scrapbook .inv .cd-u { position: relative; padding: 18px 4px 10px; border: 0; border-radius: 3px; background: var(--sb-paper); box-shadow: var(--sb-shadow); border-top: 10px solid var(--accent); }
html.l-scrapbook .inv .cd-u:nth-child(odd) { transform: rotate(-2deg); }
html.l-scrapbook .inv .cd-u:nth-child(even) { transform: rotate(1.6deg); }
html.l-scrapbook .inv .cd-u b { font-size: clamp(1.9rem, 9vw, 2.6rem); }

/* programme: lined notebook paper */
html.l-scrapbook .inv:not([class*="dz-s-"]) .tl { position: relative; padding: 18px 18px 14px 56px; border: 0; border-radius: 2px; box-shadow: var(--sb-shadow); transform: rotate(.5deg);
  background-color: var(--sb-paper); background-image: linear-gradient(90deg, transparent 40px, color-mix(in srgb, #d9534f 55%, transparent) 40px 41px, transparent 41px),
  repeating-linear-gradient(transparent 0 33px, color-mix(in srgb, #4a7bb7 28%, transparent) 33px 34px); background-position: 0 0, 0 12px; }
html.l-scrapbook .inv:not([class*="dz-s-"]) .tl::before, html.l-scrapbook .inv:not([class*="dz-s-"]) .tl::after { display: none; }
html.l-scrapbook .inv:not([class*="dz-s-"]) .tl-i { display: grid; grid-template-columns: 5.8em 1fr; gap: 10px; min-height: 34px; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; align-items: start; line-height: 34px; }
html.l-scrapbook .inv:not([class*="dz-s-"]) .tl-i::before, html.l-scrapbook .inv:not([class*="dz-s-"]) .tl-i::after, html.l-scrapbook .inv:not([class*="dz-s-"]) .tl-i .dz-dot { display: none; }
html.l-scrapbook .inv:not([class*="dz-s-"]) .tl-time { padding: 0; font-family: var(--script); font-size: 1.15rem; color: var(--accent); line-height: 34px; }
html.l-scrapbook .inv:not([class*="dz-s-"]) .tl-title { font-weight: 600; line-height: 34px; }
html.l-scrapbook .inv:not([class*="dz-s-"]) .tl-text { line-height: 1.5; margin-bottom: 8px; }

/* photos: prints with a caption */
html.l-scrapbook .inv .gal { gap: 16px 12px; }
html.l-scrapbook .inv .gal-i { padding: 8px 8px 30px; background: #fff; box-shadow: var(--sb-shadow); }
html.l-scrapbook .inv .gal-i:nth-child(4n+1) { transform: rotate(-2.4deg); }
html.l-scrapbook .inv .gal-i:nth-child(4n+2) { transform: rotate(1.8deg) translateY(10px); }
html.l-scrapbook .inv .gal-i:nth-child(4n+3) { transform: rotate(1.2deg); }
html.l-scrapbook .inv .gal-i:nth-child(4n) { transform: rotate(-1.6deg) translateY(8px); }
html.l-scrapbook .inv .gal-i img, html.l-scrapbook .inv .gal-f, html.l-scrapbook .inv .gal-ph { border-radius: 0; }
html.l-scrapbook .inv .gal-i figcaption { margin-top: 8px; font-family: var(--script); font-size: 1.05rem; color: #333; }
html.l-scrapbook .inv .bio-ph { border-radius: 2px; padding: 6px 6px 22px; background: #fff; box-shadow: var(--sb-shadow); aspect-ratio: auto; width: min(130px, 34vw); }
html.l-scrapbook .inv .bio-ph img, html.l-scrapbook .inv .bio-ph .ph-slot { border-radius: 0; aspect-ratio: 1; height: auto; }
html.l-scrapbook .inv .bio-c:nth-child(odd) .bio-ph { transform: rotate(-3deg); }
html.l-scrapbook .inv .bio-c:nth-child(even) .bio-ph { transform: rotate(2.5deg); }
html.l-scrapbook .inv .tml::before { background: repeating-linear-gradient(var(--accent) 0 6px, transparent 6px 11px); width: 2px; }
html.l-scrapbook .inv .tml-i { padding: 16px 16px 16px; margin-bottom: 18px; }
html.l-scrapbook .inv .tml-i:nth-child(even) { transform: rotate(.8deg); }
html.l-scrapbook .inv .tml-dot { left: -27px; top: 20px; }
html.l-scrapbook .inv .cover-frame { padding: 10px 10px 44px; background: #fff; border-radius: 0; transform: rotate(-1.5deg); }

/* buttons: a little sticker */
html.l-scrapbook .inv .btn-line { border-style: dashed; }

/* the reply form stays straight */
html.l-scrapbook .inv .rs { position: relative; border: 0; border-radius: 2px; background: var(--sb-paper); box-shadow: var(--sb-shadow); transform: none; }
html.l-scrapbook .inv .rs::before { content: ""; position: absolute; left: 22px; top: -11px; width: 80px; height: 24px; transform: rotate(-6deg); background: var(--sb-tape); }
html.l-scrapbook .inv .rs::after { content: ""; position: absolute; right: 22px; top: -11px; width: 80px; height: 24px; transform: rotate(5deg); background: var(--sb-tape); }
@media (prefers-reduced-motion: reduce) { html.l-scrapbook .inv * { transition: none; } }

html.l-scrapbook .inv:not([class*="dz-s-"]) .tl-i > .tl-time { grid-column: 1; grid-row: 1; order: 0; }
html.l-scrapbook .inv:not([class*="dz-s-"]) .tl-i > .tl-body { grid-column: 2; grid-row: 1; order: 0; }

html.l-scrapbook .inv .vn-c .dz-pin, html.l-scrapbook .inv .vn-c .dz-tab { display: none; }

html.l-scrapbook .inv :is(.vn-c, .pp-g, .story-body, .tml-i, .faq) :is(.vn-n, .pp-h, .pp-l, .tml-t, summary, p) { color: var(--ink); -webkit-text-fill-color: currentColor; }
html.l-scrapbook.t-reel { --sb-paper: rgba(20, 18, 18, .78); }   /* Photo Reel sets light type over photos: dark, see-through paper keeps it readable */