/* Brand tokens taken from backstagecph.dk (see wiki/data-engineering-deck.md) */
@font-face { font-family: "Schibsted Grotesk"; src: url(fonts/schibsted-grotesk.woff2) format("woff2"); font-weight: 400 900; }
@font-face { font-family: "Inter"; src: url(fonts/inter.woff2) format("woff2"); font-weight: 300 700; }

:root {
  --navy: #001270;
  --blue: #3d5cfe;
  --blue-deep: #151de0;
  --ink: #150b59;
  --lavender: #eef2ff;
  --lavender-2: #dfe4ff;
  --green: #29ff77;
  --muted: #5a6699;
  --head: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "Helvetica Neue", Inter, Arial, sans-serif;
  --mono: "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000a40; overflow: hidden; }
body { font-family: var(--body); color: var(--navy); -webkit-font-smoothing: antialiased; }

/* 1920x1080 stage, scaled to fit the window */
.stage {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--k, 1));
}
.slide {
  position: absolute; inset: 0; padding: 110px 140px 100px;
  background: var(--lavender); overflow: hidden;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
  display: flex; flex-direction: column;
}
.slide.active { opacity: 1; visibility: visible; }
.slide.dark { background: var(--navy); color: var(--lavender); }
.slide.ink { background: var(--ink); color: var(--lavender); }
.slide.center > :first-child { margin-top: auto; }
.notes { display: none; }

