/* ===================================================================
   "What came next" — Bhutan → Simocracy slide deck
   Visual language: cream paper, black serif headlines, pixel-art tiles
   =================================================================== */

:root {
  --paper: #efe7d6;          /* cream background from reference slides */
  --paper-soft: #f6efdf;
  --ink: #161412;
  --ink-soft: #2a2722;
  --muted: #5b554c;
  --rule: #c9bfa8;
  --accent: #c4451a;         /* Bhutanese red / gho */
  --accent-2: #2e7d32;       /* GainForest green */
  --hilite: #ffd76b;
  --shadow: 0 18px 60px -20px rgba(40, 30, 10, .25);

  --serif: "EB Garamond", "Iowan Old Style", "Palatino", Georgia, serif;
  --sans: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "VT323", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  height: 100%;
  overflow: hidden;
}

/* Each slide is a 16:9 stage that scales to fit the window */
#deck {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  align-items: center;
  justify-items: stretch;
  padding: 6vh 7vw;
  background: var(--paper);
  opacity: 0;
  transform: translateX(40px) scale(.995);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.slide.active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  z-index: 2;
}

/* Cream paper texture — keep a faint warmth at the bottom, no top glare */
.slide::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 115%, rgba(120, 90, 40, .06), transparent 65%);
  pointer-events: none;
}

/* ---- typography ---- */
h1, h2, h3 { font-family: var(--serif); font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -.005em; }
h1 { font-size: clamp(2.4rem, 4.2vw, 4.4rem); line-height: 1.06; }
h1.huge { font-size: clamp(3.6rem, 7.5vw, 7.5rem); line-height: 1; letter-spacing: -.01em; }
h2 { font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1.08; }
h3 { font-size: clamp(1.1rem, 1.5vw, 1.6rem); }

p { font-size: clamp(1.05rem, 1.4vw, 1.5rem); line-height: 1.45; color: var(--ink-soft); margin: .6em 0; }
p.lead { font-size: clamp(1.2rem, 1.8vw, 1.9rem); }
p.lead.big { font-size: clamp(1.5rem, 2.4vw, 2.4rem); }
p.quiet { color: var(--muted); font-style: italic; }
p.footnote { font-size: clamp(.95rem, 1.1vw, 1.15rem); color: var(--muted); font-style: italic; text-align: center; margin-top: 2vh; }
p.byline { color: var(--muted); font-style: italic; margin-top: 2vh; }

em { font-style: italic; }
strong { font-weight: 700; }

.kicker {
  font-family: var(--sans);
  font-size: clamp(.7rem, .9vw, 1rem);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--muted);
  margin-bottom: 2vh;
}
.brandline { /* same role as kicker but on the title */
  font-family: var(--sans);
  font-size: clamp(.75rem, .95vw, 1.05rem);
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--muted);
  margin-bottom: 3vh;
}

/* ---- two-column layout primitive ---- */
.slide.two-col,
.slide.title,
.slide.impact,
.slide.problem,
.slide.simocracy-intro,
.slide.sprocess,
.slide.values,
.slide.future,
.slide.thanks {
  grid-template-columns: 1.05fr 1fr;
  gap: 4vw;
}
.slide .left { align-self: center; }
.slide .right { align-self: center; display: flex; justify-content: center; align-items: center; }

/* ---- pixel-art tile (square w/ rounded corners + dark border) ---- */
.tile {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  aspect-ratio: 1 / 1;
  border-radius: 28px;
  box-shadow: var(--shadow);
  image-rendering: -webkit-optimize-contrast;
  background: #d9d2c0;
  object-fit: cover;
}
.tile.shadow { aspect-ratio: 16 / 9; }

/* a screenshot/scan of an existing slide, framed like a polaroid */
.polaroid {
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  background: #fff;
  padding: 14px 14px 26px;
  border-radius: 6px;
  box-shadow:
    0 22px 50px -22px rgba(40,30,10,.35),
    0 4px 14px -6px rgba(40,30,10,.18);
  transform: rotate(-1.2deg);
  transition: transform .35s ease;
}
.polaroid:hover { transform: rotate(0) scale(1.01); }

