/* ============================================================
   styles.css — everything visual. All colours are tokens.
   The palette is per era: see [data-era] below.
   ============================================================ */
:root {
  --void: #08090B;
  --danger: #D2563C;
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', 'Liberation Serif', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --pad: 84px;
  /* mirror of the active era, for chrome that lives outside #deck */
  --accent: #B4552E;
  --accent-2: #8A6A3B;
  --chrome-ink: #9C9483;
  --chrome-rule: #3A352C;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--void);
  font-family: var(--sans);
  color: #EDE8DE;
  overflow: hidden;
}

/* ---- the language toggle: hide the other language everywhere ---- */
[data-lang="nl"] .en { display: none; }
[data-lang="en"] .nl { display: none; }

/* fine grain over everything: texture, not decoration */
body::before {
  content: ""; position: fixed; inset: -40%; z-index: 1; pointer-events: none; opacity: .30;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.5'/></svg>");
  animation: drift 24s linear infinite;
}
@keyframes drift {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-2%, 1.5%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* pointer spotlight, only useful on the dark eras */
#spot {
  position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  transition: opacity .8s ease;
  background: radial-gradient(620px circle at var(--mx, 50%) var(--my, 40%), rgba(255, 255, 255, .055), transparent 62%);
}

/* ============================================================
   THE CANVAS
   ============================================================ */
/* The deck is centred with absolute positioning + translate, NOT with grid.
   A grid item bigger than its container cannot be centred: the auto track only
   stretches when there is spare space, so on any window smaller than 1920x1080
   the deck anchored top-left and overflowed bottom-right. */
.stage { position: fixed; inset: 0; overflow: hidden; z-index: 5; }
#deck {
  width: 1920px; height: 1080px; position: absolute; left: 50%; top: 50%;
  overflow: hidden;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .7);
  transform-origin: center center;
  transition: background-color .85s ease, color .85s ease;
  isolation: isolate;
}
/* one soft light from the top-left so flat surfaces have depth */
#deck::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(120% 90% at 8% -10%, rgba(255, 255, 255, .10), transparent 55%),
              radial-gradient(90% 80% at 110% 115%, rgba(0, 0, 0, .20), transparent 60%);
  mix-blend-mode: soft-light;
}

/* ============================================================
   ERA THEMES — paper → dusk → night
   ============================================================ */
#deck[data-era="clay"], .preview-canvas[data-era="clay"] {  --surface:#F2E9DA; --ink:#1A1512; --ink-2:#5B5342; --ink-3:#8A8070; --rule:#D5C8B0; --accent:#B4552E; --accent-2:#8A6A3B; }
#deck[data-era="bronze"], .preview-canvas[data-era="bronze"] {  --surface:#EFE5D2; --ink:#191510; --ink-2:#585040; --ink-3:#877E6B; --rule:#D2C4A6; --accent:#9A6B18; --accent-2:#2E6F6A; }
#deck[data-era="paper"], .preview-canvas[data-era="paper"] {  --surface:#F7F2E6; --ink:#14161C; --ink-2:#525762; --ink-3:#848A96; --rule:#D3CCBB; --accent:#1F3E8C; --accent-2:#A6751F; }
#deck[data-era="data"], .preview-canvas[data-era="data"] {  --surface:#181D24; --ink:#EAE5DA; --ink-2:#A6A399; --ink-3:#7B7972; --rule:#2E353E; --accent:#5FC5B4; --accent-2:#C9A45C; }
#deck[data-era="chain"], .preview-canvas[data-era="chain"] {  --surface:#0C0E11; --ink:#EEE9DF; --ink-2:#A5A198; --ink-3:#76746D; --rule:#23272D; --accent:#E0A63A; --accent-2:#61C9D6; }
#deck[data-era="warning"], .preview-canvas[data-era="warning"] { --surface:#130F0D; --ink:#F0E7DB; --ink-2:#A79E94; --ink-3:#7C736A; --rule:#2A211D; --accent:#D2563C; --accent-2:#E0A63A; }
#deck[data-era="close"], .preview-canvas[data-era="close"] {  --surface:#0A0C0F; --ink:#F0EBE1; --ink-2:#A8A49A; --ink-3:#79766E; --rule:#22262C; --accent:#E0A63A; --accent-2:#61C9D6; }

