:root{
    --ground:#0A0C0E;
    --ink:#F4F2ED;
    --dim:#7E868F;
    --edge:#1E242A;
    --accent:#E8A33D;
    --display:"Archivo","Helvetica Neue",Arial,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  }
  *{box-sizing:border-box}
  html{scroll-snap-type:y proximity}
  body{
    background:var(--ground);color:var(--ink);margin:0;
    font-family:var(--display);font-weight:400;
    font-size:17px;line-height:1.5;
    padding-inline:24px;padding-block:0;
    -webkit-font-smoothing:antialiased;
  }

  /* ── one slide, one shape, every time ───────────────── */
  .s{
    max-width:900px;margin:0 auto;
    min-height:86vh;
    padding-block:76px;
    display:flex;flex-direction:column;justify-content:center;
    border-bottom:1px solid var(--edge);
    scroll-snap-align:start;
  }
  .s:last-of-type{border-bottom:0}

  .eb{
    font-family:var(--mono);font-size:11px;font-weight:500;
    letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
    margin-bottom:28px;
  }
  .eb i{font-style:normal;color:var(--accent);margin-right:14px}

  h1,h2{
    font-family:var(--display);font-weight:900;
    letter-spacing:-.042em;line-height:.92;
    margin:0;text-wrap:balance;
  }
  h1{font-size:clamp(56px,14vw,124px)}
  h2{font-size:clamp(32px,6.2vw,62px);max-width:17ch}
  h2.w{max-width:23ch}

  /* the one supporting paragraph */
  .p{
    font-size:19px;line-height:1.5;font-weight:400;
    color:var(--dim);margin:30px 0 0;max-width:52ch;
  }
  .p b{color:var(--ink);font-weight:600}
  .p em{font-style:normal;color:var(--accent)}

  /* the one list component — used on every slide that needs one */
  .list{margin:38px 0 0;border-top:1px solid var(--edge)}
  .list div{
    border-bottom:1px solid var(--edge);
    padding:15px 0;
    display:grid;grid-template-columns:168px 1fr;gap:24px;align-items:baseline;
  }
  .list dt{
    font-family:var(--mono);font-size:11px;font-weight:500;
    letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
    margin:0;
  }
  .list dd{margin:0;font-size:17px;color:var(--dim);line-height:1.45}
  .list dd b{color:var(--ink);font-weight:600}

  /* title + closer get no eyebrow, more air */
  .s.hero{min-height:94vh}
  .mark{
    font-family:var(--mono);font-size:11px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--accent);margin-bottom:34px;
  }
  .s.hero .p{font-size:21px;max-width:44ch;color:var(--dim)}

  /* the number slides use h1 scale, accent colour */
  .fig{color:var(--accent)}

  cite{
    display:block;font-family:var(--mono);font-size:11px;font-style:normal;
    letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
    margin-top:22px;line-height:1.9;
  }

  /* shots — the one image treatment, used everywhere */
  .shots{
    margin:40px 0 0;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:22px;align-items:start;max-width:620px;
  }
  .shots figure{margin:0}
  .shots img{
    width:100%;height:auto;display:block;
    border:1px solid var(--edge);border-radius:14px;
  }
  .shots figcaption{
    font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--dim);margin-top:14px;
  }

  /* chart — single series, single hue, direct labels */
  .chart{margin:40px 0 0;max-width:640px}
  .bar{
    display:grid;grid-template-columns:150px 1fr 76px;
    gap:20px;align-items:center;padding:11px 0;
  }
  .bar .lab{
    font-family:var(--mono);font-size:11px;letter-spacing:.11em;
    text-transform:uppercase;color:var(--dim);
  }
  .bar .track{display:block;height:15px;background:#161C22;border-radius:4px;overflow:hidden}
  .bar .fill{display:block;height:100%;background:var(--accent);border-radius:4px}
  .bar .val{
    font-family:var(--display);font-weight:800;font-size:19px;
    letter-spacing:-.02em;text-align:right;color:var(--ink);
  }
  .bar.muted .fill{background:#3A4149}
  .bar.muted .val{color:var(--dim)}
  .chart .src{
    font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
    color:var(--dim);margin-top:18px;line-height:1.8;
  }

  /* flow — the mechanism, one picture */
  .flow{margin:40px 0 0;max-width:660px}
  .flow div{
    display:grid;grid-template-columns:30px 1fr;gap:20px;
    align-items:start;padding:0 0 26px;position:relative;
  }
  .flow div:not(:last-child)::before{
    content:"";position:absolute;left:15px;top:30px;bottom:4px;
    width:1px;background:var(--edge);
  }
  .flow .n{
    font-family:var(--mono);font-size:11px;font-weight:500;
    width:30px;height:30px;border:1px solid var(--accent);color:var(--accent);
    border-radius:50%;display:grid;place-items:center;background:var(--ground);
    position:relative;z-index:1;
  }
  .flow .t{font-size:18px;line-height:1.45;color:var(--dim);padding-top:4px}
  .flow .t b{color:var(--ink);font-weight:600;display:block;font-size:19px;margin-bottom:3px}

  .s.shot{position:relative;min-height:94vh;justify-content:flex-end;padding-block:76px 84px}
  .s.shot .bg{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
    width:100vw;max-width:100vw;overflow:hidden;z-index:0;border-bottom:1px solid var(--edge)}
  .s.shot .bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
  .s.shot .bg::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(10,12,14,.72) 0%,rgba(10,12,14,.5) 45%,rgba(10,12,14,.97) 100%)}
  .s.shot > *:not(.bg){position:relative;z-index:1}
  .land{margin:38px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:34px}
  .land h3{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
    text-transform:uppercase;color:var(--accent);margin:0 0 14px}
  .land h3.dead{color:#6B7178}
  .land p{font-size:15.5px;color:var(--dim);margin:0 0 9px;line-height:1.45}
  .land p b{color:var(--ink);font-weight:600}
  footer{
    max-width:900px;margin:0 auto;padding-block:40px 60px;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
    color:var(--dim);line-height:2.2;border-top:1px solid var(--edge);
  }

  @media(max-width:620px){
    body{font-size:16px}
    .s{min-height:auto;padding-block:56px}
    .list div{grid-template-columns:1fr;gap:6px}
  }

/* ── deck chrome: progress rail + slide counter ───────── */
.rail{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:50;
  background:var(--edge);
}
.rail-fill{
  display:block;height:100%;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .15s linear;
}
.count{
  position:fixed;bottom:22px;right:24px;z-index:50;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--dim);background:rgba(10,12,14,.82);
  border:1px solid var(--edge);border-radius:999px;
  padding:7px 14px;backdrop-filter:blur(8px);
  font-variant-numeric:tabular-nums;
}
.count b{color:var(--accent);font-weight:500}
@media (prefers-reduced-motion: reduce){ .rail-fill{transition:none} }
@media print{
  .rail,.count{display:none}
  html{scroll-snap-type:none}
  .s{min-height:auto;page-break-after:always;border-bottom:0}
  body{background:#fff;color:#000}
}
@media (max-width:620px){ .count{bottom:14px;right:14px} }