/* ═══════════════════════════════════════════════════════════════════
   DECK CSS — Non-Obvious Ways to Use Claude Code
   System: Ledger Broadsheet + Poster (D2)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bone:     #EFEAE0;
  --bone-2:   #E5DFD2;
  --paper:    #F7F3EA;
  --ink:      #1C1B18;
  --ink-2:    #3A3732;
  --stone:    #A8A297;
  --stone-2:  #8A857A;
  --night:    #15161A;
  --blue:     #5A7DFF;
  --blue-ink: #2E49C4;
  --green:    oklch(0.70 0.16 150);
  --red:      oklch(0.58 0.20 25);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

html, body { margin: 0; padding: 0; background: #000; }

/* Every slide is a full 1920x1080 canvas. */
.slide {
  position: absolute; inset: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--mono);
  box-sizing: border-box;
  overflow: hidden;
}
.slide.poster { background: var(--ink); color: var(--bone); }

/* ───── Header / footer strips ───── */
.strip, .foot {
  position: absolute;
  left: 100px; right: 100px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 24px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--stone-2);
}
.strip { top: 50px; padding-bottom: 22px; border-bottom: 1px solid var(--stone); }
.foot  { bottom: 50px; padding-top: 22px; border-top: 1px solid var(--stone); }
.slide.poster .strip, .slide.poster .foot {
  color: rgba(239,234,224,0.55);
  border-color: rgba(239,234,224,0.22);
}
.strip .lhs, .foot .lhs { display: flex; gap: 30px; align-items: center; }
.strip .idx { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.slide.poster .strip .idx { color: var(--bone); }
.strip .rhs, .foot .rhs { font-variant-numeric: tabular-nums; }

/* ───── Body safe area ───── */
.body {
  position: absolute;
  top: 160px; bottom: 120px; left: 100px; right: 100px;
  display: flex; flex-direction: column;
}

/* ───── Kicker ───── */
.kicker {
  font-size: 24px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blue-ink);
  margin-bottom: 28px;
}
.slide.poster .kicker { color: var(--blue); }

/* ───── Titles ───── */
h1.action {
  font-size: 72px; font-weight: 700; font-style: italic;
  line-height: 1.02; letter-spacing: -0.025em;
  margin: 0 0 36px;
  max-width: 38ch;
  text-wrap: balance;
}
h1.action em { font-style: normal; color: var(--blue-ink); }
.slide.poster h1.action em { color: var(--blue); }
h1.action.sm { font-size: 60px; max-width: 44ch; }
h1.action.lg { font-size: 84px; max-width: 32ch; }
h1.action.xl { font-size: 108px; max-width: 24ch; }

h1.topic {
  font-size: 80px; font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.015em;
  line-height: 1; margin: 0 0 48px;
}

/* ───── Lede / body text ───── */
p.lede {
  font-size: 32px; line-height: 1.45;
  color: var(--ink-2); margin: 0;
  max-width: 40ch;
}
.slide.poster p.lede { color: rgba(239,234,224,0.82); }

.aside {
  position: absolute;
  bottom: 130px; left: 100px; right: 100px;
  padding-top: 20px;
  border-top: 1px dashed var(--stone);
  font-style: italic; font-size: 24px; line-height: 1.5;
  color: var(--stone-2);
  max-width: 100ch;
}
.slide.poster .aside { color: rgba(239,234,224,0.55); border-color: rgba(239,234,224,0.22); }

/* ───── Ledger table ───── */
.ledger { width: 100%; border-collapse: collapse; font-size: 28px; }
.ledger th, .ledger td {
  text-align: left; padding: 12px 18px;
  border-bottom: 1px solid var(--stone);
  vertical-align: baseline;
}
.ledger thead th {
  font-size: 18px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--stone-2);
  font-weight: 500;
  border-bottom: 2px solid var(--ink);
  padding: 0 18px 14px;
}
.slide.poster .ledger th, .slide.poster .ledger td { border-color: rgba(239,234,224,0.22); color: var(--bone); }
.slide.poster .ledger thead th { border-bottom-color: var(--bone); color: rgba(239,234,224,0.55); }
.ledger .rev { font-variant-numeric: tabular-nums; font-weight: 700; }
.ledger tr.loop td {
  background: var(--blue-wash);
  border-bottom: 2px solid var(--blue-ink);
  border-top: 2px solid var(--blue-ink);
}
.ledger tr.flag td {
  background: var(--blue);
  color: var(--bone);
  border-color: var(--blue-ink);
}
.ledger tr.flag td b { color: var(--bone); }
.ledger .sub { color: var(--stone-2); font-size: 24px; display: block; margin-top: 4px; font-weight: 400; }
.ledger tr.flag .sub { color: rgba(239,234,224,0.8); }
.ledger code {
  font-family: var(--mono); background: var(--bone-2);
  padding: 2px 8px; border-radius: 2px;
  font-size: 0.92em;
}
.ledger tr.flag code { background: rgba(239,234,224,0.18); color: var(--bone); }

.big-ledger th, .big-ledger td { padding: 22px 22px; }
.big-ledger thead th { font-size: 22px; }

/* ───── Hero number (poster) ───── */
.hero-num {
  font-size: 320px; font-weight: 800;
  letter-spacing: -0.06em; line-height: 0.82;
  font-variant-numeric: tabular-nums;
}
.hero-num .b { color: var(--blue); }
.hero-num .unit { font-size: 160px; vertical-align: 0.15em; }

