@font-face{font-family:Bitter;src:url('../assets/fonts/bitter-var.woff2') format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:Bitter;src:url('../assets/fonts/bitter-italic-var.woff2') format('woff2');font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:Figtree;src:url('../assets/fonts/figtree-var.woff2') format('woff2');font-weight:300 900;font-display:swap}
@font-face{font-family:Figtree;src:url('../assets/fonts/figtree-italic-var.woff2') format('woff2');font-weight:300 900;font-style:italic;font-display:swap}
@font-face{font-family:Caveat;src:url('media/fonts/caveat-var.ttf') format('truetype');font-weight:400 700;font-display:swap}

:root{--navy:#0F1A3C;--paper:#E7E7E0;--saffron:#E0A028;--serif:Bitter,Georgia,serif;--sans:Figtree,system-ui,sans-serif;--hand:Caveat,cursive;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080f23;color:var(--paper);font-family:var(--sans)}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid var(--saffron);outline-offset:5px}
#viewport{position:fixed;inset:0;display:grid;place-items:center}
#presentation{width:1920px;height:1080px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--fit,1));transform-origin:center;overflow:hidden;background:var(--navy)}
#world,#scenes,#world-labels{position:absolute;inset:0;width:100%;height:100%}
#world{display:block}
#scenes,#world-labels{pointer-events:none}

/* Chapter palettes, applied to each scene and to the stage chrome. */
.chapter-opening{--ground:#0F1A3C;--ink:#E7E7E0;--accent:#E0A028;--accent-ink:#E0A028;--soft:#A9B1C6;--rule:#A9B1C640}
.chapter-culture{--ground:#E7E7E0;--ink:#17233C;--accent:#A66B45;--accent-ink:#85502F;--soft:#53626A;--rule:#17233C33}
.chapter-stories{--ground:#252744;--ink:#F1EADF;--accent:#D8AA5D;--accent-ink:#D8AA5D;--soft:#BBB9D1;--rule:#BBB9D140}
.chapter-suffering{--ground:#173F46;--ink:#E4DACC;--accent:#C58E65;--accent-ink:#E0AF87;--soft:#B0C4C5;--rule:#B0C4C540}
.chapter-thou{--ground:#3B2E43;--ink:#E9E3DD;--accent:#DCC8A6;--accent-ink:#DCC8A6;--soft:#C4BDCC;--rule:#C4BDCC40}
.chapter-archive{--ground:#D8CDBA;--ink:#283333;--accent:#8B6750;--accent-ink:#68462F;--soft:#53605D;--rule:#28333333}
.chapter-creed{--ground:#202D32;--ink:#E9E4D9;--accent:#C6AE79;--accent-ink:#C6AE79;--soft:#B0BFC0;--rule:#B0BFC040}
.chapter-close{--ground:#EEE9DF;--ink:#243D3D;--accent:#C59A50;--accent-ink:#79551F;--soft:#526965;--rule:#243D3D33}

/* Scenes */
.scene{position:absolute;inset:0;padding:92px 110px;color:var(--ink);opacity:0;visibility:hidden;transition:opacity .55s ease,transform .95s cubic-bezier(.16,1,.3,1),visibility 1s;transform:translate3d(65px,0,0)}
.scene.current{opacity:1;visibility:visible;transform:none;transition-delay:.18s,0s,0s}
.scene.departed{transform:translate3d(-80px,0,0)}
.scene a{pointer-events:auto;color:inherit}

/* Reveals: a beat shows everything whose range includes it; nothing depends on the previous click. */
.scene [data-from],.scene [data-at]{opacity:0;visibility:hidden;transform:translate3d(0,16px,0);transition:opacity .5s ease,transform .85s cubic-bezier(.16,1,.3,1),visibility .5s}
.scene [data-from].on,.scene [data-at].on{opacity:1;visibility:visible;transform:none}
.scene:not(.current) [data-from],.scene:not(.current) [data-at]{visibility:hidden}
.scene .from-left{transform:translate3d(-60px,0,0)}
.scene .from-right{transform:translate3d(60px,0,0)}
.scene .no-move{transform:none}
.scene.snap *,.reduce-motion .scene *{transition:none!important;animation:none!important}
.scene .faded{transition:opacity .6s,color .6s}
.scene .dim{opacity:.42}

/* Type */
h1,h2,h3,p,figure,blockquote,ul,ol{margin:0}
h1,h2{font-family:var(--serif);font-weight:800;letter-spacing:-.035em}
h1{font-size:178px;line-height:.98}
h2{font-size:96px;line-height:1.04}
p{font-size:42px;line-height:1.35}
.eyebrow{font-size:23px;letter-spacing:.23em;font-weight:700;text-transform:uppercase;margin:0 0 40px;color:var(--soft)}
.eyebrow.placed{position:absolute;left:110px;top:92px;margin:0}
.accent{color:var(--accent-ink)}
.soft{color:var(--soft)}
.hand{font-family:var(--hand);font-weight:500;letter-spacing:0}
.rule{display:block;width:165px;height:7px;background:var(--accent);margin:42px 0}
em{font-style:normal}
.serif{font-family:var(--serif);font-weight:500;letter-spacing:-.025em}
.small{font-size:27px;line-height:1.35;color:var(--soft)}
.footnote{position:absolute;left:110px;bottom:40px;right:300px;font-size:20px;line-height:1.35;color:var(--soft)}
.footnote a{text-decoration:none;border-bottom:1px solid var(--rule)}
.footnote a:hover{color:var(--ink);border-color:currentColor}
.credit{position:absolute;left:110px;bottom:92px;font-size:24px;color:var(--soft);letter-spacing:.02em}

/* Focus hold: the series' four words. */
.focus{display:flex;align-items:center;justify-content:center;text-align:center}
.focus h1{font-size:178px;line-height:1.15;letter-spacing:-.04em}
.focus .single-rule{height:3px;width:80px;background:var(--accent);margin:65px auto 0}

/* Title card, in the poster's voice. */
.title h1{margin-top:86px;max-width:1500px;text-transform:uppercase;font-size:172px}
.title .speaker{margin-top:54px;font-size:44px;font-weight:500}
.title .venue{margin-top:12px;font-size:29px;letter-spacing:.02em;color:var(--soft)}
.title .edition{position:absolute;right:120px;top:98px;display:flex;gap:15px;align-items:center;font-size:25px;letter-spacing:.12em;text-transform:uppercase}
.title .edition::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent)}
.partner-strip{position:absolute;left:110px;bottom:84px;display:flex;gap:50px;align-items:center}
.partner-strip img:first-child{width:305px;height:auto}
.partner-strip .partner-divider{height:64px;width:1px;background:#4A5473}
.partner-strip svg{width:236px;height:auto;fill:currentColor}

/* Statement: one sentence given the whole stage. */
.statement{display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column}
.statement h2{font-weight:500;font-size:112px;line-height:1.12;letter-spacing:-.035em;max-width:1560px}
.statement h2.big{font-size:150px;font-weight:800}
.statement h2 .accent{color:var(--accent-ink)}
.statement .sub{margin-top:44px;font-size:40px;color:var(--soft);max-width:1300px;line-height:1.35}
.statement .stack{display:grid;gap:34px}
.statement .stack h2{font-size:92px}

/* Lede: eyebrow, heading, a line or two. */
.lede h2{font-weight:800;font-size:92px;max-width:1100px}
.lede .sub{margin-top:30px;font-size:42px;max-width:980px;color:var(--ink)}
.lede .sub.soft{color:var(--soft)}
.lede .lines{margin-top:48px;display:grid;gap:22px;max-width:1120px}
.lede .lines p{font-family:var(--serif);font-weight:500;font-size:50px;line-height:1.22;letter-spacing:-.02em}

/* Source plate: a document rendered as itself. */
.plate{position:absolute;left:110px;top:230px;width:1100px}
.plate .plate-meta{font-size:24px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--soft);display:flex;gap:28px;align-items:center}
.plate .plate-meta::before{content:'';width:46px;height:2px;background:var(--accent)}
.plate .plate-title{font-family:var(--serif);font-weight:500;font-size:84px;line-height:1.08;letter-spacing:-.03em;margin-top:26px}
.plate .plate-byline{margin-top:18px;font-size:32px;color:var(--soft)}
.plate .plate-excerpt{margin-top:52px;font-family:var(--serif);font-weight:400;font-style:italic;font-size:56px;line-height:1.25;letter-spacing:-.015em;max-width:1200px}
.plate .plate-excerpt b{font-weight:500;font-style:normal;color:var(--accent-ink)}
.plate .plate-note{margin-top:28px;font-size:28px;line-height:1.4;color:var(--soft);max-width:1000px}
.plate.wide{width:1700px}
.plate.centered{left:50%;transform:translateX(-50%);text-align:center;width:1500px}
.plate.centered .plate-meta{justify-content:center}
.plate.centered .plate-meta::before{display:none}

/* Quote: a sentence with its attribution. */
.quote blockquote{font-family:var(--serif);font-size:96px;font-weight:500;line-height:1.14;letter-spacing:-.035em;max-width:1560px}
.quote blockquote::before{content:'“';display:block;color:var(--accent);font-size:150px;line-height:.55;margin-bottom:26px}
.quote .attribution{margin-top:48px;font-size:32px;color:var(--soft);line-height:1.4}
.quote .attribution b{font-weight:500;color:var(--ink)}
.quote.centered{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.quote.centered blockquote::before{margin:0 auto 26px}

/* Numbers with their denominators. */
.figure{position:absolute;left:110px;top:200px}
.figure .value{font-family:var(--serif);font-weight:800;font-size:250px;line-height:.95;letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums}
.figure .label{margin-top:26px;font-size:44px;line-height:1.3;max-width:900px}
.figure .detail{margin-top:16px;font-size:27px;line-height:1.4;color:var(--soft);max-width:900px}
.figure.second{top:200px;left:1040px}
.figure.second .value{font-size:250px}

/* Postcards from Lecture I. */
.postcards{position:absolute;left:860px;top:120px;width:960px;height:860px;perspective:1800px}
.postcard{position:absolute;width:720px;background:var(--paper);padding:14px 14px 20px;box-shadow:0 30px 70px #05091a99;transform-origin:center;transition:transform 1.1s cubic-bezier(.16,1,.3,1),opacity .6s,visibility .6s,filter .9s}
.postcard img{display:block;width:100%;height:auto}
.postcard .caption{position:absolute;left:-290px;top:34px;width:300px;font-family:var(--hand);font-size:44px;line-height:1.05;color:var(--accent);text-align:right;transform:rotate(-4deg)}
.postcard .caption svg{position:absolute;right:-78px;top:18px;width:80px;height:50px;fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.postcard:nth-child(1){left:140px;top:60px;transform:rotate(-2.5deg)}
.postcard:nth-child(2){left:170px;top:250px;transform:rotate(1.8deg)}
.postcard:nth-child(3){left:120px;top:440px;transform:rotate(-1.2deg)}
.postcard:nth-child(4){left:190px;top:620px;transform:rotate(2.2deg)}
.recap[data-step="2"] .postcard:nth-child(1),.recap[data-step="3"] .postcard:nth-child(1),.recap[data-step="4"] .postcard:nth-child(1){transform:rotate(-2.5deg) translate3d(-30px,-60px,-160px);filter:brightness(.72)}
.recap[data-step="3"] .postcard:nth-child(2),.recap[data-step="4"] .postcard:nth-child(2){transform:rotate(1.8deg) translate3d(-20px,-70px,-150px);filter:brightness(.72)}
.recap[data-step="4"] .postcard:nth-child(3){transform:rotate(-1.2deg) translate3d(-25px,-70px,-140px);filter:brightness(.72)}
.recap .lede{position:absolute;left:110px;top:92px;width:700px}
.recap .lede h2{font-size:84px}
.recap .lines{position:absolute;left:110px;top:330px;width:700px;display:grid;gap:30px}
.recap .lines p{font-family:var(--serif);font-weight:500;font-size:42px;line-height:1.22;letter-spacing:-.02em;padding-left:34px;border-left:3px solid var(--rule)}
.recap .lines p.on{border-color:var(--accent)}

/* The book and the portrait. */
.book-slide .portrait{position:absolute;right:150px;top:150px;width:420px}
.book-slide .portrait img{display:block;width:100%;height:520px;object-fit:cover;object-position:50% 30%;border:7px solid var(--paper);box-shadow:0 26px 60px #04081a99}
.book-slide .portrait figcaption{margin-top:16px;font-size:26px;color:var(--soft);text-align:center}
.book-slide .lede{position:absolute;left:110px;top:92px;width:760px}
.book-slide .lede h2{font-size:150px;line-height:.95;letter-spacing:-.05em}
.book-slide .lede .sub{margin-top:36px;font-size:40px}
.book-slide .keep{position:absolute;left:110px;bottom:150px;font-family:var(--serif);font-weight:500;font-size:64px;letter-spacing:-.025em;line-height:1.15;max-width:760px}
.book-slide .keep span{display:block;margin-top:18px;font-family:var(--sans);font-weight:400;font-size:30px;color:var(--soft);letter-spacing:0}

/* Cinema frames. */
.films .setup{position:absolute;left:110px;top:92px;width:1100px}
.films .setup h2{font-size:80px;font-weight:500;letter-spacing:-.03em;line-height:1.1}
.films .frames{position:absolute;left:290px;top:250px;width:1340px;height:760px;perspective:2200px}
.film{position:absolute;inset:0;background:#05070f;border:10px solid #0b0f1f;box-shadow:0 40px 110px #02040ccc;transform-origin:center;transition:transform 1.1s cubic-bezier(.16,1,.3,1),opacity .6s,visibility .6s,filter 1s}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#05070f}
.film .card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#E7E7E0;background:radial-gradient(ellipse at 50% 55%,#1a1f36 0%,#05070f 70%)}
.film .card .film-title{font-family:var(--serif);font-weight:800;font-size:124px;line-height:1;letter-spacing:-.03em;text-transform:uppercase}
.film .card .film-meta{margin-top:26px;font-size:30px;letter-spacing:.2em;text-transform:uppercase;color:#A9B1C6}
.film .card .film-line{margin-top:44px;font-family:var(--serif);font-style:italic;font-size:48px;color:#E0A028;max-width:1000px}
.film.has-clip .card{display:none}
.film.has-clip.missing .card{display:flex}
.film .reel{position:absolute;left:30px;top:24px;font-size:20px;letter-spacing:.2em;text-transform:uppercase;color:#A9B1C6;opacity:.7}
.films[data-step="2"] .film:nth-child(1){transform:none}
.films[data-step="3"] .film:nth-child(1){transform:translate3d(-90px,-50px,-260px) rotateY(9deg);filter:brightness(.45)}
.films[data-step="4"] .film:nth-child(1),.films[data-step="5"] .film:nth-child(1){transform:translate3d(-160px,-80px,-420px) rotateY(12deg);filter:brightness(.3)}
.films[data-step="4"] .film:nth-child(2),.films[data-step="5"] .film:nth-child(2){transform:translate3d(-100px,-50px,-280px) rotateY(10deg);filter:brightness(.45)}
.films[data-step="5"] .film:nth-child(3){transform:translate3d(-110px,-50px,-280px) rotateY(10deg);filter:brightness(.45)}
.films .oh{position:absolute;left:110px;top:92px;font-family:var(--hand);font-size:70px;color:var(--accent);line-height:1;transform:rotate(-3deg)}

/* Worldview model slides: text in the margins, the structure in the world. */
.model-slide .lede{position:absolute;left:110px;top:92px;width:900px}
.model-slide .lede h2{font-size:84px;max-width:900px}
.model-slide .lede .sub{margin-top:22px;font-size:36px;max-width:760px}
.model-slide .credit{bottom:62px;left:110px;font-size:24px}
.model-slide .credit b{font-weight:600;color:var(--ink)}
.model-slide .myth-note{position:absolute;right:120px;top:120px;width:560px;font-family:var(--hand);font-size:54px;line-height:1.05;color:var(--accent-ink);transform:rotate(-2deg);text-align:right}
.model-slide .film-cue{position:absolute;left:875px;bottom:92px;width:170px;height:96px;background:#05070f;border:4px solid #0b0f1f;box-shadow:0 14px 30px #0f1a3c55;display:flex;align-items:center;justify-content:center;color:#E7E7E0;font-size:18px;letter-spacing:.14em;text-transform:uppercase}
.example .lede{width:620px}
.example .lede h2{font-size:72px}
.example .column{position:absolute;left:110px;top:320px;width:620px;display:grid;gap:26px}
.example .experience{font-family:var(--serif);font-weight:500;font-size:52px;line-height:1.15;letter-spacing:-.025em;color:var(--ink)}
.example .experience small{display:block;font-family:var(--sans);font-weight:700;font-size:22px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-bottom:18px}
.example .fork{display:grid;gap:14px;margin-top:10px}
.example .fork p{font-size:34px;line-height:1.25;padding:16px 0 16px 28px;border-left:3px solid var(--rule);color:var(--soft);transition:color .6s,border-color .6s}
.example .fork p.chosen{color:var(--ink);border-color:var(--accent)}
.example .fork p b{display:block;font-size:22px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin-bottom:6px}
.example .beliefs{display:grid;gap:20px}
.example .beliefs p{font-family:var(--serif);font-weight:500;font-size:40px;line-height:1.18;letter-spacing:-.02em;padding-left:28px;border-left:4px solid var(--accent)}
.example .beliefs p small{display:block;font-family:var(--sans);font-weight:700;font-size:20px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);margin-bottom:8px}
.example .landing{position:absolute;left:110px;bottom:100px;width:760px;font-family:var(--serif);font-weight:500;font-size:48px;line-height:1.18;letter-spacing:-.025em}
.example .landing span{display:block;margin-top:14px;font-family:var(--sans);font-weight:400;font-size:28px;color:var(--soft);letter-spacing:0}

/* The mechanism as a numbered sequence. */
.sequence{position:absolute;left:110px;top:250px;width:1000px;display:grid;gap:0}
.sequence .step{display:grid;grid-template-columns:120px 1fr;gap:30px;align-items:baseline;padding:30px 0;border-top:1px solid var(--rule)}
.sequence .step:last-child{border-bottom:1px solid var(--rule)}
.sequence .step span{font-family:var(--serif);font-weight:500;font-size:44px;color:var(--accent-ink)}
.sequence .step h3{font-family:var(--serif);font-weight:500;font-size:58px;letter-spacing:-.025em;line-height:1.1}
.sequence .step h3 small{display:block;font-family:var(--sans);font-weight:400;font-size:28px;color:var(--soft);letter-spacing:0;margin-top:10px}

/* Exercises and the storytelling machine. */
.exercise .ask{position:absolute;left:110px;right:110px;top:300px;text-align:center}
.exercise .ask h2{font-size:104px;font-weight:500;letter-spacing:-.035em;line-height:1.12;max-width:1500px;margin:0 auto}
.exercise .ask .sub{margin-top:40px;font-size:38px;color:var(--soft)}
.exercise .two-frames{position:absolute;left:110px;right:110px;top:250px;display:grid;grid-template-columns:1fr 1fr;gap:60px}
.exercise .frame{border-top:3px solid var(--rule);padding-top:28px;min-height:520px}
.exercise .frame .label{font-size:23px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--soft)}
.exercise .frame .body{margin-top:30px;font-family:var(--serif);font-weight:500;font-size:48px;line-height:1.25;letter-spacing:-.02em}
.exercise .frame.told{border-color:var(--rule)}
.exercise .frame.retold{border-color:var(--accent)}
.exercise .frame.retold .label{color:var(--accent-ink)}
.exercise .question{position:absolute;left:110px;right:110px;bottom:120px;text-align:center;font-family:var(--serif);font-weight:500;font-size:88px;letter-spacing:-.035em}
.exercise .aha{position:absolute;left:110px;right:110px;top:220px;text-align:center}
.exercise .aha h2{font-size:92px;font-weight:500;letter-spacing:-.035em;line-height:1.14;max-width:1560px;margin:0 auto}
.exercise .aha .sub{margin-top:40px;font-size:38px;color:var(--soft);max-width:1300px;margin-left:auto;margin-right:auto}

/* Résumés fanning out of one sheet. */
.resumes .ask{top:120px}
.resumes .ask h2{font-size:84px}
.fan{position:absolute;left:300px;top:380px;width:1320px;height:620px;perspective:2000px}
.sheet{position:absolute;left:460px;top:0;width:400px;height:540px;background:#F6F3EB;color:#17233C;padding:40px 36px;box-shadow:0 30px 70px #10152e99;transform-origin:50% 100%;transition:transform 1.2s cubic-bezier(.16,1,.3,1),opacity .7s,visibility .7s}
.sheet .name{font-family:var(--serif);font-weight:800;font-size:30px;letter-spacing:-.02em}
.sheet .role{margin-top:10px;font-size:22px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#A66B45}
.sheet ul{margin:28px 0 0;padding:0;list-style:none;display:grid;gap:14px}
.sheet li{font-size:21px;line-height:1.3;color:#3b4660}
.sheet li b{display:block;font-weight:700;color:#17233C}
.resumes[data-step="1"] .sheet,.resumes[data-step="2"] .sheet{opacity:0;visibility:hidden}
.resumes[data-step="3"] .sheet:nth-child(1),.resumes[data-step="4"] .sheet:nth-child(1){transform:translateX(-600px) rotate(-7deg)}
.resumes[data-step="3"] .sheet:nth-child(2),.resumes[data-step="4"] .sheet:nth-child(2){transform:translateX(-200px) rotate(-2.5deg)}
.resumes[data-step="3"] .sheet:nth-child(3),.resumes[data-step="4"] .sheet:nth-child(3){transform:translateX(200px) rotate(2.5deg)}
.resumes[data-step="3"] .sheet:nth-child(4),.resumes[data-step="4"] .sheet:nth-child(4){transform:translateX(600px) rotate(7deg)}
.resumes .landing{position:absolute;left:110px;right:110px;bottom:70px;text-align:center;font-family:var(--serif);font-weight:500;font-size:52px;letter-spacing:-.03em}

/* The letter. */
.letter-slide .facts{position:absolute;left:110px;top:92px;width:640px}
.letter-slide .facts h2{font-size:72px;max-width:600px}
.letter-slide .facts ul{margin:40px 0 0;padding:0;list-style:none;display:grid;gap:18px}
.letter-slide .facts li{font-size:30px;line-height:1.3;padding-left:26px;border-left:3px solid var(--rule)}
.letter-slide .facts li b{display:block;font-family:var(--serif);font-weight:500;font-size:36px;letter-spacing:-.02em}
.letter{position:absolute;left:830px;top:70px;width:980px;background:#F6F3EB;color:#17233C;padding:70px 80px;box-shadow:0 40px 90px #0c1030aa;transform:rotate(1.2deg)}
.letter .letterhead{font-size:20px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:#A66B45}
.letter .salutation{margin-top:36px;font-family:var(--serif);font-weight:500;font-size:40px;letter-spacing:-.02em}
.letter p{margin-top:24px;font-family:var(--serif);font-size:30px;line-height:1.42;font-weight:400;letter-spacing:-.005em}
.letter p.punch{font-weight:500;color:#85502F}
.letter .sign{margin-top:36px;font-family:var(--hand);font-size:44px;color:#17233C}
.letter .disclaimer{margin-top:22px;font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:#7b8699}

/* Litany: lines that accumulate. */
.litany{position:absolute;left:110px;top:230px;width:1500px;display:grid;gap:26px}
.litany p{font-family:var(--serif);font-weight:500;font-size:68px;line-height:1.12;letter-spacing:-.03em}
.litany p.sum{margin-top:30px;color:var(--accent-ink);font-size:72px}
.litany.centered{text-align:center;left:110px;right:110px;width:auto}

/* Two-column comparison (the recurring premise). */
.columns{position:absolute;left:110px;right:110px;top:320px;display:grid;grid-template-columns:1fr 1fr;gap:80px}
.columns .col{border-top:3px solid var(--rule);padding-top:26px}
.columns .col .label{font-size:23px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--soft)}
.columns .col h3{margin-top:18px;font-family:var(--serif);font-weight:500;font-size:60px;letter-spacing:-.03em;line-height:1.1}
.columns .col .entries{margin-top:30px;display:grid;gap:22px}
.columns .col .entry{display:grid;grid-template-columns:120px 1fr;gap:22px;align-items:baseline}
.columns .col .entry time{font-family:var(--serif);font-weight:500;font-size:40px;color:var(--accent-ink)}
.columns .col .entry p{font-size:31px;line-height:1.3}
.columns .col .entry p i{font-family:var(--serif);font-style:italic}
.columns .col .cost{margin-top:34px;font-family:var(--serif);font-weight:500;font-size:46px;letter-spacing:-.025em;color:var(--ink);padding-left:26px;border-left:4px solid var(--accent)}
.columns .col .cost small{display:block;font-family:var(--sans);font-weight:700;font-size:21px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-bottom:8px}
.premise-bar{position:absolute;left:110px;right:110px;top:160px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:40px}
.premise-bar .end{font-size:26px;line-height:1.3;color:var(--soft);white-space:nowrap}
.premise-bar .end b{display:block;font-family:var(--serif);font-weight:500;font-size:44px;color:var(--ink);letter-spacing:-.02em}
.premise-bar .bar{height:8px;background:var(--accent);border-radius:4px;position:relative}
.premise-bar .bar span{position:absolute;left:50%;top:-76px;transform:translateX(-50%);font-family:var(--serif);font-weight:500;font-size:54px;letter-spacing:-.03em;white-space:nowrap}
.premise-slide .landing{position:absolute;left:110px;right:110px;bottom:60px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.premise-slide .landing p{font-family:var(--serif);font-weight:500;font-size:40px;line-height:1.2;letter-spacing:-.025em;max-width:1180px}
.premise-slide .landing small{font-size:22px;color:var(--soft);max-width:460px;line-height:1.35;text-align:right}

/* Dated list (the influential book, the creed). */
.dated{position:absolute;left:110px;top:300px;width:1120px;display:grid;gap:0}
.dated .row{display:grid;grid-template-columns:260px 1fr;gap:30px;align-items:baseline;padding:22px 0;border-top:1px solid var(--rule)}
.dated .row:last-child{border-bottom:1px solid var(--rule)}
.dated time{font-family:var(--serif);font-weight:500;font-size:38px;color:var(--accent-ink);white-space:nowrap}
.dated p{font-size:33px;line-height:1.3}
.dated p i{font-family:var(--serif);font-style:italic}
.dated p b{font-weight:500;font-family:var(--serif)}
.book-plate{position:absolute;right:120px;top:150px;width:500px;margin:0}
.book-plate .cover{width:380px;height:560px;background:#1b1b1f;color:#E7E7E0;padding:46px 40px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 30px 70px #1a140c66;border-left:14px solid #0d0d10}
.book-plate .cover .t{font-family:var(--serif);font-weight:800;font-size:58px;line-height:1;letter-spacing:-.03em}
.book-plate .cover .s{margin-top:16px;font-size:20px;letter-spacing:.14em;text-transform:uppercase;color:#A9B1C6;line-height:1.4}
.book-plate .cover .a{font-size:24px;letter-spacing:.1em;text-transform:uppercase}
.book-plate .note{margin-top:22px;font-size:22px;color:var(--soft);line-height:1.35;width:380px}

/* The creed column. */
.believe{position:absolute;left:1120px;top:110px;width:700px;display:grid;gap:6px}
.believe p{font-family:var(--serif);font-weight:500;font-size:46px;letter-spacing:-.025em;line-height:1.15;color:var(--soft);transition:color .6s,opacity .6s}
.believe p.lit{color:var(--ink)}
.believe p.lit b{color:var(--accent-ink);font-weight:500}
.creed-slide .plate{width:960px}
.creed-slide .alone{position:absolute;left:110px;right:110px;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.creed-slide .alone blockquote{font-family:var(--serif);font-weight:500;font-size:150px;letter-spacing:-.04em;line-height:1.05}
.creed-slide .alone .attribution{margin-top:46px;font-size:30px;color:var(--soft)}
.creed-slide .reading{position:absolute;left:110px;right:110px;bottom:110px;text-align:center;font-family:var(--serif);font-weight:500;font-size:54px;letter-spacing:-.03em;line-height:1.18}
.creed-slide .reading small{display:block;margin-top:16px;font-family:var(--sans);font-weight:400;font-size:24px;letter-spacing:.02em;color:var(--soft)}

/* The close. */
.closing .program{position:absolute;left:110px;top:330px;width:1700px;border-collapse:collapse;text-align:left;table-layout:fixed}
.closing .program tr{height:106px;border-top:1px solid var(--rule)}
.closing .program tr:last-child{border-bottom:1px solid var(--rule)}
.closing .program th{font:400 47px/1.15 var(--serif);letter-spacing:-.02em;padding:16px 30px 16px 0}
.closing .program td{padding:16px 0;vertical-align:middle}
.closing .program .n{width:105px;font:500 30px/1 var(--serif);color:var(--accent-ink)}
.closing .program .d{width:455px;text-align:right;font-size:33px;color:var(--accent-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.closing .program .tbc{color:#C1432B}
.closing .site{position:absolute;left:110px;bottom:92px;font-size:32px;color:var(--accent-ink)}

/* World labels projected from the model. */
.world-label{position:absolute;left:0;top:0;font-family:var(--serif);font-weight:500;font-size:40px;letter-spacing:-.02em;color:#17233C;opacity:0;transition:opacity .5s,color .5s;white-space:nowrap;will-change:transform}
.world-label.on{opacity:1}
.world-label.hi{color:#85502F}
.plinth-label{font-family:var(--sans);font-weight:700;font-size:26px;letter-spacing:.24em;text-transform:uppercase;color:#53626A}
.plinth-label.glow{color:#85502F}
.plinth-label em{font-family:var(--serif);font-weight:500;font-size:34px;letter-spacing:-.02em;text-transform:none}

/* Stage chrome */
#navigation{position:absolute;right:42px;bottom:24px;display:flex;align-items:center;gap:4px;z-index:20;opacity:.45;transition:opacity .25s;background:#0f1a3cbb;border:1px solid #A3ACC729;border-radius:40px;padding:3px 8px;backdrop-filter:blur(12px);color:#E7E7E0}
#navigation:hover,#navigation:focus-within{opacity:1}
#navigation button{background:none;border:0;font-size:31px;width:52px;height:48px;padding:4px}
#navigation #slide-picker{width:auto;min-width:137px;font-size:20px;letter-spacing:.08em}
#step-count{font-size:15px;color:#A3ACC7;display:block}
#progress{position:absolute;bottom:0;left:0;height:2px;background:var(--saffron);width:0;opacity:.7;transition:width 1s}
#presentation.chapter-culture #navigation,#presentation.chapter-archive #navigation,#presentation.chapter-close #navigation{background:#17233c14;border-color:#17233c22;color:#17233C}
#presentation.chapter-culture #step-count,#presentation.chapter-archive #step-count,#presentation.chapter-close #step-count{color:#53626A}
#presentation.quiet #navigation{opacity:0}
#presentation.quiet:hover #navigation,#presentation.quiet #navigation:focus-within{opacity:.7}
#presentation.quiet #progress{opacity:0}
#blackout{position:absolute;inset:0;background:black;z-index:90}
#error{position:absolute;left:40px;top:40px;background:#C1432B;color:var(--paper);padding:30px;z-index:100;font-size:28px;max-width:1400px}
dialog{background:var(--navy);color:var(--paper);border:1px solid #4A5473;border-radius:16px;padding:42px;width:min(1100px,92vw);box-shadow:0 40px 150px #0009}
dialog::backdrop{background:#080f23ce;backdrop-filter:blur(14px)}
dialog h2{font-size:42px}
dialog p{font-size:20px;color:#A3ACC7;margin-top:12px}
#slide-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:30px 0;max-height:60vh;overflow:auto}
#slide-list button{padding:16px 18px;text-align:left;font-size:20px;border:1px solid #4A5473;background:#152144;border-radius:8px;display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:baseline}
#slide-list button:hover{border-color:var(--saffron)}
#slide-list button span{font:500 22px var(--serif);color:var(--saffron)}
#slide-list button small{display:block;font-size:14px;color:#A3ACC7;margin-top:4px}
.close{position:absolute;right:25px;top:22px;background:none;border:0;font-size:30px}
dialog small{color:#A3ACC7;font-size:15px}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
.reduce-motion *,.reduce-motion *::before,.reduce-motion *::after{transition:none!important;animation:none!important}

/* Layers and alternatives: beats that replace one another share the same place. */
.layer{position:absolute;inset:0;padding:92px 110px}
.layer.quote{display:flex;flex-direction:column;justify-content:center}
.lede{position:absolute;left:110px;top:92px;width:1100px}
.lede .alt{position:absolute;left:0;top:72px;width:100%}
.lede .alt h2{font-size:84px;max-width:1000px}
.lede .alt .sub{margin-top:26px;font-size:38px;max-width:900px;line-height:1.35}
.lede .alt .lines{margin-top:40px}
.lede .alt-heading{position:absolute;left:0;top:72px}
.landing-line{position:absolute;left:110px;right:110px;bottom:120px;font-family:var(--serif);font-weight:500;font-size:60px;line-height:1.18;letter-spacing:-.03em;max-width:1500px}
.landing-line .soft{display:block;margin-top:14px;font-family:var(--sans);font-weight:400;font-size:30px;letter-spacing:0;color:var(--soft)}
.photo-slot{position:absolute;right:110px;top:240px;width:640px;height:440px;border:2px dashed var(--rule);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--soft);font-size:22px;padding:40px;line-height:1.4;overflow:hidden}
.photo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-slot img+figcaption{position:relative}
.photo-slot:has(img) figcaption{display:none}
.dated.compact .row{padding:15px 0}
.dated.compact p{font-size:30px}
.spectrum-scale{position:absolute;left:1000px;right:110px;bottom:120px;display:flex;justify-content:space-between;border-top:1px solid var(--rule);padding-top:18px}
.spectrum-scale .pt{font-size:26px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);transition:color .5s}
.spectrum[data-step="2"] .pt[data-step="2"],.spectrum[data-step="3"] .pt[data-step="3"],.spectrum[data-step="4"] .pt[data-step="4"],.spectrum[data-step="5"] .pt[data-step="4"]{color:var(--accent-ink);font-weight:700}
.god .litany{width:900px;top:260px}
.god .litany p{font-size:58px}
.god .litany p.sum{font-size:60px}
.believe p span{color:var(--soft)}
.creed-slide[data-step="4"] .alone{padding-bottom:300px}
.creed-slide .reading{z-index:2}
.statement .eyebrow{margin-bottom:60px}
.figure.second{top:200px;left:1040px}
/* World labels follow the chapter's ink. */
#presentation.chapter-stories .world-label,#presentation.chapter-suffering .world-label,#presentation.chapter-thou .world-label,#presentation.chapter-creed .world-label,#presentation.chapter-opening .world-label{color:#F1EADF}
#presentation.chapter-stories .plinth-label,#presentation.chapter-thou .plinth-label{color:#BBB9D1}
#presentation.chapter-stories .world-label.hi,#presentation.chapter-stories .plinth-label.glow{color:#D8AA5D}
#presentation.chapter-thou .world-label{opacity:0!important}

/* Layout pass one: keep headings clear of the pillar labels; keep the example's text on the stage. */
.model-slide .lede .alt h2,.model-slide .lede h2{font-size:70px;max-width:1100px}
.model-slide .lede .alt{top:70px}
.example .lede h2{font-size:70px;max-width:620px}
.example .column{top:330px;height:620px}
.example .experience{font-size:46px}
.example .experience small{margin-bottom:12px}
.example .fork,.example .beliefs{position:absolute;left:0;top:250px;width:620px}
.example .beliefs p{font-size:35px}
.example .beliefs p small{margin-bottom:6px}
.example .fork p{font-size:31px;padding:12px 0 12px 26px}
.postcards{left:820px;top:90px}
.postcard{width:640px;padding:12px 12px 16px}
.postcard:nth-child(1){left:150px;top:30px}
.postcard:nth-child(2){left:190px;top:190px}
.postcard:nth-child(3){left:140px;top:350px}
.postcard:nth-child(4){left:210px;top:510px}
.postcard .caption{left:-280px;top:26px;width:280px;font-size:40px}
.book-slide .lede .sub{max-width:700px}

/* Layout pass two. */
.sequence{top:230px}
.sequence .step{padding:20px 0;grid-template-columns:100px 1fr}
.sequence .step h3{font-size:50px}
.sequence .step h3 small{font-size:25px;margin-top:6px}
.sequence .step span{font-size:38px}
.letter{top:46px;padding:50px 64px 44px}
.letter .salutation{margin-top:26px;font-size:36px}
.letter p{margin-top:18px;font-size:27px;line-height:1.38}
.letter .sign{margin-top:26px;font-size:40px}
.letter .disclaimer{margin-top:16px}
.model-slide .film-cue{left:1250px;bottom:auto;top:800px}
.model-slide .lede .alt .sub{max-width:680px}
.kiln .plate-excerpt{font-size:46px;margin-top:34px}
.kiln .plate-note{margin-top:18px}
.premise-slide .landing{left:110px;right:auto;width:860px;top:790px;bottom:auto;display:block}
.premise-slide .landing p{font-size:36px;max-width:860px}
.premise-slide .landing small{display:block;text-align:left;margin-top:18px;max-width:700px}
.dated.compact .row{grid-template-columns:300px 1fr}
.dated.compact time{font-size:34px}
.god .layer.statement h2{max-width:1250px;margin-left:0;text-align:left;align-self:flex-start}
.god .layer.statement{align-items:flex-start;text-align:left}

/* Chapter boundaries: the atmosphere changes first, then the new slide enters. */
#presentation.crossing .scene.current{transition-delay:.9s,.9s,0s}

.god .litany{top:300px}

/* Tracking pass, October 21: Roberto found the big lettering too tight. Display sizes now sit near neutral; small type is unchanged. */
h1{letter-spacing:-.005em}
.title h1{letter-spacing:.005em}
.focus h1{letter-spacing:-.005em}
h2{letter-spacing:-.012em}
.book-slide .lede h2{letter-spacing:-.02em}
.statement h2{letter-spacing:-.012em}
.statement h2.big{letter-spacing:-.01em}
.quote blockquote{letter-spacing:-.01em}
.creed-slide .alone blockquote{letter-spacing:-.012em}
.creed-slide .reading{letter-spacing:-.01em}
.plate .plate-title{letter-spacing:-.01em}
.plate .plate-excerpt{letter-spacing:0}
.figure .value{letter-spacing:-.02em}
.exercise .ask h2,.exercise .aha h2,.exercise .question{letter-spacing:-.012em}
.exercise .frame .body{letter-spacing:-.008em}
.litany p,.landing-line{letter-spacing:-.01em}
.columns .col h3,.premise-bar .bar span,.sequence .step h3{letter-spacing:-.01em}
.film .card .film-title{letter-spacing:-.005em}
.resumes .landing,.example .landing,.book-slide .keep{letter-spacing:-.01em}
.lede .lines p,.recap .lines p{letter-spacing:-.008em}
.example .experience,.example .beliefs p{letter-spacing:-.01em}
.world-label{letter-spacing:-.01em}
/* Balance line breaks on display text so no heading ends on a one-word line. */
.statement h2,.quote blockquote,.lede h2,.lede .alt h2,.exercise .ask h2,.exercise .aha h2,.exercise .question,.creed-slide .reading,.landing-line,.plate .plate-title,.plate .plate-excerpt,.columns .col h3,.book-slide .keep{text-wrap:balance}
/* Clips are letterboxed inside the black frame rather than cropped: a scope-ratio film keeps its whole picture. */
.film video{object-fit:contain}

/* A definition in place of the headline: serif, smaller than a heading, balanced. */
.lede .alt.definition{top:36px}
.lede .alt.definition p{font-family:var(--serif);font-weight:500;font-size:46px;line-height:1.3;letter-spacing:-.01em;max-width:800px;text-wrap:balance;color:var(--ink)}
/* Elements revealed by data-until alone still hide like the others. */
.scene [data-until]{opacity:0;visibility:hidden;transform:translate3d(0,16px,0);transition:opacity .5s ease,transform .85s cubic-bezier(.16,1,.3,1),visibility .5s}
.scene [data-until].on{opacity:1;visibility:visible;transform:none}

/* The living system and its sources: text at the left, the diagram at the right, node labels centered on their anchors. */
.living .lede{width:820px}
.living .lede .alt h2{max-width:800px}
.living .lede .alt .sub{max-width:720px}
.world-label.node{font-size:36px}
.sources .litany{top:345px;width:980px;gap:16px}
.sources .litany p{font-size:52px;line-height:1.14}

/* I and Thou: the terms build under the title; the field at the right shows the two stances. */
.ithou .lede{width:840px}
.ithou .lede h2{font-size:92px}
.ithou .terms{position:absolute;left:110px;top:400px;width:840px;display:grid;gap:34px}
.ithou .term h3{font-family:var(--serif);font-weight:500;font-size:56px;letter-spacing:-.02em;line-height:1.1}
.ithou .term p{margin-top:8px;font-size:32px;line-height:1.35;color:var(--soft)}
.ithou .term.diff p{color:var(--ink)}
.false-thou .litany{width:900px;top:230px}
.false-thou .lede .alt h2{font-size:68px;max-width:900px}

/* The last beat: the words sit above the heart the field forms. */
.statement.heart-beat{justify-content:flex-start;padding-top:140px}

/* Onrie Kompan: a portrait and a cover at the left, his words at the right. */
.kompan .collage{position:absolute;left:110px;top:150px;width:680px;height:820px}
.kompan .portrait-card{position:absolute;left:0;top:30px;width:430px;background:var(--paper);padding:12px 12px 16px;box-shadow:0 30px 70px #15101a99;transform:rotate(-2.5deg)}
.kompan .portrait-card img{display:block;width:100%;height:540px;object-fit:cover;object-position:50% 20%}
.kompan .portrait-card figcaption{margin-top:12px;font-size:24px;color:#3B2E43;font-weight:600;text-align:center}
.kompan .cover-card{position:absolute;left:410px;top:400px;width:260px;background:var(--paper);padding:8px;box-shadow:0 30px 70px #15101a99;transform:rotate(3deg)}
.kompan .cover-card img{display:block;width:100%;height:auto}
.kompan .lede,.aci .lede{left:860px;width:950px}
.kompan .lede .alt h2,.aci .lede .alt h2{font-size:74px;max-width:930px}
.kompan .lede .alt .sub,.aci .lede .alt .sub{max-width:900px}
.kompan .kq,.aci .kq{position:absolute;left:0;top:72px;width:930px;margin:0;font-family:var(--serif);font-weight:500;font-size:42px;line-height:1.3;letter-spacing:-.01em;text-wrap:balance}
.kompan .kq footer,.aci .kq footer{margin-top:26px;font-family:var(--sans);font-weight:400;font-size:26px;color:var(--soft);letter-spacing:.02em}

/* Kiln photograph, supplied October 21: portrait, 842 by 1012 */
.kiln .photo-slot{top:170px;width:600px;height:720px}
.kiln .photo-slot:has(img){border:0;box-shadow:0 30px 70px #15101a99;overflow:visible}
.kiln .photo-slot:has(img) figcaption{display:block;position:absolute;left:0;right:0;top:100%;margin-top:20px;font-size:24px;line-height:1.4;color:var(--soft);text-align:left}

/* Manifesto column: the document's own sentences, then its two lists */
.believe{top:96px;width:690px;gap:10px}
.believe p{font-size:34px;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.believe p b{font-weight:500}
.believe p.also{margin-top:30px;font-family:var(--sans);font-weight:400;font-size:26px;line-height:1.35;letter-spacing:0;color:var(--soft)}
.believe p.also+p.also{margin-top:0}
.believe p.also b{font-weight:700;color:var(--ink)}

/* Ahmer Inam, Cognisee: a landscape photograph on a paper card at the left; the lede shares the Kompan rules */
.aci .photo-card{position:absolute;left:110px;top:230px;width:660px;background:var(--paper);padding:12px 12px 16px;box-shadow:0 30px 70px #0b1114aa;transform:rotate(-2deg)}
.aci .photo-card img{display:block;width:100%;height:auto}
.aci .photo-card figcaption{margin-top:14px;font-size:24px;color:#202D32;font-weight:600;text-align:center;line-height:1.3}
.aci .photo-card figcaption span{display:block;font-weight:400;font-size:20px;color:#53626A;margin-top:4px}

/* The real Superintelligence jacket, supplied October 21 */
.book-plate .jacket{display:block;width:500px;height:auto;box-shadow:0 30px 70px #1a140c66}
.book-plate figcaption{margin-top:18px;font-size:24px;color:var(--soft);letter-spacing:.06em;text-align:center}

/* R.U.R. photographs in place of the typeset book: an early production on the opening slide, a later one at the close */
.rur-open .stage-photo{position:absolute;left:110px;top:540px;width:740px;margin:0;background:var(--paper);padding:10px 10px 12px;box-shadow:0 30px 70px #05091a99}
.rur-open .stage-photo img{display:block;width:100%;height:auto}
.rur-open .stage-photo figcaption{margin-top:10px;font-size:22px;color:#4A5473;text-align:center}
.rur-open .keep{left:1350px;bottom:auto;top:770px;max-width:460px;font-size:44px}
.rur-open .keep span{font-size:28px}
.rur-close .photo-card{position:absolute;left:1330px;top:300px;width:360px;margin:0;background:#FFFDF8;padding:10px 10px 12px;box-shadow:0 30px 70px #2a241a55;transform:rotate(2deg)}
.rur-close .photo-card img{display:block;width:100%;height:auto}
.rur-close .photo-card figcaption{margin-top:10px;font-size:20px;color:#526965;text-align:center}

/* The retelling example: six excerpt pairs, Roberto's account beside Claude's retelling */
.exercise .two-frames.example{top:200px}
.exercise .frame .lines{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:14px;font-family:var(--serif);font-weight:500;font-size:32px;line-height:1.28;letter-spacing:-.008em}

/* AGI House on the god slide: a plate at the left, two quotations taking turns in one slot */
.god .plate{top:200px}
.god .plate .plate-byline{max-width:980px;font-size:30px;line-height:1.35}
.god .plate .plate-excerpt{font-size:44px;margin-top:34px;max-width:1040px}
.god .plate .plate-note{margin-top:18px}
.god .plate .swap{display:grid}
.god .plate .swap .slot{grid-area:1/1}
.god .plate .money{margin-top:26px;font-size:30px;color:var(--ink)}
.god .plate .money b{font-weight:600;color:var(--accent-ink)}