/* ============================================================
   SLIDES — divs, cross-faded
   ============================================================ */
.slide {
  position: absolute; inset: 0; padding: var(--pad); z-index: 1;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .5s ease, transform .55s cubic-bezier(.2, .75, .2, 1);
  transform: translateY(14px);
}
.slide.active {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none; z-index: 3;
}
.inner { flex: 1; display: flex; flex-direction: column; min-height: 0; transform-origin: top left; }
.head { flex: none; }
.body { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }

/* ============================================================
   TYPE
   ============================================================ */
.eyebrow {
  font-family: var(--mono); font-size: 19px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 19px; transition: color .85s ease;
}
h1 { font-family: var(--serif); font-size: 126px; line-height: 1.02; letter-spacing: -.02em; margin: 0; font-weight: 400; }
h2 { font-family: var(--serif); font-size: 66px; line-height: 1.08; letter-spacing: -.015em; margin: 0 0 28px; font-weight: 400; max-width: 26ch; }
h2.h2-sm { font-size: 54px; }
h3 { font-family: var(--sans); font-size: 26px; font-weight: 600; margin: 0 0 12px; }
p { font-size: 26px; line-height: 1.44; margin: 0 0 19px; max-width: 30ch; }
p.wide { max-width: 52ch; }
p.lead { font-size: 33px; line-height: 1.4; max-width: 30ch; }
p.small { font-size: 20px; color: var(--ink-2); }
p.note { font-size: 20px; color: var(--ink-2); max-width: 72ch; margin-top: 24px; }
em { font-style: italic; }
strong { font-weight: 600; }
.slide.danger .eyebrow { color: var(--danger); }

hr.rule { height: 1px; background: var(--rule); border: 0; margin: 32px 0; transition: background-color .85s ease; }
hr.rule-narrow { max-width: 520px; margin-left: 0; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 74px; align-items: start; }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px; align-items: start; }

.foot {
  flex: none; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 19px; color: var(--ink-3); letter-spacing: .04em;
  transition: border-color .85s ease, color .85s ease;
}

.quote { font-family: var(--serif); font-size: 49px; line-height: 1.26; max-width: 30ch; letter-spacing: -.01em; margin: 0 0 19px; }
.quote.q-sm { font-size: 44px; }

.meta { display: flex; gap: 56px; align-items: baseline; font-family: var(--mono); font-size: 23px; color: var(--ink-3); }

ol.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; max-width: 62ch; }
ol.steps > li {
  counter-increment: s; position: relative; padding-left: 70px; margin-bottom: 20px;
  font-size: 25px; line-height: 1.42;
}
ol.steps > li::before {
  content: counter(s); position: absolute; left: 0; top: 2px; font-family: var(--mono); font-size: 23px;
  color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 2px; width: 42px;
}

.timeline { position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 0; right: 0; top: 64px; height: 1px;
  background: var(--rule); transform-origin: left center;
}
.tl { display: grid; grid-template-columns: repeat(var(--n, 6), 1fr); gap: 26px; }
.tl .item { position: relative; }
.tl .dot { width: 13px; height: 13px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); margin: 58px 0 22px; }
.tl .item.plain .dot { border-color: var(--ink-3); }
.tl .y { font-family: var(--mono); font-size: 21px; color: var(--ink); }
.tl .t { font-size: 20px; line-height: 1.35; color: var(--ink-2); margin-top: 8px; }