/* Type */
h1, h2, h3 { font-family: var(--head); font-weight: 500; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: 128px; line-height: 1.0; }
h2 { font-size: 72px; line-height: 1.05; margin-bottom: 48px; }
h3 { font-size: 36px; line-height: 1.15; margin-bottom: 14px; font-weight: 600; }
p, li { font-size: 32px; line-height: 1.4; font-weight: 300; }
p { margin: 0 0 22px; }
ul { margin: 0; padding-left: 1.1em; }
li { margin-bottom: 14px; }
li::marker { color: var(--blue); }
strong, b { font-weight: 600; }
.kicker {
  font-family: var(--head); font-size: 24px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 22px;
}
.dark .kicker, .ink .kicker { color: var(--green); }
.lead { font-size: 40px; line-height: 1.35; max-width: 1400px; }
.muted { color: var(--muted); }
.dark .muted, .ink .muted { color: #9aa8ff; }
.accent { color: var(--blue); }
.dark .accent, .ink .accent { color: var(--green); }
.small, .small li, .small p { font-size: 25px; }
code { font-family: var(--mono); font-size: .88em; background: var(--lavender-2); padding: 2px 8px; border-radius: 6px; }
.dark code, .ink code { background: #1b2a8a; }

/* Layout helpers */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; flex: 1; }
.cols.c3 { grid-template-columns: repeat(3, 1fr); gap: 40px; }
.cols.wide-left { grid-template-columns: 1.3fr 1fr; }
.cols.wide-right { grid-template-columns: 1fr 1.3fr; }
.card {
  background: #fff; border: 2px solid var(--lavender-2); border-radius: 22px; padding: 36px 40px;
}
.card p, .card li { font-size: 27px; }
.card.blue { background: var(--blue); color: #fff; border-color: var(--blue); }
.card.blue li::marker, .card.navy li::marker { color: var(--green); }
.cols.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; align-items: stretch; flex: 0; }
.cols.c5 .card { padding: 30px 28px; }
.cols.c5 code { font-size: .8em; }
.card.navy { background: var(--navy); color: var(--lavender); border-color: var(--navy); }
.dark .card { background: #0a1d86; border-color: #22339a; color: var(--lavender); }
.pill {
  display: inline-block; vertical-align: middle; line-height: 1.3; font-family: var(--head); font-weight: 600; font-size: 22px;
  padding: 6px 18px; border-radius: 999px; background: var(--lavender-2); color: var(--navy); margin: 0 8px 10px 0;
}
.pill.blue { background: var(--blue); color: #fff; }
.pill.green { background: var(--green); color: var(--navy); }
.bottom { margin-top: auto; }

/* Step reveals */
[data-step] { transition: opacity .4s ease, transform .4s ease, filter .4s ease; }
[data-step]:not(.on) { opacity: 0; transform: translateY(18px); }
svg [data-step]:not(.on) { transform: none; }
[data-until].gone { opacity: 0 !important; }

/* Code blocks (hand-highlighted spans) */
pre.code {
  font-family: var(--mono); font-size: 24px; line-height: 1.5; margin: 0;
  background: var(--ink); color: #dfe4ff; padding: 30px 36px; border-radius: 20px; white-space: pre;
}
pre.code .k { color: #8fa2ff; }
pre.code .s { color: var(--green); }
pre.code .c { color: #7d84b8; font-style: italic; }
pre.code .f { color: #ffd479; }
pre.code .hl { background: rgba(41, 255, 119, .14); display: inline-block; width: 100%; }
.code-label { font-family: var(--head); font-weight: 600; font-size: 22px; margin: 0 0 10px; color: var(--muted); }

/* Comparison table */
table.compare { border-collapse: collapse; width: 100%; font-size: 28px; }
table.compare th { font-family: var(--head); font-size: 30px; text-align: left; padding: 0 24px 16px; font-weight: 600; }
table.compare th:nth-child(2) { color: var(--muted); }
table.compare th:nth-child(3) { color: var(--blue); }
table.compare td { padding: 14px 24px; border-top: 2px solid var(--lavender-2); vertical-align: top; font-weight: 300; }
table.compare td:first-child { font-family: var(--head); font-weight: 600; width: 20%; }
table.compare td:nth-child(2) { color: var(--muted); }
table.compare td:nth-child(3) { font-weight: 500; }
table.compare.small th { font-size: inherit; }

/* Workflow mini-map (top right) */
.map { position: absolute; top: 44px; right: 60px; font-family: var(--head); font-size: 15px; font-weight: 600; }
.map-row { display: flex; align-items: center; }
.map-row i { width: 14px; height: 2px; background: var(--lavender-2); }
.map b, .map-band b {
  padding: 5px 10px; border-radius: 999px; border: 2px solid var(--lavender-2); color: var(--muted); background: transparent;
}
.map-band { display: flex; gap: 6px; justify-content: center; margin-top: 7px; }
.map-band b { font-size: 12px; padding: 3px 9px; }
.map b.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.dark .map b { border-color: #22339a; color: #7f8ccc; }
.dark .map b.on { background: var(--green); border-color: var(--green); color: var(--navy); }
.dark .map-row i { background: #22339a; }

/* SVG diagrams */
svg { overflow: visible; font-family: var(--head); }
svg text { fill: currentColor; }
svg .box { fill: #fff; stroke: var(--lavender-2); stroke-width: 3; }
svg .box.blue { fill: var(--blue); stroke: var(--blue); }
svg .box.navy { fill: var(--navy); stroke: var(--navy); }
svg .line { stroke: var(--blue); stroke-width: 3; fill: none; }
svg .line.dash { stroke-dasharray: 8 8; }
svg .flow { stroke-dasharray: 10 12; animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -44; } }

/* Chrome: progress + counter */
.progress { position: fixed; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(61, 92, 254, .2); z-index: 5; }
.progress > i { display: block; height: 100%; background: var(--blue); transition: width .3s; }
.counter { position: fixed; right: 16px; bottom: 10px; color: #7f8ccc; font: 600 13px var(--head); z-index: 5; }

/* Overview grid (O) */
body.overview { overflow: auto; }
body.overview .stage {
  position: static; transform: none; width: auto; height: auto; padding: 30px;
  display: grid; grid-template-columns: repeat(auto-fill, 432px); gap: 22px; justify-content: center;
}
body.overview .slide {
  position: relative; inset: auto; width: 1920px; height: 1080px; zoom: .225;
  opacity: 1; visibility: visible; cursor: pointer; transition: none; outline: 0 solid var(--green);
}
body.overview .slide.active { outline-width: 16px; }
body.overview [data-step] { opacity: 1; transform: none; }
body.overview .progress, body.overview .counter { display: none; }

/* Print / PDF: one slide per page, fully built */
@page { size: 1920px 1080px; margin: 0; }
@media print {
  html, body { overflow: visible; height: auto; background: none; }
  .stage { position: static; transform: none; width: 1920px; height: auto; }
  .slide { position: relative; width: 1920px; height: 1080px; opacity: 1; visibility: visible; break-after: page; transition: none; }
  [data-step] { opacity: 1 !important; transform: none !important; transition: none; }
  .progress, .counter { display: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.takeaways h3 { font-size: 46px; margin-bottom: 18px; }
.takeaways p { font-size: 30px; }