/* ==========================================================================
   SCRAPBOOK — one page, hero and record. Loaded on a/scrapbook.html only.

   TIER 2. The room is a pile on a kraft board: every scrap hand-placed at
   its own rotation and offset, taped at the corners, overlapping whatever
   arrived before it. NOTHING aligns: no two scraps share a left edge, a
   right edge, a width or a rotation (hero edges audited: left 3/47/12/8 %,
   right 59/91/72/48 %; record edges: left 3/25/7/27/13/4/31 %, right
   81/97/87/95/89/66/96 %). Paint order is DOM
   order, so the newest scrap genuinely sits on top — the sheet adds hand
   placement, never rank.

   Colour arrives with the items (dcc:color-5): each scrap keeps its own
   arrival colour and no palette was laid over them. Contrast, per text/ground pair (all ≥ 4.5:1 AA):
     board #C7AE8B / annotations #2E2114 ......... 7.33:1
     catalogue card #F6F1E3 / #23303B ............ 11.95:1
     clipping #EFE9DC / #1F1D1A ................... 13.90:1
     depth notice #FFFFFF / #14161A .............. 18.11:1
     date tag on white #FFFFFF / #5A524A ......... 7.66:1
     legal pad #F8E9A0 / #3A2E07 ................. 10.90:1
     graph paper #E6E0F2 / #241A44 ............... 12.49:1
     sticker pink #F4C7D2 / #4A1322 .............. 9.91:1
     sticker mint #CFE8D4 / #123920 .............. 9.89:1
     sticker sky #C9DFF2 / #122B45 ............... 10.51:1
     marker scrap #FBF7EF / #402020 .............. 13.60:1
     hierarchy coral #F2B8A0 / #431407 ........... 9.05:1
     manila tag / cover #E8D9B0 / #241B06 ........ 12.14:1
     composed demo #DCE6F0 / #22303E ............. 10.65:1
     floor panels #F4EFE6 / #221C13 .............. 14.75:1

     index card #FFFFFF / #14161A, kind #5A524A ... 18.11:1 / 7.66:1
     record tag on board, #2E2114 on #C7AE8B ...... 7.33:1

   Motion: NONE. This sheet declares no animation at all, so the
   reduced-motion frame is the page itself.
   ========================================================================== */

@font-face {
  font-family: "Marker SK";
  src: url("fonts/permanent-marker.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Caveat SK";
  src: url("fonts/caveat.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

.sk-page {
  --sk-board: #C7AE8B;
  --sk-board-ink: #2E2114;
  --sk-floor-paper: #F4EFE6;
  --sk-floor-ink: #221C13;
  --sk-marker: "Marker SK", "Chalkboard SE", "Comic Sans MS", cursive;
  --sk-hand: "Caveat SK", "Bradley Hand", "Segoe Script", cursive;
  background: var(--paper); /* shell mat; the board lives on main */
}
.sk-page main {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.05)),
    var(--sk-board);
  color: var(--sk-board-ink);
}
.sk-wrap {
  max-width: 62rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
  padding-block-end: clamp(3rem, 7vw, 5rem);
}

/* ---- cover label --------------------------------------------------------- */
.sk-cover {
  width: fit-content;
  margin: clamp(2rem, 5vw, 3.5rem) auto 1rem;
  padding: 0.9rem 2.2rem 1.1rem;
  background: #E8D9B0;
  color: #241B06;
  transform: rotate(-1.6deg);
  box-shadow: 0 1px 2px rgba(46, 33, 20, 0.25), 0 8px 18px rgba(46, 33, 20, 0.18);
  position: relative;
}
.sk-h1 {
  margin: 0;
  font: 400 clamp(2.2rem, 6vw, 3.6rem)/1.05 var(--sk-marker);
  letter-spacing: 0.01em;
}
.sk-cover__sub {
  margin: 0.15rem 0 0;
  font: 500 clamp(1.25rem, 3vw, 1.55rem)/1.2 var(--sk-hand);
}

/* ---- washi tape ---------------------------------------------------------- */
/* Semi-transparent striped strips, one hue per scrap via --sk-tape. Drawn
   CSS, corners only. */
.sk-scrap::before,
.sk-scrap::after,
.sk-cover::before,
.sk-rc__s::before,
.sk-rc__s::after,
.sk-rc__h--tag::before,
.sk-ic::before {
  content: "";
  position: absolute;
  width: clamp(3.4rem, 8vw, 5.2rem);
  height: 1.35rem;
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.28) 0 0.4rem, rgba(255, 255, 255, 0) 0.4rem 0.8rem),
    var(--sk-tape, rgba(214, 178, 92, 0.62));
  box-shadow: 0 1px 2px rgba(46, 33, 20, 0.12);
  pointer-events: none;
}
.sk-cover::before { top: -0.55rem; left: 38%; transform: rotate(2.4deg); --sk-tape: rgba(188, 152, 201, 0.6); }
.sk-scrap::before { top: -0.55rem; left: -1.1rem; transform: rotate(-38deg); }
.sk-scrap::after { top: -0.5rem; right: -1.2rem; transform: rotate(41deg); }