/* ---- title slide ---- */
.slide.title h1 { margin-top: 0; }
.slide.title .byline { margin-top: 4vh; }

/* follow-along strip across the top of the title slide */
.slide.title { position: relative; }
.follow-strip {
  position: absolute;
  top: 3vh;
  left: 5vw;
  right: 5vw;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5em 1.2em;
  padding: .9vh 1.4vw;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: clamp(.78rem, .95vw, 1rem);
  box-shadow: 0 6px 18px -10px rgba(40, 30, 10, .35);
}
.follow-label {
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  font-size: .8em;
}
.follow-url {
  font-family: var(--mono);
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -.01em;
}
.follow-url:hover { text-decoration: underline; }
.follow-sep { color: var(--muted); opacity: .6; }
.g-logo {
  position: absolute;
  left: 2.2vw;
  bottom: 2.2vh;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--accent-2);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 22px;
  display: grid; place-items: center;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.3);
}

/* ---- system slide (three column screenshots, like the original) ---- */
.slide.system { grid-template-columns: 1fr; align-content: start; padding-top: 6vh; }
.slide.system h2 { margin-bottom: 4vh; text-align: left; }
.three-up {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5vw;
  align-items: stretch;
}
.three-up figure {
  margin: 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 1.2vh;
  justify-items: start;
  padding: 2.2vh 1.6vw;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(0, 0, 0, .05);
  border-radius: 14px;
  box-shadow: 0 8px 24px -16px rgba(40, 30, 10, .25);
  min-height: 56vh;
}
.three-up .num {
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
}
.three-up .cap { font-family: var(--serif); font-size: 1.15rem; line-height: 1.25; }
.three-up .cap span { color: var(--muted); font-style: italic; }
.three-up .screenshot { align-self: center; width: 100%; }
.three-up .url { color: var(--muted); font-family: var(--mono); font-size: 1.05rem; margin-top: 0; }

