/* MWC Shanghai keynote - art-of-evals editorial skin
   Palette + type lifted from art-of-evals/diagrams/diagrams.css */

@import url("assets/fonts/fonts.css");

:root {
  /* surfaces */
  --paper: #faf9f5;
  --paper-2: #f6f4ec;
  --panel: #f0eee6;
  --card: #ffffff;
  --card-bd: #e7e3d8;
  --hair: #e3ded2;
  /* ink */
  --ink: #16140f;
  --ink2: #20242a;
  --label: #2a2722;
  --muted: #73726c;
  --muted2: #8f8e88;
  /* semantic */
  --mint: #aee6d3; --mint-fill: #e9f6f2; --mint-bd: #cfe9df; --mint-stroke: #7cc3a8;
  --green: #1aaf7d; --green-fill: #e3f6ee; --green-deep: #106a59;
  --blue: #2b83da; --blue-fill: #eaf3fb; --blue-bd: #b6daeb; --blue-deep: #1d558e;
  --orange: #E4002B; --orange-fill: #fde7ea; --peach: #f9dfb8; --peach-bd: #eaa0ab; --amber-deep: #9a5a12;
  --pink: #e15f8b; --pink-fill: #f9e9f0; --pink-bd: #f0c4d6;
  --purple: #6c63d4; --suite-fill: #efedfa; --suite-bd: #b4abd9;
  --coral: #e0876a; --clay: #E4002B;
  --wire: #8b8a82; --wire-soft: #b9b5aa;
  /* type */
  --serif: 'Inter', system-ui, sans-serif;
  --serif-news: 'Inter', system-ui, sans-serif;
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  /* scale (designed against a 1920x1080 stage) */
  --pad: clamp(48px, 5vw, 96px);
  --title: clamp(40px, 4.4vw, 76px);
  --subtitle: clamp(18px, 1.7vw, 27px);
  --lead: clamp(20px, 1.9vw, 30px);
  --label-sz: clamp(12px, 1vw, 16px);
  --radius: 16px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* , *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* one frame fills the viewport; folded deck reuses .slide as a scroll-snap section */
.slide {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--paper);
  padding: var(--pad);
}
.slide.alt { background: var(--paper-2); }

.stage { width: 100%; max-width: 1500px; display: flex; flex-direction: column; gap: clamp(20px, 2.4vh, 44px); align-items: center; }
.stage.left { align-items: flex-start; text-align: left; }

/* type */
.kicker {
  font-family: var(--sans);
  font-size: var(--label-sz);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  font-weight: 600;
}
h1.title, .title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--title);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
}
.subtitle, .lead {
  font-size: var(--subtitle);
  line-height: 1.5;
  color: var(--muted);
  max-width: 60ch;
}
.lead { font-size: var(--lead); color: var(--label); }
.accent-rule { width: 84px; height: 3px; border-radius: 2px; background: var(--clay); }

/* media */
.figure {
  max-width: min(86vw, 1320px);
  max-height: 64vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 6px 30px rgba(22,20,15,0.07);
  background: var(--card);
}
.figure.bare { box-shadow: none; background: transparent; }

/* cards */
.card {
  background: var(--card);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
  padding: clamp(20px, 2vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card .card-h { font-family: var(--serif-news); font-weight: 600; font-size: clamp(20px,1.7vw,28px); color: var(--ink); }
.card .card-d { font-size: clamp(15px,1.2vw,19px); color: var(--muted); line-height: 1.45; }
.card.tint-blue { border-color: var(--blue-bd); background: var(--blue-fill); }
.card.tint-pink { border-color: var(--pink-bd); background: var(--pink-fill); }
.card.tint-mint { border-color: var(--mint-bd); background: var(--mint-fill); }
.card.tint-orange { border-color: var(--peach-bd); background: var(--orange-fill); }
.card.tint-purple { border-color: var(--suite-bd); background: var(--suite-fill); }

.row { display: grid; gap: clamp(18px, 2vw, 32px); width: 100%; }
.row.c2 { grid-template-columns: 1fr 1fr; }
.row.c3 { grid-template-columns: repeat(3, 1fr); }
.row.c5 { grid-template-columns: repeat(5, 1fr); }

/* numbered chip */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 14px; font-weight: 500;
}

/* problem / note pills */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 9px;
  background: var(--panel); border: 1px solid var(--hair);
  font-size: clamp(14px,1.1vw,18px); color: var(--label);
}

/* embeds */
.embed-frame {
  width: min(92vw, 1500px);
  height: 70vh;
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 6px 30px rgba(22,20,15,0.07);
  overflow: hidden;
}
.embed-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.embed-frame.bare { border: none; background: transparent; box-shadow: none; }

/* split: image-left + caption-right */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) 1fr;
  gap: clamp(28px, 3vw, 60px);
  width: 100%;
  align-items: center;
}
.split .portrait { max-height: 78vh; max-width: 100%; object-fit: contain; border-radius: 12px; box-shadow: 0 6px 30px rgba(22,20,15,0.07); }

/* mono code-ish callout */
.mono { font-family: var(--mono); font-size: clamp(14px,1.1vw,18px); color: var(--ink2); }
.muted { color: var(--muted); }
.strong { color: var(--ink); font-weight: 600; }

/* slide number */
.slide-no { position: absolute; bottom: 28px; right: 40px; font-family: var(--mono); font-size: 13px; color: var(--muted2); }

/* reveal: OFF by default so standalone screenshots are not blank
   (folded deck opts in by adding .deck to <body>) */
.reveal { opacity: 1; transform: none; }
body.deck .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
body.deck .slide.visible .reveal { opacity: 1; transform: none; }
body.deck .reveal:nth-child(1){ transition-delay:.05s; }
body.deck .reveal:nth-child(2){ transition-delay:.15s; }
body.deck .reveal:nth-child(3){ transition-delay:.25s; }
body.deck .reveal:nth-child(4){ transition-delay:.35s; }
body.deck .reveal:nth-child(5){ transition-delay:.45s; }

@media (prefers-reduced-motion: reduce){ body.deck .reveal{ transition: opacity .3s ease; transform:none; } }