/* ---- museum floors (reading matter, always level, always AA) ------------- */
.sk-floor {
  max-width: 46rem;
  margin: clamp(1.75rem, 4vw, 2.75rem) auto;
  padding: clamp(1.1rem, 3vw, 1.75rem) clamp(1.1rem, 3vw, 2rem);
  background: var(--sk-floor-paper);
  color: var(--sk-floor-ink);
  box-shadow: 0 1px 2px rgba(46, 33, 20, 0.2), 0 6px 16px rgba(46, 33, 20, 0.14);
  font: 400 0.95rem/1.7 Georgia, "Times New Roman", serif;
}
.sk-floor p { margin: 0 0 0.8rem; }
.sk-floor p:last-child { margin-bottom: 0; }
.sk-floor b { font-weight: 700; }
.sk-floor__h {
  margin: 0 0 0.75rem;
  font: 400 0.8rem/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5A4A33;
}

/* ---- the pile ------------------------------------------------------------ */
.sk-pile {
  list-style: none;
  margin: clamp(2.5rem, 6vw, 4rem) 0 clamp(2rem, 5vw, 3rem);
  padding: 0;
}
.sk-it { position: relative; }
.sk-scrap {
  position: relative;
  /* Deep bottom padding is the lap zone: the next scrap lands on this blank
     paper edge, so the pile overlaps — the §2 signature's "overlapping at
     their edges" — without burying the record's words. */
  padding: 1.35rem 1.25rem 3rem;
  box-shadow: 0 1px 2px rgba(46, 33, 20, 0.22), 0 10px 22px rgba(46, 33, 20, 0.2);
}
.sk-date {
  margin: 0 0 0.5rem;
  font: 400 0.7rem/1.4 "Courier New", Courier, monospace;
  letter-spacing: 0.04em;
  opacity: 0.82; /* over the scrap's own ink; every base pair is ≥ 9:1 */
}
.sk-card__label {
  margin: 0 0 0.4rem;
  font: 700 0.78rem/1.3 inherit;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sk-card__line { margin: 0; font-size: 0.98rem; line-height: 1.6; }
.sk-card__meta { margin: 0.55rem 0 0; font-size: 0.8rem; line-height: 1.5; opacity: 0.92; }

/* Hand placement. Each scrap its own width, offset, rotation and colour —
   the deliberate uncoordination. Values are the audited set from the head
   comment; change one and re-audit the edges. */
.sk-it--1 { width: 56%; margin-left: 3%; transform: rotate(-2.4deg); }
.sk-it--1 .sk-scrap {
  background:
    repeating-linear-gradient(180deg, transparent 0 1.45rem, rgba(35, 48, 59, 0.14) 1.45rem calc(1.45rem + 1px)),
    #F6F1E3;
  color: #23303B;
  font-family: "American Typewriter", "Courier New", monospace;
  --sk-tape: rgba(120, 168, 189, 0.58);
}

.sk-it--2 { width: 44%; margin-left: 47%; margin-top: -2.2rem; transform: rotate(3.1deg); }
.sk-it--2 .sk-scrap {
  background: #FBF7EF;
  color: #402020;
  font-family: Verdana, Geneva, sans-serif;
  --sk-tape: rgba(226, 156, 100, 0.58);
}
.sk-sticker {
  display: inline-block;
  margin: 0.3rem 0.35rem 0 0;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.82rem;
  box-shadow: 0 1px 2px rgba(46, 33, 20, 0.18);
}
.sk-sticker--a { background: #F4C7D2; color: #4A1322; transform: rotate(-3deg); }
.sk-sticker--b { background: #CFE8D4; color: #123920; transform: rotate(2.2deg); }
.sk-sticker--c { background: #C9DFF2; color: #122B45; transform: rotate(-1.4deg); }

.sk-it--3 { width: 60%; margin-left: 12%; margin-top: -2.5rem; transform: rotate(-1.2deg); }
.sk-it--3 .sk-scrap {
  background: #EFE9DC;
  color: #1F1D1A;
  font-family: Georgia, "Times New Roman", serif;
  --sk-tape: rgba(201, 188, 152, 0.62);
}
.sk-clip { margin: 0; font-size: 1.1rem; line-height: 1.5; font-style: italic; }

.sk-it--7 { width: 40%; margin-left: 8%; margin-top: -1.9rem; transform: rotate(-4.9deg); }
.sk-it--7 .sk-scrap {
  background: #FBF7EF;
  color: #402020;
  --sk-tape: rgba(214, 120, 120, 0.5);
}
.sk-card__label--marker { font-family: var(--sk-marker); font-weight: 400; font-size: 0.95rem; }
.sk-marker-list {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
  font: 400 1.05rem/1.55 var(--sk-marker);
}
.sk-marker-list li::before { content: "\2717\2002"; /* ✗ */ }

/* Found in research: how things were stuck down (kcc:technique-1/-2,
   kcc:surface-2). Kraft index scrap, #FFFDF6 / #2B2418 at 15.2:1. The
   marks are abstract drawings of each fastening, never a picture. */
.sk-it--8 { width: 56%; margin-left: 38%; margin-top: -2.3rem; transform: rotate(1.8deg); }
.sk-it--8 .sk-scrap {
  background: #FFFDF6;
  color: #2B2418;
  font-family: "Trebuchet MS", "Gill Sans", sans-serif;
  --sk-tape: rgba(150, 190, 140, 0.55);
}
.sk-fix { display: flex; flex-wrap: wrap; gap: 0.7rem 1.1rem; margin: 0.6rem 0 0; padding: 0; list-style: none; font-size: 0.82rem; }
.sk-fix li { display: grid; justify-items: start; gap: 0.3rem; }
.sk-fix__m { position: relative; display: block; width: 3.1rem; height: 2.3rem; background: #D9CFBD; }
.sk-fix__m--corner::before, .sk-fix__m--corner::after { content: ""; position: absolute; width: 0; height: 0; border: 0.55rem solid transparent; }
.sk-fix__m--corner::before { top: -2px; left: -2px; border-top-color: #2B2418; border-left-color: #2B2418; }
.sk-fix__m--corner::after { bottom: -2px; right: -2px; border-bottom-color: #2B2418; border-right-color: #2B2418; }
.sk-fix__m--dots { background: radial-gradient(circle, rgba(255,255,255,0.9) 0 0.28rem, transparent 0.3rem) 0.35rem 0.3rem / 2.3rem 1.6rem, #D9CFBD; }
.sk-fix__m--tape::before { content: ""; position: absolute; left: -0.3rem; right: -0.3rem; top: 0.8rem; height: 0.7rem; background: rgba(240, 236, 220, 0.85); border: 1px solid rgba(43, 36, 24, 0.25); }
.sk-fix__m--glue::before { content: ""; position: absolute; inset: 0.3rem; background: rgba(214, 188, 120, 0.55); border-radius: 40% 55% 45% 60%; }
.sk-fix__m--pin::before { content: ""; position: absolute; top: 0.35rem; left: 1.35rem; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #7A3F2A; }
.sk-fix__m--pin::after { content: ""; position: absolute; bottom: 0.4rem; left: 0.6rem; width: 1.2rem; height: 0; border-top: 2px solid #6B6258; }
.sk-fix__age { margin: 0.75rem 0 0; font-size: 0.88rem; line-height: 1.5; }
.sk-it--8 .sk-note--fix { font-size: 1.25rem; text-align: left; color: #3A2E1A; }

/* Handwriting in the gaps, Caveat: short labels only. */
.sk-note {
  margin: 0.5rem 0 0;
  font: 600 1.4rem/1.25 var(--sk-hand);
}
.sk-note--clip { transform: rotate(-2deg); width: fit-content; }

/* ---- the demonstration ---------------------------------------------------- */
.sk-demo {
  max-width: 52rem;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding: clamp(1.1rem, 3vw, 1.75rem) clamp(1.1rem, 3vw, 2rem);
  background: var(--sk-floor-paper);
  color: var(--sk-floor-ink);
  box-shadow: 0 1px 2px rgba(46, 33, 20, 0.2), 0 6px 16px rgba(46, 33, 20, 0.14);
  font: 400 0.95rem/1.7 Georgia, "Times New Roman", serif;
}
.sk-demo__h { margin-bottom: 0.5rem; }
.sk-demo__intro { margin: 0 0 1.1rem; }
.sk-demo__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
}
.sk-demo__panel { margin: 0; }
.sk-demo__board {
  position: relative;
  min-height: 13.5rem;
  box-shadow: inset 0 0 0 1px rgba(46, 33, 20, 0.25);
}
.sk-demo__cap { margin: 0.6rem 0 0; font-size: 0.83rem; line-height: 1.55; }
.sk-demo__verdict { margin: 1.1rem 0 0; font-weight: 700; }
.sk-demo__second { margin: 0.6rem 0 0; font-size: 0.88rem; }

/* Panel 01 — piled: the register. Overlap, rotation, arrival colours, tape. */
.sk-demo__board--piled { background: var(--sk-board); }
.sk-demo__chip {
  position: absolute;
  padding: 0.55rem 0.8rem;
  font-size: 0.82rem;
  line-height: 1.3;
  box-shadow: 0 1px 2px rgba(46, 33, 20, 0.25), 0 5px 12px rgba(46, 33, 20, 0.22);
}
.sk-demo__chip::before {
  content: "";
  position: absolute;
  top: -0.4rem; left: -0.7rem;
  width: 2.4rem; height: 0.9rem;
  transform: rotate(-37deg);
  background: rgba(255, 255, 255, 0.42);
}
.sk-demo__chip--p1 { left: 7%; top: 12%; transform: rotate(-6deg); background: #F6F1E3; color: #23303B; }
.sk-demo__chip--p2 { left: 34%; top: 26%; transform: rotate(4deg); background: #C9DFF2; color: #122B45; }
.sk-demo__chip--p3 { left: 16%; top: 43%; transform: rotate(-2.5deg); background: #F8E9A0; color: #3A2E07; font-family: "Courier New", monospace; }
.sk-demo__chip--p4 { left: 44%; top: 58%; transform: rotate(7deg); background: #F4C7D2; color: #4A1322; font-family: Georgia, serif; }
.sk-demo__chip--p5 { left: 24%; top: 70%; transform: rotate(-3.8deg); background: #F2B8A0; color: #431407; font-family: var(--sk-marker); }

/* Panel 02 — composed: the Module Digital Collage. Aligned, even, one
   palette, square. Everything the register refuses, on purpose. */
.sk-demo__board--composed {
  background: #E9EEF4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  align-content: center;
  padding: 1rem;
  min-height: 13.5rem;
  box-sizing: border-box;
}
.sk-demo__board--composed .sk-demo__chip {
  position: static;
  transform: none;
  background: #DCE6F0;
  color: #22303E;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
  box-shadow: none;
  border: 1px solid rgba(34, 48, 62, 0.3);
}
.sk-demo__board--composed .sk-demo__chip::before { content: none; }
.sk-demo__board--composed .sk-demo__chip:last-child { grid-column: 1 / -1; }

/* ---- small screens --------------------------------------------------------
   The hero pile keeps overlapping and keeps its rotations; only the offsets
   shrink so every scrap holds a readable measure inside the gutter. Edges
   stay unshared: left 0/7/2/4 %, widths 88/72/90/68 %. */
@media (max-width: 40rem) {
  .sk-it--1 { width: 88%; margin-left: 0; }
  .sk-it--2 { width: 72%; margin-left: 7%; margin-top: -2.2rem; }
  .sk-it--3 { width: 90%; margin-left: 2%; margin-top: -1.8rem; }
  .sk-it--7 { width: 68%; margin-left: 4%; margin-top: -2.1rem; }
  .sk-it--8 { width: 86%; margin-left: 11%; margin-top: -2rem; }
  .sk-scrap::after { right: -0.7rem; }
}

/* ==========================================================================
   THE RECORD — the rest of the pile. The same papers, tape and hand
   placement carry on down the board, so the design never stops. Rules for
   the record, stricter than the hero's:
   - every record sentence is upright or within 1.5deg of it, in the
     scrap's own system face; Marker and Caveat set short labels only;
   - scraps overlap only on the blank lap zone at the foot of the one
     beneath (padding-bottom 2.75rem > overlap 1.25rem + rotation drift
     of ≤ 9px per neighbour at the widest scrap), so nothing covers text;
   - below 820px the rotations and overlaps come off and scraps stack.
   ========================================================================== */
.sk-rec {
  color: var(--sk-board-ink);
}
.sk-rec__w {
  max-width: 62rem;
  margin-inline: auto;
  padding: 0 clamp(1rem, 4vw, 3rem) clamp(3rem, 7vw, 5rem);
}
.sk-rpile { list-style: none; margin: 0; padding: 0; }
.sk-rc { position: relative; }
.sk-rc:not(.sk-rc--rules) + .sk-rc:not(.sk-rc--rules) { margin-top: -1.25rem; }
.sk-rc__s {
  position: relative;
  padding: 1.5rem clamp(1.1rem, 3vw, 1.75rem) 2.75rem;
  box-shadow: 0 1px 2px rgba(46, 33, 20, 0.22), 0 10px 22px rgba(46, 33, 20, 0.2);
  font-size: 0.96rem;
  line-height: 1.62;
}
.sk-rc__s::before { top: -0.55rem; left: -1rem; transform: rotate(-36deg); }
.sk-rc__s::after { top: -0.5rem; right: -1.1rem; transform: rotate(39deg); }
.sk-rc__s p { margin: 0 0 0.75rem; }
.sk-rc__s > p:last-child { margin-bottom: 0; }
.sk-rc__s b { font-weight: 700; }
.sk-rc__h {
  margin: 0 0 0.8rem;
  font: 400 clamp(1.45rem, 3vw, 1.9rem)/1.1 var(--sk-marker);
  letter-spacing: 0.01em;
}
.sk-rc__n { font: 600 1.15em/1 var(--sk-hand); margin-left: 0.2em; }

/* Papers: the hero's own stock, reused. Nothing new is designed. */
.sk-p--card {
  background:
    repeating-linear-gradient(180deg, transparent 0 1.6rem, rgba(35, 48, 59, 0.12) 1.6rem calc(1.6rem + 1px)),
    #F6F1E3;
  color: #23303B;
  font-family: "American Typewriter", "Courier New", monospace;
  --sk-tape: rgba(120, 168, 189, 0.58);
}
.sk-p--pad {
  background:
    repeating-linear-gradient(180deg, transparent 0 1.55rem, rgba(58, 46, 7, 0.14) 1.55rem calc(1.55rem + 1px)),
    #F8E9A0;
  color: #3A2E07;
  font-family: Palatino, "Book Antiqua", "Palatino Linotype", serif;
  --sk-tape: rgba(126, 178, 122, 0.55);
}
.sk-p--grid {
  background:
    repeating-linear-gradient(0deg, transparent 0 0.85rem, rgba(36, 26, 68, 0.09) 0.85rem calc(0.85rem + 1px)),
    repeating-linear-gradient(90deg, transparent 0 0.85rem, rgba(36, 26, 68, 0.09) 0.85rem calc(0.85rem + 1px)),
    #E6E0F2;
  color: #241A44;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sk-tape: rgba(228, 178, 96, 0.55);
}
.sk-p--marker {
  background: #FBF7EF;
  color: #402020;
  font-family: Verdana, Geneva, sans-serif;
  --sk-tape: rgba(214, 120, 120, 0.5);
}
.sk-p--typed {
  background: #FFFFFF;
  color: #14161A;
  font-family: "American Typewriter", "Courier New", Courier, monospace;
  --sk-tape: rgba(176, 176, 176, 0.5);
}
.sk-p--clip {
  background: #EFE9DC;
  color: #1F1D1A;
  font-family: Georgia, "Times New Roman", serif;
  --sk-tape: rgba(201, 188, 152, 0.62);
}
.sk-p--manila {
  background: #E8D9B0;
  color: #241B06;
  font-family: Georgia, "Times New Roman", serif;
  --sk-tape: rgba(196, 120, 130, 0.55);
}
.sk-p--pink { background: #F4C7D2; color: #4A1322; }

/* Hand placement, ≥ 820px. Each its own width, offset and small rotation. */
.sk-rc--1 { width: 78%; margin-left: 3%; transform: rotate(-1deg); }
.sk-rc--2 { width: 72%; margin-left: 25%; transform: rotate(1.2deg); }
.sk-rc--3 { width: 80%; margin-left: 7%; transform: rotate(-0.7deg); }
.sk-rc--4 { width: 68%; margin-left: 27%; transform: rotate(1.4deg); }
.sk-rc--5 { width: 76%; margin-left: 13%; transform: rotate(-0.6deg); }
.sk-rc--6 { width: 62%; margin-left: 4%; transform: rotate(1deg); }
.sk-rc--7 { width: 65%; margin-left: 31%; transform: rotate(-1.3deg); }
.sk-rc--7 .sk-rc__s {
  padding-bottom: 1.75rem;
  box-shadow: 0 2px 3px rgba(46, 33, 20, 0.25), 0 16px 34px rgba(46, 33, 20, 0.28);
}

/* ---- the record: facts on the catalogue card ----------------------------- */
.sk-rc-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1.5rem;
  margin: 0;
}
.sk-rc-facts dt {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}
.sk-rc-facts dd { margin: 0.15rem 0 0; }
.sk-rc-facts__wide { grid-column: 1 / -1; }

/* ---- argues: legal pad, refusal on a pink slip --------------------------- */
.sk-rc-claim { font-size: 1.14rem; line-height: 1.6; }
.sk-rc-slip {
  width: fit-content;
  max-width: 34rem;
  margin: 1rem 0 1.1rem 1.25rem;
  padding: 0.75rem 1rem 0.8rem;
  transform: rotate(0.8deg);
  box-shadow: 0 1px 2px rgba(46, 33, 20, 0.2), 0 5px 12px rgba(46, 33, 20, 0.16);
}
.sk-rc-slip p { margin: 0; }
.sk-rc-slip .sk-rc-slip__k { margin-bottom: 0.2rem; font: 400 1.1rem/1.2 var(--sk-marker); }
.sk-rc-dl { margin: 0; display: grid; gap: 0.55rem; }
.sk-rc-dl div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 0.75rem; }
.sk-rc-dl dt { font-weight: 700; }
.sk-rc-dl dd { margin: 0; }

/* ---- recognise: grid paper, the diagnostic on a typed slip --------------- */
.sk-rc-typed {
  margin: 1rem 0 1.1rem !important;
  padding: 0.8rem 1rem;
  background: #FFFFFF;
  color: #14161A;
  font-family: "American Typewriter", "Courier New", Courier, monospace;
  transform: rotate(-0.6deg);
  box-shadow: 0 1px 2px rgba(46, 33, 20, 0.2), 0 5px 12px rgba(46, 33, 20, 0.14);
}

/* ---- what carries the look ----------------------------------------------- */
.sk-rc-small { font-size: 0.85rem; }
.sk-rc-dims { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.sk-rc-dims > li {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 0.25rem 1rem;
  padding: 0.3rem 0;
  border-top: 1px dashed rgba(64, 32, 32, 0.3);
}
.sk-rc-dim { margin: 0 !important; display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.6rem; }
.sk-rc-dimv { align-self: center; }
.sk-rc-dimv p { margin: 0.35rem 0; }
.sk-rc a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.sk-rc a:hover { text-decoration-thickness: 2px; }
.sk-rc a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sk-rc-dim a,
.sk-rc-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: 0.75rem;
}
.sk-rc-carries { font: 600 1.3rem/1 var(--sk-hand); }
.sk-rc-none { opacity: 0.85; }
.sk-rc-pal { display: flex; flex-wrap: wrap; gap: 0.6rem 0.7rem; margin: 0.4rem 0 0.2rem; }
.sk-rc-swatch {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  font: 400 0.7rem/1.2 "Courier New", Courier, monospace;
}
.sk-rc-swatch i {
  display: block;
  width: 2.4rem;
  height: 1.8rem;
  box-shadow: 0 1px 2px rgba(46, 33, 20, 0.28);
}
.sk-rc-swatch:nth-child(odd) i { transform: rotate(-2deg); }
.sk-rc-swatch:nth-child(3n) i { transform: rotate(2.4deg); }

/* ---- rules: a tag on the board, then one index card per rule ------------- */
.sk-rc--rules { margin-block: 2.5rem 2.25rem; }
.sk-rc--rules .sk-rc__s { padding: 0; box-shadow: none; }
.sk-rc--rules .sk-rc__s::before,
.sk-rc--rules .sk-rc__s::after { content: none; }
.sk-rc__h--tag {
  position: relative;
  display: inline-block;
  margin: 0 0 0.6rem 9%;
  padding: 0.55rem 1.4rem 0.6rem;
  background: #E8D9B0;
  color: #241B06;
  transform: rotate(-1.5deg);
  box-shadow: 0 1px 2px rgba(46, 33, 20, 0.25), 0 6px 14px rgba(46, 33, 20, 0.18);
  --sk-tape: rgba(188, 152, 201, 0.6);
}
.sk-rc__h--tag::before { top: -0.6rem; left: 30%; transform: rotate(3deg); }
.sk-rc-under {
  margin: 0 0 1.4rem 9% !important;
  font: 400 0.95rem/1.6 Georgia, "Times New Roman", serif;
  color: var(--sk-board-ink);
}
.sk-ics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  align-items: start;
  gap: 1.9rem 1.6rem;
}
.sk-ic {
  position: relative;
  padding: 0.9rem 1.1rem 1.1rem;
  background:
    linear-gradient(180deg, transparent 0 3.9rem, rgba(196, 64, 64, 0.5) 3.9rem calc(3.9rem + 1px), transparent calc(3.9rem + 1px)),
    repeating-linear-gradient(180deg, transparent 0 1.55rem, rgba(60, 110, 170, 0.14) 1.55rem calc(1.55rem + 1px)),
    #FFFFFF;
  color: #14161A;
  box-shadow: 0 1px 2px rgba(46, 33, 20, 0.22), 0 8px 18px rgba(46, 33, 20, 0.18);
  --sk-tape: rgba(140, 190, 214, 0.55);
}
.sk-ic::before { top: -0.6rem; left: calc(50% - 2.2rem); width: 4.4rem; transform: rotate(-3deg); }
/* Each card lands where it lands: its own height, nudge and turn. */
.sk-ic--1 { transform: translateX(-0.4rem) rotate(-1.2deg); }
.sk-ic--2 { transform: translateX(0.5rem) rotate(0.9deg); margin-top: 0.7rem; --sk-tape: rgba(226, 156, 100, 0.55); }
.sk-ic--3 { transform: translate(0.2rem, -0.3rem) rotate(-0.4deg); --sk-tape: rgba(126, 178, 122, 0.55); }
.sk-ic--4 { transform: translateX(-0.3rem) rotate(1.4deg); margin-top: 1.1rem; --sk-tape: rgba(214, 120, 120, 0.5); }
.sk-ic--5 { transform: translate(0.6rem, 0.4rem) rotate(-0.8deg); --sk-tape: rgba(188, 152, 201, 0.6); }
.sk-ic__kind {
  margin: 0;
  font: 400 0.72rem/1.4 "Courier New", Courier, monospace;
  letter-spacing: 0.04em;
  color: #5A524A;
}
.sk-ic__h { margin: 0.1rem 0 0.9rem; font: 400 1.25rem/1.3 var(--sk-marker); }
.sk-ic__t { margin: 0; font: 400 0.95rem/1.62 Georgia, "Times New Roman", serif; }
.sk-ic__ev {
  display: inline-block;
  padding: 0 0.35rem;
  border: 1px solid currentColor;
  font: 400 0.7rem/1.5 "Courier New", Courier, monospace;
  white-space: nowrap;
}
.sk-ics--out .sk-ic { background: #F2B8A0; color: #431407; }
.sk-ics--out .sk-ic__kind { color: #431407; }

/* ---- what stands behind it: typed slip, ledger, warning ------------------ */
.sk-rc-tblw { overflow-x: auto; margin: 1rem 0; }
.sk-rc-tbl { border-collapse: collapse; width: 100%; font-size: 0.85rem; line-height: 1.4; }
.sk-rc-tbl th,
.sk-rc-tbl td { padding: 0.45rem 0.6rem 0.45rem 0; text-align: left; border-bottom: 1px dashed rgba(20, 22, 26, 0.3); vertical-align: top; }
.sk-rc-tbl thead th { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; border-bottom-style: solid; }
.sk-rc-tbl tbody th { font-weight: 700; }
.sk-rc-no { color: #7A1F1F; font-weight: 700; }
.sk-rc-firm {
  width: fit-content;
  max-width: 30rem;
  margin: 1.2rem 0 0 auto !important;
  padding: 0.8rem 1rem;
  background: #F8E9A0;
  color: #3A2E07;
  font: 700 0.95rem/1.55 Palatino, "Book Antiqua", "Palatino Linotype", serif;
  transform: rotate(-0.9deg);
  box-shadow: 0 1px 2px rgba(46, 33, 20, 0.2), 0 5px 12px rgba(46, 33, 20, 0.16);
}

/* ---- neighbours: clippings ------------------------------------------------ */
.sk-rc-conf { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.sk-rc-conf li > a,
.sk-rc-conf li > div {
  display: grid;
  min-height: 44px;
  padding: 0.55rem 0;
  border-top: 1px solid rgba(31, 29, 26, 0.25);
  text-decoration: none;
}
.sk-rc-conf li > a:hover .sk-rc-conf__n { text-decoration: underline; }
.sk-rc-conf__k { font: 400 0.72rem/1.4 "Courier New", Courier, monospace; letter-spacing: 0.04em; }
.sk-rc-conf__n { font-size: 1.1rem; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.sk-rc-conf__t { font-style: italic; }

/* ---- use it: the newest scrap, on top ------------------------------------- */
.sk-rc-top {
  width: fit-content;
  margin: -0.35rem 0 0.6rem !important;
  font: 600 1.4rem/1.2 var(--sk-hand);
  transform: rotate(-1.5deg);
}
.sk-rc-exits { list-style: none; margin: 0; padding: 0; }
.sk-rc-exits li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.75rem;
  padding: 0.1rem 0;
  border-top: 1px dashed rgba(36, 27, 6, 0.3);
}
.sk-rc-exits a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 400 1.2rem/1.2 var(--sk-marker);
}
.sk-rc-exits span { font-size: 0.9rem; }

/* ---- small screens: the rotations and overlaps come off; scraps stack ---- */
@media (max-width: 51.24rem) {
  .sk-rc,
  .sk-rc--1, .sk-rc--2, .sk-rc--3, .sk-rc--4, .sk-rc--5, .sk-rc--6, .sk-rc--7 {
    width: auto;
    margin-left: 0;
    transform: none;
  }
  .sk-rc:not(.sk-rc--rules) + .sk-rc:not(.sk-rc--rules) { margin-top: 1.6rem; }
  .sk-rc__s { padding-bottom: 1.5rem; }
  .sk-rc__s::before { left: -0.4rem; }
  .sk-rc__s::after { right: -0.4rem; }
  .sk-rc-slip, .sk-rc-typed, .sk-rc-firm, .sk-rc__h--tag, .sk-rc-top, .sk-ic { transform: none; }
  .sk-ic--2, .sk-ic--4 { margin-top: 0; }
  .sk-rc-tbl tbody th, .sk-rc-tbl td { overflow-wrap: anywhere; }
  .sk-rc-tbl thead th { font-size: 0.66rem; letter-spacing: 0.03em; }
  .sk-rc__h--tag, .sk-rc-under { margin-left: 0 !important; }
  .sk-rc-slip { margin-left: 0; }
  .sk-rc-firm { margin-left: 0 !important; }
}
@media (max-width: 36rem) {
  .sk-rc-facts { grid-template-columns: 1fr; }
  .sk-rc-dl div, .sk-rc-dims > li { grid-template-columns: 1fr; }
  .sk-ics { grid-template-columns: 1fr; }
}