/* fake screenshot frames */
.screenshot {
  width: 100%;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 12px;
  color: #222;
  min-height: 22vh;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phone-frame {
  background: linear-gradient(180deg, #2a2a3a 0%, #1a1a26 100%);
  color: #d0d6ee;
  border-radius: 22px;
  padding: 18px 14px;
  max-width: 220px;
  margin: 0 auto;
  align-self: center;
}
.chat-bubble {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 11px;
  max-width: 92%;
  line-height: 1.3;
}
.chat-bubble.bot { background: #43476d; color: #f0f0f0; align-self: flex-start; }
.chat-bubble.user { background: #6b7bd9; color: #fff; align-self: flex-end; }
.chat-bubble.ok { background: #1d3a1d; color: #b6e6b6; align-self: flex-start; }

.dashboard-frame .topic { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed #e7e2d4; }
.dashboard-frame .topic:last-child { border-bottom: 0; }
.dashboard-frame .topic .dots {
  display: inline-block;
  width: 60%;
  height: 14px;
  background-size: 14px 14px;
  background-repeat: repeat-x;
  background-position: 0 50%;
}
.topic.green b { color: #1c6b2a; }
.topic.green .dots { background-image: radial-gradient(circle, #1c6b2a 4px, transparent 5px); }
.topic.pink b { color: #c24561; }
.topic.pink .dots { background-image: radial-gradient(circle, #c24561 4px, transparent 5px); }
.topic.lime b { color: #6f9a1d; }
.topic.lime .dots { background-image: radial-gradient(circle, #6f9a1d 4px, transparent 5px); }
.topic.purple b { color: #6a3aa6; }
.topic.purple .dots { background-image: radial-gradient(circle, #6a3aa6 4px, transparent 5px); }

.review-frame .rating { font-weight: 600; font-size: 12px; }
.review-frame .approved { color: #1c6b2a; }
.review-frame .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.review-frame .col { padding: 6px 8px; border-radius: 6px; font-size: 10px; display: flex; flex-direction: column; gap: 4px; }
.review-frame .col b { font-size: 10px; }
.review-frame .col span { display: block; height: 6px; border-radius: 3px; background: rgba(0,0,0,.08); }
.review-frame .strengths { background: #eaf6ec; }
.review-frame .strengths b { color: #1c6b2a; }
.review-frame .weaknesses { background: #fdecec; }
.review-frame .weaknesses b { color: #b53636; }
.review-frame .recos { background: #fff6e0; }
.review-frame .recos b { color: #a07000; }

/* ---- bullets, lists ---- */
.bullets {
  list-style: none;
  padding: 0;
  margin: 2vh 0;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.7vw, 1.7rem);
  line-height: 1.55;
}
.bullets li::before { content: "— "; color: var(--accent); margin-right: .25em; }
.dots-list {
  list-style: none;
  padding: 0;
  margin: 2vh 0;
  font-size: clamp(1.05rem, 1.4vw, 1.45rem);
}
.dots-list li { padding: .35em 0; border-bottom: 1px dashed var(--rule); }
.dots-list li:last-child { border-bottom: 0; }

/* ---- anatomy / cards ---- */
.slide.anatomy { grid-template-columns: 1fr; align-content: start; padding-top: 7vh; }
.slide.anatomy h2 { margin-bottom: 4vh; }
.slide.anatomy .three-up { grid-template-columns: repeat(3, 1fr); }
.card {
  background: #fff;
  border-radius: 20px;
  padding: 4vh 2.4vw;
  box-shadow: var(--shadow);
  margin: 0;
  display: grid;
  gap: 1vh;
  justify-items: start;
}
.card .big-icon {
  font-size: clamp(2.2rem, 3.6vw, 3.6rem);
  line-height: 1;
}
.sim-avatar {
  display: block;
  filter: drop-shadow(0 6px 10px rgba(40, 30, 10, .15));
  image-rendering: pixelated;
}
.card { justify-items: stretch; text-align: left; padding: 2.6vh 1.8vw; }
.card-head {
  display: flex;
  align-items: center;
  gap: 1vw;
  margin-bottom: .8vh;
}
.card-head h3 { margin: 0; font-size: clamp(1.2rem, 1.7vw, 1.7rem); }
.card .snippet {
  margin: 1vh 0 0;
  padding: 1.2vh 1vw;
  background: #fbf5e6;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-family: var(--mono);
  font-size: clamp(.72rem, .88vw, .92rem);
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  overflow: hidden;
  max-height: 26vh;
}
.card .snippet.style { font-family: var(--serif); font-style: italic; font-size: clamp(.85rem, 1.05vw, 1.1rem); white-space: pre-line; }
.avatar-strip {
  margin-top: 1vh;
  padding: 1.2vh 1vw;
  background: #fbf5e6;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: .6vw;
}
.avatar-strip canvas {
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 5px rgba(40, 30, 10, .12));
  animation: bob 3.4s ease-in-out infinite;
}
.avatar-strip canvas:nth-child(2) { animation-delay: .3s; }
.avatar-strip canvas:nth-child(3) { animation-delay: .6s; }
.avatar-strip canvas:nth-child(4) { animation-delay: .9s; }

.sim-band {
  display: flex;
  gap: clamp(.6rem, 1vw, 1.2rem);
  align-items: flex-end;
  margin-top: 3vh;
  opacity: .95;
}
.sim-band canvas {
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 6px rgba(40, 30, 10, .15));
  animation: bob 3.6s ease-in-out infinite;
}
.sim-band canvas:nth-child(2) { animation-delay: .4s; }
.sim-band canvas:nth-child(3) { animation-delay: .8s; }
.sim-band canvas:nth-child(4) { animation-delay: 1.2s; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.card h3 { font-size: clamp(1.3rem, 2vw, 2rem); }
.card p { font-size: clamp(.95rem, 1.2vw, 1.2rem); color: var(--ink-soft); }

/* ---- flow steps ---- */
.slide.flow { grid-template-columns: 1fr; align-content: start; padding-top: 8vh; }
.slide.flow h2 { margin-bottom: 5vh; }
.flow-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 2vw;
  align-items: stretch;
}
.flow-steps .step {
  background: #fff;
  border-radius: 18px;
  padding: 2.6vh 1.8vw 2.4vh;
  box-shadow: var(--shadow);
  display: grid;
  gap: .8vh;
  align-content: start;
  justify-items: start;
  position: relative;
}
.flow-steps .step-pet {
  justify-self: center;
  margin: .5vh 0 1vh;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 10px rgba(40, 30, 10, .15));
  animation: bob 3.6s ease-in-out infinite;
}
.flow-steps .step:nth-child(3) .step-pet { animation-delay: .35s; }
.flow-steps .step:nth-child(5) .step-pet { animation-delay: .7s; }
.flow-steps .step-tag {
  margin-top: auto;
  align-self: end;
  padding-top: 1vh;
  font-family: var(--mono);
  font-size: clamp(.7rem, .85vw, .9rem);
  color: var(--accent);
  letter-spacing: .02em;
}
.flow-steps .step-num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 2rem;
  color: var(--accent);
}
.flow-steps .step h3 { font-size: clamp(1.1rem, 1.6vw, 1.6rem); }
.flow-steps .arrow {
  align-self: center;
  font-size: 2.6rem;
  color: var(--accent);
  font-weight: 300;
}

/* ---- CROPS / values ---- */
.crops-title { font-family: var(--serif); font-style: italic; margin-top: 2vh; font-size: clamp(1.2rem, 1.8vw, 1.8rem); color: var(--ink); }
.crops-title .crops { color: var(--accent-2); font-style: normal; font-weight: 700; letter-spacing: .03em; }
.crops-list {
  list-style: none;
  padding: 0;
  margin: 2vh 0 0;
  font-size: clamp(1rem, 1.35vw, 1.4rem);
}
.crops-list li { padding: .35em 0; border-bottom: 1px dashed var(--rule); }
.crops-list li b { color: var(--accent-2); font-family: var(--serif); font-weight: 700; font-size: 1.15em; margin-right: .35em; }
.crops-list li:last-child { border-bottom: 0; }

.atproto-card {
  background: #fff;
  border-radius: 20px;
  padding: 4vh 2.4vw;
  box-shadow: var(--shadow);
  display: grid;
  gap: .6vh;
  align-content: center;
  font-family: var(--mono);
  width: 100%;
  max-width: 36vw;
}
.atproto-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.6rem);
  margin-bottom: 1vh;
  color: var(--ink);
}
.atproto-card code {
  display: block;
  font-family: var(--mono);
  font-size: clamp(1rem, 1.4vw, 1.4rem);
  background: var(--paper-soft);
  border-radius: 8px;
  padding: 6px 12px;
  color: var(--accent-2);
}
.atproto-foot {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(.9rem, 1.1vw, 1.1rem);
  color: var(--muted);
  margin-top: 1.4vh;
  line-height: 1.4;
}

/* ---- HUD ---- */
#hud {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2vw;
  pointer-events: none;
  z-index: 100;
}
#progress {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: rgba(0,0,0,.06);
}
#progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width .35s cubic-bezier(.2,.7,.2,1);
}
#counter, #hint {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
#hint { opacity: .55; }

/* ---- overview mode ---- */
#overview {
  position: fixed; inset: 0;
  background: rgba(239, 231, 214, .94);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2vw;
  padding: 4vh 3vw;
  z-index: 200;
  overflow: auto;
}
#overview.hidden { display: none; }
#overview .thumb {
  background: #fff;
  border-radius: 10px;
  aspect-ratio: 16/9;
  box-shadow: var(--shadow);
  padding: 1vw 1.1vw;
  font-family: var(--serif);
  display: flex;
  flex-direction: column;
  gap: .3vh;
  cursor: pointer;
  transition: transform .15s ease;
  overflow: hidden;
  font-size: .85rem;
  color: var(--ink);
}
#overview .thumb:hover { transform: translateY(-3px); }
#overview .thumb b { font-style: italic; font-weight: 600; }
#overview .thumb .num {
  font-family: var(--mono);
  font-size: 1.1rem;
  color: var(--accent);
  line-height: 1;
}
#overview .thumb-kicker {
  font-family: var(--sans);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: auto;
}
#overview .thumb-title {
  font-size: 1rem;
  line-height: 1.2;
  margin-top: .2vh;
}
#overview .thumb-title b {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- howto slides (create sim / connect pi) ---- */
.slide.howto { grid-template-columns: 1fr 1.05fr; gap: 3.5vw; }
.slide.howto .left { align-self: center; }
.slide.howto .right { display: flex; justify-content: center; align-items: center; }
.shot {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  border-radius: 14px;
  box-shadow: var(--shadow);
  background: #fff;
  object-fit: contain;
  border: 1px solid rgba(0,0,0,.05);
}
.shot.small { max-height: 28vh; border-radius: 10px; }

.steps-mini {
  list-style: none;
  padding: 0;
  margin: 2vh 0;
  counter-reset: step;
  font-size: clamp(1rem, 1.25vw, 1.3rem);
}
.steps-mini li {
  counter-increment: step;
  padding: .5em 0 .5em 2.4em;
  position: relative;
  border-bottom: 1px dashed var(--rule);
  line-height: 1.4;
}
.steps-mini li:last-child { border-bottom: 0; }
.steps-mini li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: .55em;
  width: 1.7em;
  height: 1.7em;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .8em;
}

.terminal-steps {
  list-style: none;
  padding: 0;
  margin: 2vh 0;
  display: grid;
  gap: .9vh;
  font-family: var(--mono);
  font-size: clamp(.95rem, 1.2vw, 1.3rem);
}
.terminal-steps li {
  display: grid;
  grid-template-columns: 1.8em 1fr;
  align-items: center;
  gap: .6em;
}
.terminal-steps .sn {
  width: 1.6em; height: 1.6em;
  background: var(--ink);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--sans);
  font-size: .75em;
  font-weight: 600;
}
.terminal-steps code {
  display: inline-block;
  background: #1a1816;
  color: #f5e9c8;
  padding: .35em .65em;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 1em;
}
.terminal-steps code::before { content: "$ "; color: #c4451a; }
.hint-inline { font-family: var(--serif); font-style: italic; font-size: .85em; color: var(--muted); margin-left: .5em; }
.mono-accent { font-family: var(--mono); color: var(--accent); font-style: normal; }

/* ---- hypercerts slide ---- */
.slide.hypercerts { grid-template-columns: 1fr 1fr; gap: 3vw; }
.slide.hypercerts .left { align-self: center; }
.slide.hypercerts .right {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hypercert-card {
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 40vw;
  box-shadow: 0 22px 50px -22px rgba(40, 30, 10, .4),
              0 4px 14px -6px rgba(40, 30, 10, .18);
  overflow: hidden;
  font-family: var(--serif);
  position: relative;
}
.hypercert-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg,
      transparent 0 18px,
      rgba(196, 69, 26, .025) 18px 19px);
  pointer-events: none;
}
.hc-banner {
  background: var(--ink);
  color: #f5e9c8;
  padding: 1.2vh 1.6vw;
  font-family: var(--sans);
  font-size: clamp(.7rem, .9vw, .95rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 3px double var(--accent);
}
.hc-body {
  padding: 3vh 2vw 2.4vh;
  display: grid;
  gap: 1.4vh;
  position: relative;
  z-index: 1;
}
.hc-title {
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.3rem, 1.9vw, 2rem);
  line-height: 1.1;
  color: var(--ink);
}
.hc-short {
  font-size: clamp(.9rem, 1.1vw, 1.1rem);
  color: var(--ink-soft);
  line-height: 1.45;
}
.hc-fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .7vh 1.4vw;
  margin: .8vh 0 0;
  font-size: clamp(.85rem, 1vw, 1rem);
}
.hc-fields dt {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8em;
  color: var(--muted);
  align-self: center;
}
.hc-fields dd { margin: 0; color: var(--ink); align-self: center; }
.hc-sim {
  font-family: var(--mono);
  font-size: .8em;
  color: var(--accent);
  margin-left: .25em;
}
.hc-open {
  display: inline-block;
  padding: .15em .7em;
  background: rgba(46, 125, 50, .12);
  color: #2e7d32;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .85em;
  font-weight: 600;
}
.hc-uri {
  margin-top: 1vh;
  padding-top: 1.2vh;
  border-top: 1px dashed var(--rule);
  font-family: var(--mono);
  font-size: clamp(.65rem, .8vw, .85rem);
  color: var(--muted);
  word-break: break-all;
  letter-spacing: -.01em;
}

/* ---- future-grid slide (what's actually happening) ---- */
.slide.future-grid {
  grid-template-columns: 1fr;
  align-content: start;
  padding: 5vh 5vw 4vh;
}
.slide.future-grid .kicker { margin: 0 0 .5vh; }
.slide.future-grid h2 {
  margin: 0 0 3vh;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
}
.future-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5vw;
  align-items: stretch;
  margin-bottom: 2vh;
}
.future-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-rows: auto 1fr;
  transition: transform .2s ease, box-shadow .2s ease;
}
a.future-card { cursor: pointer; }
a.future-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -18px rgba(40, 30, 10, .4);
}
.future-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #efe7d6;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.future-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.future-media.tinted {
  background: linear-gradient(135deg, #f5ead0 0%, #e9d8b3 100%);
}
.future-media canvas.pet {
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 10px rgba(40, 30, 10, .18));
  animation: bob 3.6s ease-in-out infinite;
}
.play-badge {
  position: absolute;
  bottom: .6vh;
  right: .6vw;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: .85rem;
  padding: .2em .6em;
  border-radius: 4px;
  font-family: var(--sans);
  letter-spacing: .05em;
}
.badge {
  position: absolute;
  top: .6vh;
  left: .6vw;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .25em .55em;
  border-radius: 4px;
  font-weight: 600;
}
.badge.whisper {
  background: rgba(40, 30, 10, .8);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
  font-size: .85rem;
}
.future-meta {
  padding: 1.6vh 1.2vw 2vh;
  display: grid;
  gap: .4vh;
  align-content: start;
}
.future-meta .when {
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.future-meta strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.05rem, 1.4vw, 1.4rem);
  color: var(--ink);
  line-height: 1.1;
}
.future-meta p {
  margin: .4vh 0 0;
  font-size: clamp(.85rem, 1.05vw, 1.05rem);
  line-height: 1.4;
  color: var(--ink-soft);
}
.future-card.rumor { border-style: dashed; border-color: rgba(40, 30, 10, .25); }

/* ---- bonus: why pi ---- */
.slide.whypi {
  grid-template-columns: 1fr;
  align-content: start;
  padding: 5vh 7vw 4vh;
  text-align: center;
}
.slide.whypi .kicker { justify-self: center; margin: 0 0 .8vh; }
.slide.whypi h2 {
  margin: 0 auto 1.2vh;
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  line-height: 1.05;
}
.slide.whypi p.lead {
  max-width: 70ch;
  margin: 0 auto 1.5vh;
  font-size: clamp(.95rem, 1.2vw, 1.2rem);
  line-height: 1.4;
}
.video-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2vw;
  margin: 0 auto 1vh;
  max-width: 100%;
}
.slide.whypi .quiet { margin: 0; }
.video-card {
  display: block;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
  border: 1px solid rgba(0, 0, 0, .05);
}
.video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -18px rgba(40,30,10,.4);
}
.video-card img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.video-meta {
  padding: 1.1vh 1.2vw 1.3vh;
  text-align: left;
  font-family: var(--serif);
  display: grid;
  gap: .1vh;
}
.video-meta strong { font-size: clamp(.9rem, 1.2vw, 1.25rem); font-style: italic; font-weight: 600; }
.video-meta span { font-family: var(--sans); font-size: .75rem; color: var(--muted); letter-spacing: .04em; }
.center { text-align: center; }