.chain { display: flex; align-items: stretch; margin: 6px 0 4px; }
.block {
  border: 1.5px solid var(--ink); background: var(--surface); padding: 19px 23px; min-width: 218px;
  transition: border-color .5s ease, background-color .85s ease;
}
.block .lbl { font-family: var(--mono); font-size: 21px; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
.block .h { font-family: var(--mono); font-size: 25px; margin-top: 10px; }
.block .h.strike { text-decoration: line-through; opacity: .6; }
.block .d { font-family: var(--mono); font-size: 21px; color: var(--ink-2); margin-top: 14px; }
.link { display: flex; align-items: center; padding: 0 16px; font-family: var(--mono); color: var(--accent); font-size: 25px; }
.block.hi { border-color: var(--danger); border-width: 2.5px; }
.block.hi .h { color: var(--danger); }

.cmp h3 { font-family: var(--serif); font-size: 33px; font-weight: 400; margin-bottom: 20px; }
.cmp ul { list-style: none; padding: 0; margin: 0; }
.cmp li { font-size: 22px; line-height: 1.42; padding: 10px 0; border-top: 1px solid var(--rule); }
.cmp li:last-child { border-bottom: 1px solid var(--rule); }

.takeaways { display: flex; flex-direction: column; max-width: 64ch; }
.takeaways .t { display: grid; grid-template-columns: 56px 1fr; gap: 32px; padding: 19px 0; border-top: 1px solid var(--rule); }
.takeaways .t:last-child { border-bottom: 1px solid var(--rule); }
.takeaways .n { font-family: var(--mono); color: var(--accent); font-size: 25px; }
.takeaways .x { font-size: 26px; line-height: 1.38; }

.gloss { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 68px; }
.gloss div { font-size: 20px; line-height: 1.4; padding-bottom: 15px; border-bottom: 1px solid var(--rule); }
.gloss b { font-weight: 600; }

/* ============================================================
   MOTION
   ============================================================ */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes wipein { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes popin { from { opacity: 0; transform: scale(.92) translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tamper {
  0% { transform: none; opacity: 1; }
  18% { transform: translateX(-7px); }
  36% { transform: translateX(6px); }
  54% { transform: translateX(-4px); }
  72% { transform: translateX(3px); }
  100% { transform: none; opacity: 1; }
}
.anim { opacity: 0; }
.slide.reveal .anim { animation: rise .62s cubic-bezier(.2, .75, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 75ms); }
.slide.reveal h1.anim,
.slide.reveal h2.anim { animation: rise .7s cubic-bezier(.2, .75, .2, 1) forwards, wipein .9s cubic-bezier(.2, .75, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 75ms); }
.slide.reveal .chain .block.anim { animation: popin .55s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 75ms); }
.slide.reveal .timeline.anim { animation: growx .8s cubic-bezier(.2, .75, .2, 1) forwards; animation-delay: .1s; transform-origin: left center; }
.slide.reveal .tl .item.anim { animation: rise .5s cubic-bezier(.2, .75, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 75ms); }
.slide.broken .block.hi { animation: tamper .9s ease both; }
.slide.broken .block.hi .h { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .anim { opacity: 1 !important; animation: none !important; }
  body::before { animation: none; }
  .slide { transition: none; transform: none; }
  #deck { transition: none; }
}

/* ============================================================
   APP CHROME
   ============================================================ */
.chrome { position: fixed; z-index: 20; font-family: var(--mono); font-size: 14px; color: var(--chrome-ink); }
.progress { left: 0; right: 0; top: 0; height: 3px; background: rgba(255, 255, 255, .07); }
.progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s ease, background-color .85s ease; }
#chapter { left: 28px; top: 18px; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; transition: color .5s ease; }
#chapter i { font-style: normal; opacity: .55; }
.toggle { right: 28px; top: 16px; display: flex; gap: 6px; }
.toggle button {
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em; background: transparent; color: var(--chrome-ink);
  border: 1px solid var(--chrome-rule); border-radius: 2px; padding: 7px 12px; cursor: pointer; transition: .15s;
}
.toggle button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #0B0C0F; }
.toggle button:hover { border-color: var(--accent); color: #EFE8DA; }
.counter { right: 28px; bottom: 16px; letter-spacing: .1em; }
.hint { left: 28px; bottom: 16px; letter-spacing: .04em; opacity: .7; }
/* the way back to the menu: sits under the chapter label, quiet until you hover */
.chrome.back {
  left: 28px; top: 44px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; opacity: .42;
  transition: opacity .2s ease, color .2s ease;
}
.chrome.back:hover { opacity: 1; color: var(--accent); }
.timer { right: 28px; bottom: 44px; letter-spacing: .1em; opacity: 0; transition: opacity .3s; font-variant-numeric: tabular-nums; }
.timer.on { opacity: .85; }
.arrows { position: fixed; z-index: 21; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; opacity: 0; transition: opacity .25s; }
.stage:hover ~ .arrows, body:hover .arrows { opacity: .9; }
.arrows button {
  width: 42px; height: 42px; background: transparent; color: var(--chrome-ink);
  border: 1px solid var(--chrome-rule); border-radius: 2px; cursor: pointer; font-size: 16px;
}
.arrows button:hover { border-color: var(--accent); color: #EFE8DA; }

/* overview */
.grid { position: fixed; inset: 0; z-index: 40; display: none; background: rgba(6, 7, 9, .96); padding: 56px 56px 40px; overflow: auto; }
.grid.open { display: block; }
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.tile { position: relative; border: 1px solid #2A2F36; background: #0D1014; cursor: pointer; overflow: hidden; aspect-ratio: 16/9; transition: border-color .18s, transform .18s; }
.tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.tile.now { border-color: var(--accent); border-width: 2px; }
.thumb { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; transform-origin: top left; pointer-events: none; }
.thumb .slide { opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: none; }
.thumb .anim { opacity: 1 !important; animation: none !important; }
.tile .cap { position: absolute; left: 0; right: 0; bottom: 0; font-family: var(--mono); font-size: 13px; color: #C9C3B6; background: linear-gradient(transparent, rgba(6, 7, 9, .92)); padding: 22px 10px 8px; display: flex; gap: 8px; }
.tile .cap b { color: var(--accent); }

/* key help */
.keys { position: fixed; inset: 0; z-index: 45; display: none; place-items: center; background: rgba(6, 7, 9, .94); }
.keys.open { display: grid; }
.keys .panel { background: #0E1116; border: 1px solid #262B33; padding: 52px 60px; max-width: 820px; color: #EDE8DE; }
.keys h3 { font-family: var(--serif); font-size: 38px; font-weight: 400; margin: 0 0 26px; }
.keys table { border-collapse: collapse; font-size: 23px; }
.keys td { padding: 11px 26px 11px 0; border-top: 1px solid #22262C; }
.keys td:first-child { font-family: var(--mono); color: var(--accent); white-space: nowrap; }

/* ============================================================
   PRINT — force a light theme, one landscape page per slide
   ============================================================ */
@page { size: 1920px 1080px; margin: 0; }
@media print {
  html, body { overflow: visible; background: #fff; }
  body::before, #spot, .chrome, .arrows, .keys, .grid { display: none !important; }
  #deck {
    /* !important, because #deck[data-era] is more specific than #deck and would
       otherwise win and print a dark slide with light text on white paper */
    --surface: #fff !important; --ink: #000 !important; --ink-2: #333 !important;
    --ink-3: #666 !important; --rule: #bbb !important;
    position: static; left: auto; top: auto;      /* undo the centring offset */
    transform: none !important; width: auto; height: auto; box-shadow: none; background: #fff; color: #000;
  }
  #deck::after { display: none; }
  .stage { position: static; display: block; overflow: visible; }
  .slide {
    position: relative; inset: auto; width: 1920px; height: 1080px; display: flex !important;
    opacity: 1 !important; visibility: visible !important; transform: none !important;
    break-after: page; page-break-after: always;
  }
  .anim { opacity: 1 !important; animation: none !important; }
  .inner { transform: none !important; width: 100% !important; }
}


/* ============================================================
   images (markdown: ![alt](img/naam.png), optional {height=380})
   ============================================================ */
.slide img.fig {
  max-width: 100%;
  max-height: 220px;
  width: auto; height: auto;
  vertical-align: middle;
  border-radius: 5px;
  /* on the light eras a photo needs a hairline, or it floats */
  outline: 1px solid rgba(0, 0, 0, .10);
  outline-offset: -1px;
}
/* an image alone in its own paragraph is a figure, so it may be large */
.slide p.fig-block { text-align: center; }
.slide p.fig-block img.fig {
  display: block;
  max-height: 460px;
  margin: 0 auto;
}
.slide .cols img.fig { max-height: 300px; }
.slide .cols p.fig-block img.fig { max-height: 380px; }