/* ============================================================
   V SYSTEM — "Crawler to Citation" zine deck
   Used by Deck.html. All archetypes in one stylesheet.
   ============================================================ */

:root {
  --v-paper:  #efe9dc;
  --v-ink:    #14110e;
  --v-accent: #c91818;
  --v-card:   #fbf7ec;

  --v-title-block1: #14110e;
  --v-title-block2: #c91818;
  --v-title-block-fg: #efe9dc;

  --v-section-bg:     #1a1612;
  --v-section-accent: #ffc34a;
  --v-section-fg:     #efe9dc;
}

/* ----- Deck-stage section sizing ----- */
deck-stage > section,
.slide {
  width: 1920px; height: 1080px;
  position: relative; overflow: hidden;
  box-sizing: border-box;
}
.slide h1, .slide h2, .slide h3, .slide p, .slide ul, .slide li,
deck-stage > section h1, deck-stage > section h2, deck-stage > section h3,
deck-stage > section p, deck-stage > section ul, deck-stage > section li {
  margin: 0; padding: 0;
}
deck-stage > section ul { list-style: none; }

/* ============================================================
   .v skin — every slide gets this
   ============================================================ */
.v {
  /* Solid paper tone — equivalent perceived value to the previous cross-hatch
     pattern, but projector-safe (no sub-pixel moiré). */
  background: #e7e1d3;
  color: var(--v-ink);
  font-family: "Courier Prime", monospace;
}
.v .smudge {
  position: absolute; pointer-events: none;
  background: radial-gradient(ellipse at 30% 40%, #00000018 0%, transparent 60%);
  filter: blur(2px); mix-blend-mode: multiply;
}

/* Corner labels (top only — bottom dropped per review) */
.v .corner {
  position: absolute; font-family: "Special Elite", monospace;
  font-size: 26px; color: var(--v-ink); letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1.4; z-index: 4;
}
.v .corner b { font-weight: 700; }
.v .corner.tl { top: 56px; left: 100px; }
.v .corner.tr { top: 56px; right: 100px; text-align: right; }

/* Ransom block */
.v .ransom {
  display: inline-block; padding: 18px 32px 22px;
  font-family: "Anton", sans-serif; font-weight: 400;
  line-height: 0.92; letter-spacing: 0.01em; text-transform: uppercase;
  box-shadow: 14px 16px 0 color-mix(in srgb, var(--v-ink) 12%, transparent);
}
.v .ransom.dark  { background: var(--v-ink);    color: var(--v-paper); }
.v .ransom.red   { background: var(--v-accent); color: var(--v-paper); }
.v .ransom.cream { background: var(--v-paper);  color: var(--v-ink); border: 4px solid var(--v-ink); }
.v .ransom.amber { background: #ffc34a; color: var(--v-ink); }

/* Headline wrappers used by stat / list / code / etc. */
.v .h-wrap { position: absolute; left: 100px; top: 150px; transform: rotate(-0.6deg); z-index: 2; }
.v .h-wrap .ransom { font-size: 112px; padding: 14px 28px; }
.v .h-wrap-2 { position: absolute; left: 260px; top: 290px; transform: rotate(1deg); z-index: 2; }
.v .h-wrap-2 .ransom { font-size: 112px; padding: 14px 28px; }

/* Tape strips */
.v .tape {
  position: absolute; width: 180px; height: 44px;
  background: rgba(255, 232, 120, 0.7);
  border-top: 1px dashed #00000022; border-bottom: 1px dashed #00000022;
  box-shadow: 0 6px 12px #00000022;
  pointer-events: none; z-index: 3;
}

/* Stamps */
.v .stamp {
  position: absolute; padding: 14px 24px;
  border: 4px solid var(--v-accent); color: var(--v-accent);
  font-family: "Special Elite", monospace;
  font-size: 24px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1.2; text-align: center;
  background: color-mix(in srgb, var(--v-paper) 15%, transparent);
  z-index: 4;
}
.v .stamp.round {
  width: 240px; height: 240px; padding: 0;
  border: none; background: none;
}
.v .stamp.round svg {
  width: 100%; height: 100%; overflow: visible;
  color: var(--v-accent);
  filter: drop-shadow(2px 2px 0 color-mix(in srgb, var(--v-accent) 20%, transparent));
}

/* Polaroid */
.v .polaroid {
  position: absolute; background: var(--v-card); padding: 22px 22px 56px;
  box-shadow: 0 16px 28px #00000033; border: 1px solid #00000018;
}
.v .polaroid .img {
  width: 100%; height: 320px;
  background-color: #1a120c;
  background-position: center; background-size: cover;
  border: 1px solid #00000022;
}
.v .polaroid .cap {
  margin-top: 16px; font-family: "Special Elite", monospace;
  font-size: 22px; color: var(--v-ink); text-align: center;
}

/* Generic card */
.v .card {
  background: var(--v-card);
  border: 4px solid var(--v-ink); padding: 28px 32px;
  font-family: "Courier Prime", monospace; font-weight: 700;
  color: var(--v-ink);
  box-shadow: 14px 16px 0 color-mix(in srgb, var(--v-accent) 30%, transparent);
}
.v .card .lbl {
  display: inline-block; background: var(--v-ink); color: var(--v-paper);
  padding: 6px 14px; font-family: "Special Elite", monospace;
  font-size: 22px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; margin-bottom: 16px;
}
.v .card .lbl.red { background: var(--v-accent); }
.v .card .body { font-size: 30px; line-height: 1.45; }

/* ============================================================
   ARCHETYPE: TITLE  (.v.v-title)
   ============================================================ */
.v.v-title .corner.tr { color: var(--v-accent); }
.v.v-title .ransom.dark { background: var(--v-title-block1); color: var(--v-title-block-fg); }
.v.v-title .ransom.red  { background: var(--v-title-block2); color: var(--v-title-block-fg); }

.v.v-title .h1-wrap { position: absolute; left: 100px; top: 170px; transform: rotate(-1.2deg); z-index: 1; }
.v.v-title .h1-wrap .ransom { font-size: 240px; }
.v.v-title .h1-tape-1 { top: 144px; left: 40px;  transform: rotate(-18deg); z-index: 2; }
.v.v-title .h1-tape-2 { top: 144px; left: 880px; transform: rotate(14deg);  z-index: 2; }

.v.v-title .h2-wrap { position: absolute; left: 260px; top: 430px; transform: rotate(1.6deg); z-index: 1; }
.v.v-title .h2-wrap .ransom { font-size: 240px; }
.v.v-title .h2-tape-1 { top: 406px; left: 220px;  transform: rotate(12deg);  z-index: 2; }
.v.v-title .h2-tape-2 { top: 406px; left: 1340px; transform: rotate(-18deg); z-index: 2; }

.v.v-title .stamp-1 { top: 200px; right: 110px; transform: rotate(-8deg); }

.v.v-title .abstract { position: absolute; left: 100px; bottom: 100px; width: 1100px; transform: rotate(-0.5deg); z-index: 3; }
.v.v-title .author   { position: absolute; right: 100px; bottom: 100px; width: 540px; transform: rotate(0.8deg);
                       box-shadow: 14px 16px 0 color-mix(in srgb, var(--v-ink) 18%, transparent);
                       z-index: 3; }
.v.v-title .author .lbl { background: var(--v-accent); }
.v.v-title .author .body { font-family: "Special Elite", monospace; font-size: 26px; line-height: 1.55; font-weight: 400; }
.v.v-title .author .body b { font-family: "Anton", sans-serif; font-size: 52px; font-weight: 400; letter-spacing: 0.02em; display: block; margin-bottom: 8px; text-transform: uppercase; line-height: 1; }

.v.v-title .smudge.s1 { left: 880px; top: 320px; width: 360px; height: 220px; transform: rotate(-12deg); }

.v.v-title .title-polaroid { width: 380px; right: 130px; top: 350px; transform: rotate(4deg); z-index: 0; }
.v.v-title .title-polaroid .img { height: 300px; }

/* ============================================================
   ARCHETYPE: SECTION DIVIDER  (.v.v-section)
   ============================================================ */
.v.v-section { background-color: var(--v-section-bg); }
.v.v-section .corner { color: var(--v-section-fg); }
.v.v-section .corner.tr { color: var(--v-section-accent); }
.v.v-section .actno-wrap { position: absolute; left: 100px; top: 180px; transform: rotate(-1deg); }
.v.v-section .actno-wrap .ransom {
  background: var(--v-section-accent); color: var(--v-section-bg);
  font-size: 260px; padding: 22px 44px;
  box-shadow: 14px 16px 0 color-mix(in srgb, var(--v-accent) 30%, transparent);
}
.v.v-section .title-wrap { position: absolute; left: 200px; top: 480px; transform: rotate(1.4deg); }
.v.v-section .title-wrap .ransom {
  background: var(--v-section-fg); color: var(--v-section-bg);
  font-size: 200px; padding: 18px 36px;
  box-shadow: 14px 16px 0 color-mix(in srgb, var(--v-section-accent) 36%, transparent);
}
.v.v-section .standfirst {
  position: absolute; left: 200px; bottom: 80px; right: 200px;
  transform: rotate(-0.4deg); background: var(--v-section-bg);
  border-top: 4px solid var(--v-section-accent);
  border-bottom: 4px solid var(--v-section-accent);
  padding: 28px 0;
  font-family: "Special Elite", monospace; font-size: 36px; line-height: 1.4;
  color: var(--v-section-fg); text-align: center;
}
.v.v-section .standfirst b { color: var(--v-section-accent); }
.v.v-section .stamp-1 {
  border-color: var(--v-section-accent); color: var(--v-section-accent);
  top: 220px; right: 120px; transform: rotate(8deg);
}

/* ============================================================
   ARCHETYPE: STAT  (.v.v-stat)
   ============================================================ */
.v.v-stat .num-card {
  position: absolute; left: 100px; bottom: 80px;
  background: var(--v-paper); border: 5px solid var(--v-ink);
  padding: 32px 56px 40px;
  transform: rotate(-1.4deg);
  box-shadow: 18px 20px 0 var(--v-accent);
}
.v.v-stat .num-card .lbl {
  font-family: "Special Elite", monospace; font-size: 26px; font-weight: 700;
  color: var(--v-accent); text-transform: uppercase; letter-spacing: 0.06em;
  display: block; margin-bottom: 10px;
}
.v.v-stat .num-card .num {
  font-family: "Anton", sans-serif; font-weight: 400; font-size: 360px;
  line-height: 0.86; color: var(--v-ink); letter-spacing: -0.005em;
}
.v.v-stat .num-card .num sup { font-size: 150px; color: var(--v-accent); vertical-align: top; }
.v.v-stat .annot {
  position: absolute; right: 100px; bottom: 100px; width: 600px;
  transform: rotate(1.4deg);
}
.v.v-stat .annot .body {
  font-family: "Courier Prime", monospace; font-size: 28px; line-height: 1.4;
  font-weight: 700; color: var(--v-ink);
}
.v.v-stat .annot .src {
  margin-top: 18px; font-family: "Special Elite", monospace; font-size: 22px;
  color: var(--v-accent); text-transform: uppercase; letter-spacing: 0.04em;
}
.v.v-stat .annot .compare {
  margin-top: 18px; padding-top: 14px;
  border-top: 3px dashed color-mix(in srgb, var(--v-ink) 55%, transparent);
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 24px; font-weight: 700;
}
.v.v-stat .annot .compare b { font-family: "Anton"; font-size: 54px; color: var(--v-accent); font-weight: 400; }
.v.v-stat .stamp-1 { top: 380px; right: 180px; transform: rotate(-8deg); z-index: 4; }

/* ============================================================
   ARCHETYPE: LIST  (.v.v-list)
   ============================================================ */
.v.v-list .items {
  position: absolute; left: 100px; right: 100px; top: 500px; bottom: 80px;
  display: grid; gap: 24px 36px;
}
.v.v-list .items.cols-2 { grid-template-columns: 1fr 1fr; }
.v.v-list .items.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.v.v-list .items.cols-1 { grid-template-columns: 1fr; }

.v.v-list .item {
  background: var(--v-card); border: 4px solid var(--v-ink);
  padding: 22px 28px 22px 110px;
  font-family: "Courier Prime", monospace; font-weight: 700;
  font-size: 24px; line-height: 1.4; color: var(--v-ink);
  position: relative;
}
.v.v-list .item:nth-child(2n)   { transform: rotate(0.4deg);  box-shadow: 10px 12px 0 color-mix(in srgb, var(--v-accent) 30%, transparent); }
.v.v-list .item:nth-child(2n+1) { transform: rotate(-0.4deg); box-shadow: 10px 12px 0 color-mix(in srgb, var(--v-ink) 14%, transparent); }
.v.v-list .item .n {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  background: var(--v-accent); color: var(--v-paper);
  font-family: "Anton", sans-serif; font-size: 60px; font-weight: 400;
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.v.v-list .item b {
  display: block; font-size: 22px; text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 6px; font-family: "Special Elite", monospace;
  color: var(--v-accent);
}
.v.v-list .stamp-1 { top: 380px; right: 130px; transform: rotate(-6deg); z-index: 4; }

/* 3-column variant: less padding, smaller numbers */
.v.v-list .items.cols-3 .item { padding: 20px 22px 20px 92px; font-size: 22px; }
.v.v-list .items.cols-3 .item .n { width: 60px; height: 60px; font-size: 48px; left: 14px; }

/* 1-column variant: text only, larger */
.v.v-list .items.cols-1 .item { padding: 24px 32px 24px 32px; font-size: 30px; }
.v.v-list .items.cols-1 .item .n { display: none; }

/* ============================================================
   ARCHETYPE: QUOTE  (.v.v-quote)
   ============================================================ */
.v.v-quote .qmark {
  position: absolute; left: 80px; top: 100px;
  font-family: "Anton", sans-serif; font-size: 360px;
  color: var(--v-accent); line-height: 0.7;
}
.v.v-quote .body {
  position: absolute; left: 240px; right: 120px; top: 220px;
  font-family: "Special Elite", monospace; font-weight: 700;
  font-size: 60px; line-height: 1.18; color: var(--v-ink);
}
.v.v-quote .body em {
  font-style: normal; background: var(--v-accent); color: var(--v-paper);
  padding: 0 14px; box-shadow: 8px 8px 0 color-mix(in srgb, var(--v-ink) 14%, transparent);
}
.v.v-quote .body .punch {
  display: block; margin-top: 28px;
  font-family: "Anton", sans-serif; font-weight: 400;
  font-size: 92px; line-height: 1.0; text-transform: uppercase;
  letter-spacing: 0.01em;
}
.v.v-quote .attribution {
  position: absolute; left: 240px; bottom: 80px; right: 120px;
  border-top: 4px solid var(--v-ink); padding-top: 20px;
  font-family: "Special Elite", monospace; font-size: 26px;
  letter-spacing: 0.04em; text-transform: uppercase;
  display: flex; justify-content: space-between; gap: 24px;
}
.v.v-quote .attribution b { color: var(--v-accent); }

/* ============================================================
   ARCHETYPE: CODE  (.v.v-code)
   ============================================================ */
.v.v-code .memo {
  position: absolute; left: 100px; right: 100px; top: 460px; bottom: 80px;
  background: var(--v-card); border: 5px solid var(--v-ink);
  box-shadow: 16px 18px 0 color-mix(in srgb, var(--v-accent) 30%, transparent);
  transform: rotate(-0.4deg);
  padding: 24px 32px 28px;
  display: flex; flex-direction: column;
}
.v.v-code .memo .head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 3px solid var(--v-ink); padding-bottom: 14px; margin-bottom: 18px;
  font-family: "Special Elite", monospace; font-size: 22px;
  color: var(--v-ink); text-transform: uppercase; letter-spacing: 0.06em;
}
.v.v-code .memo .head .tag {
  background: var(--v-accent); color: var(--v-paper); padding: 4px 14px; font-weight: 700;
}
.v.v-code pre.code {
  margin: 0; flex: 1; overflow: hidden;
  font-family: "Courier Prime", monospace; font-weight: 700;
  font-size: 24px; line-height: 1.38; color: var(--v-ink);
  white-space: pre;
}
.v.v-code pre.code .c { color: color-mix(in srgb, var(--v-ink) 50%, var(--v-paper)); }
.v.v-code pre.code .a { color: var(--v-accent); }
.v.v-code pre.code .d { color: var(--v-ink); background: #ffc34a; padding: 0 6px; }
.v.v-code pre.code .k { font-weight: 700; }
.v.v-code .stamp-1 { top: 380px; right: 130px; transform: rotate(-6deg); z-index: 4; }

/* ============================================================
   ARCHETYPE: COMPARE 2-PANEL  (.v.v-compare)
   ============================================================ */
.v.v-compare .panels {
  position: absolute; left: 100px; right: 100px; top: 480px; bottom: 80px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px;
}
.v.v-compare .panel {
  background: var(--v-card); border: 4px solid var(--v-ink);
  padding: 22px 26px; position: relative;
  display: flex; flex-direction: column;
}
.v.v-compare .panel.before { transform: rotate(-0.8deg); box-shadow: 14px 16px 0 color-mix(in srgb, var(--v-ink) 14%, transparent); }
.v.v-compare .panel.after  { transform: rotate(0.8deg);  box-shadow: 14px 16px 0 color-mix(in srgb, var(--v-accent) 30%, transparent); }
.v.v-compare .panel .lbl {
  display: inline-block; align-self: flex-start;
  background: var(--v-ink); color: var(--v-paper);
  padding: 6px 14px; font-family: "Special Elite", monospace;
  font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
  margin-bottom: 14px;
}
.v.v-compare .panel.after .lbl { background: var(--v-accent); }
.v.v-compare .panel .body { font-family: "Courier Prime", monospace; font-weight: 700; font-size: 26px; line-height: 1.4; color: var(--v-ink); flex: 1; }
.v.v-compare .panel .num {
  margin-top: 14px;
  font-family: "Anton", sans-serif; font-weight: 400; font-size: 220px;
  line-height: 0.86; color: var(--v-ink); letter-spacing: -0.005em;
}
.v.v-compare .panel .num sup { font-size: 96px; color: var(--v-accent); vertical-align: top; }
.v.v-compare .panel .num.muted { color: color-mix(in srgb, var(--v-ink) 55%, var(--v-paper)); }
.v.v-compare .panel .num.muted sup { color: color-mix(in srgb, var(--v-ink) 50%, var(--v-paper)); }

/* ============================================================
   ARCHETYPE: GRAPH (.v.v-graph) — single SVG canvas
   Used for slide 16 (schema graph) and any diagram slide.
   ============================================================ */
.v.v-graph .canvas {
  position: absolute; left: 100px; right: 100px; top: 480px; bottom: 80px;
  background: var(--v-card); border: 5px solid var(--v-ink);
  box-shadow: 16px 18px 0 color-mix(in srgb, var(--v-accent) 30%, transparent);
  transform: rotate(-0.4deg);
  padding: 24px;
  display: flex; align-items: center; justify-content: center;
}
.v.v-graph .canvas svg { width: 100%; height: 100%; overflow: visible; }

/* ============================================================
   ARCHETYPE: RESOURCES  (.v.v-resources)
   Thank-you slide: Q&A invitation card + QR connect card.
   ============================================================ */
.v.v-resources .qa-invite {
  position: absolute; left: 100px; right: 720px; top: 480px; bottom: 80px;
  background: var(--v-ink); color: var(--v-paper);
  padding: 28px 32px; transform: rotate(-0.6deg);
  box-shadow: 14px 16px 0 color-mix(in srgb, var(--v-accent) 30%, transparent);
  display: flex; flex-direction: column;
}
.v.v-resources .qa-invite .lbl {
  align-self: flex-start;
  background: #ffc34a; color: var(--v-ink);
  padding: 6px 14px; font-family: "Special Elite", monospace;
  font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
  margin-bottom: 22px;
}
.v.v-resources .qa-invite .body {
  font-family: "Special Elite", monospace; font-size: 36px;
  line-height: 1.4; flex: 1;
}
.v.v-resources .qa-invite .body em { color: #ffc34a; font-style: normal; font-weight: 700; }
.v.v-resources .qa-invite .sig {
  margin-top: 18px; font-family: "Anton", sans-serif;
  font-size: 64px; font-weight: 400; letter-spacing: 0.02em;
  color: var(--v-accent);
}

.v.v-resources .qr-card {
  position: absolute; right: 100px; top: 480px; bottom: 80px; width: 580px;
  background: var(--v-card); border: 5px solid var(--v-ink);
  padding: 24px 28px; transform: rotate(1.2deg);
  box-shadow: 14px 16px 0 color-mix(in srgb, var(--v-ink) 18%, transparent);
  display: flex; flex-direction: column; align-items: center;
}
.v.v-resources .qr-card .qr-lbl {
  align-self: flex-start;
  background: var(--v-accent); color: var(--v-paper);
  padding: 6px 14px; font-family: "Special Elite", monospace;
  font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
  margin-bottom: 14px;
}
.v.v-resources .qr-card .qr {
  width: 360px; height: 360px;
  background: var(--v-paper); padding: 12px;
  border: 3px solid var(--v-ink);
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--v-accent) 30%, transparent);
}
.v.v-resources .qr-card .qr-sig {
  margin-top: auto;
  font-family: "Courier Prime", monospace; font-weight: 700;
  font-size: 22px; letter-spacing: 0.04em;
  color: var(--v-ink); text-align: center;
  border-top: 2px dashed color-mix(in srgb, var(--v-ink) 30%, transparent);
  padding-top: 12px; width: 100%;
}

/* ============================================================
   ARCHETYPE: TABLE  (.v.v-table)
   The 3-tier crawler table, etc. Tape-headed columns.
   ============================================================ */
.v.v-table .table {
  position: absolute; left: 100px; right: 100px; top: 480px; bottom: 80px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;
}
.v.v-table .col {
  background: var(--v-card); border: 4px solid var(--v-ink);
  padding: 22px 26px; display: flex; flex-direction: column;
}
.v.v-table .col:nth-child(1) { transform: rotate(-0.4deg); box-shadow: 12px 14px 0 color-mix(in srgb, var(--v-ink) 14%, transparent); }
.v.v-table .col:nth-child(2) { transform: rotate(0.4deg);  box-shadow: 12px 14px 0 color-mix(in srgb, var(--v-accent) 30%, transparent); }
.v.v-table .col:nth-child(3) { transform: rotate(-0.4deg); box-shadow: 12px 14px 0 color-mix(in srgb, #ffc34a 55%, transparent); }
.v.v-table .col .tier {
  align-self: flex-start; background: var(--v-ink); color: var(--v-paper);
  padding: 6px 14px; font-family: "Special Elite", monospace;
  font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
  margin-bottom: 14px;
}
.v.v-table .col:nth-child(2) .tier { background: var(--v-accent); }
.v.v-table .col:nth-child(3) .tier { background: #ffc34a; color: var(--v-ink); }
.v.v-table .col h3 {
  font-family: "Anton", sans-serif; font-weight: 400; font-size: 64px;
  line-height: 0.95; letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--v-ink); margin-bottom: 16px;
}
.v.v-table .col .examples {
  font-family: "Courier Prime", monospace; font-weight: 700;
  font-size: 22px; line-height: 1.45; color: var(--v-ink);
  border-top: 2px dashed color-mix(in srgb, var(--v-ink) 30%, transparent); padding-top: 14px;
  margin-bottom: 16px;
}
.v.v-table .col .stance {
  margin-top: auto;
  background: var(--v-ink); color: var(--v-paper);
  padding: 12px 16px; font-family: "Special Elite", monospace;
  font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase;
  text-align: center; line-height: 1.3;
}
.v.v-table .col:nth-child(2) .stance { background: var(--v-accent); }
.v.v-table .col:nth-child(3) .stance { background: #ffc34a; color: var(--v-ink); }

/* ============================================================
   PER-SLIDE VARIANTS
   Apply .vary-a/b/c/d to content slides, .vary-1/2/3 to section
   dividers, .vary-q-a/b/c to quote slides. Small variations in
   rotation + font-size so adjacent slides don't look mechanical.
   ============================================================ */

/* Headlines */
.v.vary-a .h-wrap   { transform: rotate(-1.0deg); }
.v.vary-a .h-wrap   .ransom { font-size: 116px; }
.v.vary-a .h-wrap-2 { transform: rotate(0.8deg); }
.v.vary-a .h-wrap-2 .ransom { font-size: 108px; }

.v.vary-b .h-wrap   { transform: rotate(-0.3deg); }
.v.vary-b .h-wrap   .ransom { font-size: 104px; }
.v.vary-b .h-wrap-2 { transform: rotate(1.6deg); }
.v.vary-b .h-wrap-2 .ransom { font-size: 120px; }

.v.vary-c .h-wrap   { transform: rotate(-1.5deg); }
.v.vary-c .h-wrap   .ransom { font-size: 108px; }
.v.vary-c .h-wrap-2 { transform: rotate(0.4deg); }
.v.vary-c .h-wrap-2 .ransom { font-size: 116px; }

.v.vary-d .h-wrap   { transform: rotate(0.4deg); }
.v.vary-d .h-wrap   .ransom { font-size: 120px; }
.v.vary-d .h-wrap-2 { transform: rotate(-1.0deg); }
.v.vary-d .h-wrap-2 .ransom { font-size: 100px; }

/* List items */
.v.vary-a .item:nth-child(2n)   { transform: rotate(0.6deg); }
.v.vary-a .item:nth-child(2n+1) { transform: rotate(-0.4deg); }
.v.vary-b .item:nth-child(2n)   { transform: rotate(-0.3deg); }
.v.vary-b .item:nth-child(2n+1) { transform: rotate(0.7deg); }
.v.vary-c .item:nth-child(2n)   { transform: rotate(0.5deg); }
.v.vary-c .item:nth-child(2n+1) { transform: rotate(-0.7deg); }
.v.vary-d .item:nth-child(2n)   { transform: rotate(-0.6deg); }
.v.vary-d .item:nth-child(2n+1) { transform: rotate(0.3deg); }

/* Stat slide containers */
.v.vary-a .num-card { transform: rotate(-1.7deg); }
.v.vary-a .annot    { transform: rotate(1.2deg); }
.v.vary-b .num-card { transform: rotate(-0.8deg); }
.v.vary-b .annot    { transform: rotate(1.8deg); }
.v.vary-c .num-card { transform: rotate(-2.0deg); }
.v.vary-c .annot    { transform: rotate(0.6deg); }
.v.vary-d .num-card { transform: rotate(-1.0deg); }
.v.vary-d .annot    { transform: rotate(1.5deg); }

/* Code memo */
.v.vary-a .memo { transform: rotate(-0.6deg); }
.v.vary-b .memo { transform: rotate(0.4deg); }
.v.vary-c .memo { transform: rotate(-0.2deg); }
.v.vary-d .memo { transform: rotate(0.8deg); }

/* Compare panels */
.v.vary-a .panel.before { transform: rotate(-1.0deg); }
.v.vary-a .panel.after  { transform: rotate(0.6deg); }
.v.vary-b .panel.before { transform: rotate(-0.5deg); }
.v.vary-b .panel.after  { transform: rotate(1.0deg); }
.v.vary-c .panel.before { transform: rotate(-1.4deg); }
.v.vary-c .panel.after  { transform: rotate(0.3deg); }
.v.vary-d .panel.before { transform: rotate(-0.3deg); }
.v.vary-d .panel.after  { transform: rotate(0.9deg); }

/* Graph canvas */
.v.vary-a .canvas { transform: rotate(-0.6deg); }
.v.vary-b .canvas { transform: rotate(0.3deg); }
.v.vary-c .canvas { transform: rotate(-0.2deg); }
.v.vary-d .canvas { transform: rotate(0.7deg); }

/* Table columns */
.v.vary-a .col:nth-child(1) { transform: rotate(-0.7deg); }
.v.vary-a .col:nth-child(2) { transform: rotate(0.5deg); }
.v.vary-a .col:nth-child(3) { transform: rotate(-0.4deg); }
.v.vary-b .col:nth-child(1) { transform: rotate(-0.3deg); }
.v.vary-b .col:nth-child(2) { transform: rotate(0.8deg); }
.v.vary-b .col:nth-child(3) { transform: rotate(-0.5deg); }
.v.vary-c .col:nth-child(1) { transform: rotate(-0.6deg); }
.v.vary-c .col:nth-child(2) { transform: rotate(0.4deg); }
.v.vary-c .col:nth-child(3) { transform: rotate(-0.7deg); }
.v.vary-d .col:nth-child(1) { transform: rotate(-0.4deg); }
.v.vary-d .col:nth-child(2) { transform: rotate(0.6deg); }
.v.vary-d .col:nth-child(3) { transform: rotate(-0.5deg); }

/* Resources qa-invite + qr-card */
.v.vary-a .qa-invite { transform: rotate(-0.6deg); }
.v.vary-a .qr-card   { transform: rotate(1.0deg); }
.v.vary-b .qa-invite { transform: rotate(-0.3deg); }
.v.vary-b .qr-card   { transform: rotate(1.4deg); }
.v.vary-c .qa-invite { transform: rotate(-0.5deg); }
.v.vary-c .qr-card   { transform: rotate(0.8deg); }
.v.vary-d .qa-invite { transform: rotate(-0.2deg); }
.v.vary-d .qr-card   { transform: rotate(1.2deg); }

/* ============================================================
   SLIDE 25 (CHECKLIST CTA) — v-resources + vary-b overrides
   Inverts the thank-you slide: QR card moves LEFT and becomes
   the dark hero with a horizontal QR/URL pairing; value-prop
   moves RIGHT and becomes a narrow cream "receipt" card.
   ============================================================ */
.v.v-resources.vary-b .qr-card {
  left: 100px; right: auto; top: 480px; bottom: 80px; width: 780px;
  background: var(--v-ink); border-color: var(--v-ink);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "label label"
    "qr    sig";
  gap: 18px 32px;
  align-items: center;
  box-shadow: 14px 16px 0 color-mix(in srgb, var(--v-accent) 30%, transparent);
}
.v.v-resources.vary-b .qr-card .qr-lbl {
  grid-area: label;
  background: #ffc34a; color: var(--v-ink);
}
.v.v-resources.vary-b .qr-card .qr {
  grid-area: qr;
  width: 360px; height: 360px;
  background: var(--v-paper); padding: 12px;
  border: 3px solid var(--v-paper);
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--v-accent) 30%, transparent);
}
.v.v-resources.vary-b .qr-card .qr-sig {
  grid-area: sig; margin-top: 0; padding-top: 0;
  border-top: none; text-align: left;
  color: var(--v-paper);
  font-family: "Special Elite", monospace;
  font-size: 28px; line-height: 1.5;
}

.v.v-resources.vary-b .qa-invite {
  left: auto; right: 100px; top: 480px; bottom: 80px; width: 540px;
  background: var(--v-card); color: var(--v-ink);
  border: 5px solid var(--v-ink);
  box-shadow: 14px 16px 0 color-mix(in srgb, var(--v-ink) 18%, transparent);
}
.v.v-resources.vary-b .qa-invite .lbl {
  background: var(--v-accent); color: var(--v-paper);
}
.v.v-resources.vary-b .qa-invite .body {
  color: var(--v-ink); font-size: 28px;
}
.v.v-resources.vary-b .qa-invite .body em {
  color: var(--v-accent);
}
.v.v-resources.vary-b .qa-invite .sig {
  color: var(--v-accent);
}

/* Section dividers */
.v.v-section.vary-1 .actno-wrap        { transform: rotate(-1.4deg); }
.v.v-section.vary-1 .actno-wrap .ransom { font-size: 280px; }
.v.v-section.vary-1 .title-wrap        { transform: rotate(1.0deg); }
.v.v-section.vary-1 .title-wrap .ransom { font-size: 200px; }

.v.v-section.vary-2 .actno-wrap        { transform: rotate(-0.4deg); }
.v.v-section.vary-2 .actno-wrap .ransom { font-size: 256px; }
.v.v-section.vary-2 .title-wrap        { transform: rotate(1.8deg); }
.v.v-section.vary-2 .title-wrap .ransom { font-size: 220px; }

.v.v-section.vary-3 .actno-wrap        { transform: rotate(-2.0deg); }
.v.v-section.vary-3 .actno-wrap .ransom { font-size: 240px; }
.v.v-section.vary-3 .title-wrap        { transform: rotate(0.6deg); }
.v.v-section.vary-3 .title-wrap .ransom { font-size: 220px; }

/* ============================================================
   COLLAGE LAYER — drop these anywhere on a slide for variety
   ============================================================ */

/* Bare photo: rectangle with grungy edge, can be placed and rotated. */
.v .photo {
  position: absolute; z-index: 5; pointer-events: none;
  background-color: #1a120c; background-size: cover; background-position: center;
  box-shadow: 0 14px 26px #00000044, 0 2px 0 #00000022 inset;
  filter: contrast(1.05) brightness(0.96);
}
.v .photo::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, #00000010 0 2px, transparent 2px 4px);
  mix-blend-mode: multiply;
}

/* Bare-photo polaroid (no caption) — quick attach for collage feel */
.v .snap {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--v-card); padding: 14px 14px 36px;
  box-shadow: 0 18px 28px #00000040, 0 2px 0 #00000022 inset;
}
.v .snap .img {
  background-color: #1a120c; background-size: cover; background-position: center;
  filter: contrast(1.05) brightness(0.95);
}
.v .snap .cap {
  position: absolute; left: 0; right: 0; bottom: 8px;
  font-family: "Special Elite", monospace; font-size: 18px;
  color: var(--v-ink); text-align: center; opacity: 0.8;
}

/* Newspaper / torn-paper snippet */
.v .snippet {
  position: absolute; z-index: 5; pointer-events: none;
  background: #f1ead8;
  padding: 18px 22px;
  color: #14110e;
  font-family: "Special Elite", monospace;
  font-size: 22px; line-height: 1.3;
  box-shadow: 0 10px 22px #00000033;
  /* deckle/torn edges */
  clip-path: polygon(
    2% 4%, 8% 0%, 18% 5%, 28% 1%, 40% 4%, 52% 0%, 64% 3%,
    78% 0%, 90% 4%, 100% 2%,
    98% 14%, 100% 28%, 97% 42%, 100% 58%, 98% 72%, 100% 86%, 98% 96%,
    88% 100%, 76% 96%, 62% 100%, 48% 97%, 34% 100%, 20% 96%, 8% 100%, 0% 96%,
    2% 84%, 0% 70%, 3% 56%, 0% 42%, 2% 28%, 0% 14%
  );
}
.v .snippet h4 {
  font-family: "Anton", sans-serif; font-weight: 400;
  font-size: 38px; line-height: 0.95; letter-spacing: 0.01em;
  text-transform: uppercase; margin-bottom: 8px; color: #14110e;
}
.v .snippet h4.red { color: var(--v-accent); }
.v .snippet .byline {
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  border-top: 1px solid #00000055; border-bottom: 1px solid #00000055;
  padding: 2px 0; margin-bottom: 8px; color: #00000099;
}

/* Sticky note */
.v .sticky {
  position: absolute; z-index: 6; pointer-events: none;
  width: 220px; height: 220px;
  background: #ffe65c;
  background-image:
    linear-gradient(135deg, #00000018 0%, transparent 22%),
    linear-gradient(180deg, #ffe65c 0%, #f7d83e 100%);
  padding: 28px 22px;
  font-family: "Special Elite", monospace; font-size: 24px;
  line-height: 1.25; color: #14110e;
  box-shadow: 0 14px 24px #00000044, 0 2px 0 #00000022 inset;
}
.v .sticky.pink { background: #ff7fa3; background-image: linear-gradient(180deg,#ff8fb0,#f06286); }
.v .sticky.blue { background: #9cc9ff; background-image: linear-gradient(180deg,#a8d2ff,#7eb3ee); }
.v .sticky b { display: block; font-weight: 400; }
.v .sticky em { font-style: normal; text-decoration: underline; text-decoration-style: wavy; text-decoration-color: var(--v-accent); }
.v .sticky::after {
  content: ""; position: absolute; right: 0; bottom: 0;
  width: 40px; height: 40px;
  background: linear-gradient(135deg, transparent 50%, #00000022 50%);
}

/* Duct tape — wider, more textured variant */
.v .duct {
  position: absolute; z-index: 7; pointer-events: none;
  width: 220px; height: 56px;
  background:
    repeating-linear-gradient(90deg, #00000018 0 6px, transparent 6px 14px),
    repeating-linear-gradient(0deg, #00000010 0 3px, transparent 3px 8px),
    linear-gradient(180deg, #5a5953 0%, #4a4944 50%, #5a5953 100%);
  box-shadow: 0 8px 14px #00000044;
  /* torn ends */
  clip-path: polygon(2% 10%, 6% 0%, 14% 14%, 22% 4%, 30% 12%, 100% 8%,
                     98% 90%, 92% 100%, 84% 88%, 76% 96%, 68% 88%, 0% 92%);
}
.v .duct.cream {
  background:
    repeating-linear-gradient(90deg, #00000010 0 6px, transparent 6px 14px),
    linear-gradient(180deg, #ddc89a, #c9b482 50%, #ddc89a);
}
.v .duct.red {
  background:
    repeating-linear-gradient(90deg, #00000022 0 6px, transparent 6px 14px),
    linear-gradient(180deg, #d83a3a, #b81d1d 50%, #d83a3a);
}

/* Index card */
.v .card-3x5 {
  position: absolute; z-index: 5; pointer-events: none;
  width: 320px; padding: 18px 22px;
  background:
    repeating-linear-gradient(180deg, transparent 0 28px, #2b4f8e22 28px 30px),
    #fbf6e8;
  border: 1px solid #00000022;
  box-shadow: 0 10px 18px #00000033;
  font-family: "Special Elite", monospace;
  font-size: 22px; line-height: 28px;
  color: #14110e;
}
.v .card-3x5::before {
  content: ""; position: absolute; left: 38px; top: 0; bottom: 0;
  width: 1px; background: #c9282288;
}

/* Handwritten scrawl arrow */
.v .scrawl {
  position: absolute; z-index: 8; pointer-events: none;
  font-family: "Special Elite", monospace;
  color: var(--v-accent); font-size: 28px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  text-shadow: 1px 1px 0 #00000022;
}
.v .scrawl svg { display: block; }

/* Quote slides */
.v.vary-q-a .qmark { font-size: 360px; transform: rotate(-2deg); }
.v.vary-q-a .body .punch { font-size: 92px; }

.v.vary-q-b .qmark { font-size: 380px; transform: rotate(2deg); }
.v.vary-q-b .body .punch { font-size: 84px; }

.v.vary-q-c .qmark { font-size: 340px; transform: rotate(-1deg); }
.v.vary-q-c .body .punch { font-size: 96px; }