/* ---- references slide ---- */
.slide.refs {
  grid-template-columns: 1fr;
  align-content: start;
  padding: 7vh 9vw 5vh;
}
.slide.refs h2 { margin: 1vh 0 3vh; }
.ref-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}
.ref-list li {
  display: grid;
  grid-template-columns: minmax(15ch, 32ch) 1fr;
  gap: 2vw;
  align-items: baseline;
  padding: 1.4vh 0;
  border-bottom: 1px dashed var(--rule);
}
.ref-list li:last-child { border-bottom: 0; }
.ref-list a {
  font-family: var(--mono);
  font-size: clamp(.95rem, 1.25vw, 1.2rem);
  color: var(--accent);
  text-decoration: none;
  word-break: break-word;
}
.ref-list a:hover { text-decoration: underline; }
.ref-list span {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  color: var(--ink-soft);
  font-style: italic;
}
.ref-list code {
  background: rgba(0,0,0,.06);
  padding: .1em .35em;
  border-radius: 4px;
  font-size: .9em;
  font-style: normal;
}

/* ---- agent-mode slide ---- */
.slide.agentmode { grid-template-columns: .9fr 1.15fr; gap: 3vw; }
.slide.agentmode .left { align-self: center; }
.slide.agentmode .right {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 78vh;
}
.agent-list {
  list-style: none;
  padding: 0;
  margin: 2vh 0 1.5vh;
  font-size: clamp(.95rem, 1.2vw, 1.2rem);
  display: grid;
  gap: .9vh;
}
.agent-list li {
  padding: .5em 0 .5em 1.2em;
  position: relative;
  border-bottom: 1px dashed var(--rule);
  line-height: 1.4;
}
.agent-list li:last-child { border-bottom: 0; }
.agent-list li::before {
  content: "\203A";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.collage {
  position: relative;
  width: 100%;
  height: 80vh;
  display: block;
}
.collage .polaroid {
  position: absolute;
  max-height: none;
  width: auto;
  background: #fff;
  padding: 12px 12px 22px;
}
.collage .p-back {
  top: 2vh;
  left: 4%;
  height: 62vh;
  transform: rotate(-3deg);
  z-index: 1;
}
.collage .p-front {
  bottom: 2vh;
  right: 2%;
  height: 56vh;
  transform: rotate(2.5deg);
  z-index: 2;
  box-shadow: 0 26px 50px -18px rgba(40,30,10,.35), 0 6px 18px -8px rgba(40,30,10,.18);
}
.collage .polaroid:hover {
  transform: rotate(0) scale(1.02);
  z-index: 3;
}

/* stacked column (FDP slide: pixel art + small Spiegel chrome) */
.stack {
  display: flex;
  flex-direction: column;
  gap: 2vh;
  align-items: center;
  width: 100%;
  max-height: 84vh;
}
.stack .tile { max-height: 56vh; }

/* responsive squeeze */
@media (max-width: 900px) {
  .slide { grid-template-columns: 1fr !important; padding: 4vh 6vw; }
  .three-up { grid-template-columns: 1fr; gap: 2vh; }
  .flow-steps { grid-template-columns: 1fr; }
  .flow-steps .arrow { display: none; }
  .tile { max-height: 42vh; }
}