/* ───── Enumerated list (numbered rows) ───── */
.enum { list-style: none; padding: 0; margin: 0; font-size: 28px; }
.enum > li {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 32px;
  padding: 12px 0;
  border-top: 1px solid var(--stone);
}
.enum > li:last-child { border-bottom: 1px solid var(--stone); }
.slide.poster .enum > li { border-color: rgba(239,234,224,0.22); }
.enum .n {
  font-size: 26px; font-weight: 700;
  color: var(--blue-ink);
  font-variant-numeric: tabular-nums;
}
.slide.poster .enum .n { color: var(--blue); }
.enum .h { font-weight: 700; letter-spacing: -0.005em; line-height: 1.2; }
.enum .d { color: var(--ink-2); font-size: 22px; line-height: 1.4; margin-top: 4px; }
.slide.poster .enum .d { color: rgba(239,234,224,0.68); }
.enum .d em { font-style: italic; color: var(--ink); }
.slide.poster .enum .d em { color: var(--bone); }

.big-enum .h { font-size: 34px; }
.big-enum .d { font-size: 26px; line-height: 1.45; margin-top: 8px; }
.big-enum .n { font-size: 34px; }
.big-enum > li { padding: 22px 0; grid-template-columns: 88px 1fr; }

/* ───── Caret ───── */
.caret::after {
  content: ""; display: inline-block;
  width: 0.55em; height: 1em;
  background: currentColor;
  margin-left: 0.1em;
  vertical-align: -0.12em;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ───── Chips ───── */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 500;
  padding: 6px 12px; border: 1px solid currentColor;
}
.chip.blue { color: var(--blue-ink); }
.slide.poster .chip.blue { color: var(--blue); }

/* ───── In/Out diff ───── */
.inout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; font-size: 36px; line-height: 1.35;
}
.inout .col h3 {
  font-size: 22px; letter-spacing: 0.16em;
  text-transform: uppercase; margin: 0 0 20px;
  padding-bottom: 14px; border-bottom: 2px solid currentColor;
}
.inout .col.out h3 { color: var(--red); }
.inout .col.in h3 { color: var(--green); }
.inout ul { list-style: none; padding: 0; margin: 0; }
.inout li { padding: 14px 0; display: flex; gap: 18px; color: var(--ink); }
.slide.poster .inout li { color: var(--bone); }
.inout .col.out li::before { content: "−"; color: var(--red); width: 26px; flex: 0 0 26px; }
.inout .col.in li::before { content: "+"; color: var(--green); width: 26px; flex: 0 0 26px; }

/* ───── Terminal block ───── */
.terminal {
  background: var(--night); color: var(--bone);
  padding: 32px 40px; font-size: 24px; line-height: 1.6;
  border: 1px solid var(--ink);
}
.terminal .prompt { color: var(--blue); }
.terminal .comment { color: var(--stone-2); }
.terminal .ok { color: oklch(0.72 0.16 150); }

/* ───── Utility ───── */
.mono-cap {
  font-family: var(--mono);
  font-size: 24px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--stone-2); font-weight: 500;
}
.mono-cap.sm { font-size: 20px; letter-spacing: 0.16em; }
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.spread { display: flex; justify-content: space-between; align-items: baseline; }

/* For pillar slide (#5) — 4 columns */
.pillars {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
  font-size: 24px; line-height: 1.4; margin-top: 10px;
}
.pillar { border-top: 2px solid var(--ink); padding-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.pillar .pname { font-size: 32px; font-weight: 800; letter-spacing: -0.01em; line-height: 1; }
.pillar .pdate { font-size: 24px; color: var(--stone-2); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }
.pillar .pdesc { color: var(--ink-2); font-size: 24px; line-height: 1.45; }
.pillar.feat { border-top-color: var(--blue-ink); }
.pillar.feat .pname { color: var(--blue-ink); }

/* For checklist slide (#17) */
.checklist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 10px; }
.checklist h3 {
  font-size: 20px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue-ink); margin: 0 0 18px;
  padding-bottom: 12px; border-bottom: 2px solid var(--ink);
}
.checklist ul { list-style: none; padding: 0; margin: 0; font-size: 26px; line-height: 1.35; }
.checklist li { padding: 14px 0; border-top: 1px solid var(--stone); display: flex; gap: 16px; }
.checklist li::before {
  content: ""; width: 22px; height: 22px; flex: 0 0 22px;
  border: 2px solid var(--ink); margin-top: 6px;
}

/* For stack slides (#6, #7) — mini-sections */
.stack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 8px; }
.stack-item { border-top: 2px solid var(--ink); padding-top: 16px; }
.stack-item .slbl { font-size: 24px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone-2); font-weight: 500; margin-bottom: 10px; }
.stack-item .stit { font-size: 34px; font-weight: 800; letter-spacing: -0.01em; line-height: 1; margin-bottom: 14px; }
.stack-item .sbod { font-size: 24px; line-height: 1.5; color: var(--ink-2); }
.stack-item.feat { border-top-color: var(--blue-ink); }
.stack-item.feat .stit { color: var(--blue-ink); }

.big-stack .stack-item { padding-top: 24px; }
.big-stack .slbl { font-size: 28px; margin-bottom: 14px; }
.big-stack .stit { font-size: 52px; margin-bottom: 22px; }
.big-stack .sbod { font-size: 30px; line-height: 1.45; }

/* Footnote citation */
.cite { font-size: 24px; color: var(--stone-2); font-style: italic; margin-top: 20px; line-height: 1.5; }
.slide.poster .cite { color: rgba(239,234,224,0.5); }

/* Link style (mostly unused — deck is static) */
a { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--blue-ink); }

/* A muted inline token */
.token { background: var(--bone-2); padding: 2px 10px; border-radius: 2px; font-family: var(--mono); font-weight: 500; }
.slide.poster .token { background: rgba(239,234,224,0.15); }