@font-face{font-family:"PT Sans";src:url("../spikes/vendor/ribbon/fonts/pt-sans-regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
:root{--ink:#263531;--paper:#f6eddb;--accent:#86563c;--muted:#656a61}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"PT Sans",Arial,sans-serif}a{color:inherit}.toolbar{position:fixed;z-index:30;left:0;right:0;top:0;display:flex;gap:20px;align-items:center;padding:9px 20px;background:var(--paper);font:15px Arial,sans-serif;border-bottom:1px solid #d8cfbd}.toolbar button{font:inherit;padding:4px 10px;border:1px solid #857b69;background:transparent;color:inherit}.reveal{font-family:"PT Sans",Arial,sans-serif;color:var(--ink);font-size:36px}.reveal .slides{text-align:left}.reveal .slides>section{height:720px;padding:64px 66px 70px}.reveal h1{font:normal 60px/1.16 "PT Sans",Arial,sans-serif;letter-spacing:-1px;margin:14px 0 35px;color:var(--ink);text-transform:none}.reveal .image-slide{padding:24px 40px 55px}.image-slide h1{font-size:42px;line-height:1.15;letter-spacing:-.5px;margin:0;height:66px;max-width:1170px}.image-slide img{display:block;width:100%;height:570px;object-fit:contain;margin:0;border:0;box-shadow:none}.image-slide.portrait{padding-left:70px}.image-slide.portrait h1{position:absolute;top:155px;left:70px;width:450px;font-size:65px}.image-slide.portrait img{position:absolute;right:50px;top:30px;width:610px;height:630px}.statement{font-size:48px;line-height:1.42;margin-top:65px}.short{font:34px/1.8 Arial,sans-serif;margin-left:45px}.proof{font:50px/1.7 "PT Sans",Arial,sans-serif}.proof strong{color:var(--accent)}.prompt{font-size:49px;line-height:1.4;margin-top:70px}.small{font:23px/1.5 Arial,sans-serif;color:var(--muted)}.story h1{margin-top:80px;font-size:66px}.scene{font:29px/1.6 Arial,sans-serif;max-width:1000px;margin-top:50px}.reveal footer{position:absolute;bottom:18px;left:40px;right:40px;display:flex;justify-content:space-between;font:15px Arial,sans-serif;color:var(--muted)}.notes{display:none}.reveal .progress{color:var(--accent)}.reading{max-width:900px;padding:35px 25px;margin:auto;font:20px/1.7 "PT Sans",Arial,sans-serif}.reading h1{font-size:43px;line-height:1.2}.reading h2{font-size:30px;margin-top:55px}.reading h3{font-size:23px}.reading nav{font:17px/1.7 Arial,sans-serif}.reading .meta{font:16px/1.6 Arial,sans-serif;color:var(--muted)}.reading section{border-top:1px solid #c9beaa;padding:20px 0}.reading pre{white-space:pre-wrap;font:17px/1.6 monospace}.reading img{max-width:100%}@media print{.reading nav{display:none}.reading{font-size:12pt}.reading section{break-inside:avoid}}@media(max-width:600px){.toolbar{gap:10px;font-size:12px;padding:6px;flex-wrap:wrap}}

/* Keep the warm paper canvas visible outside the scaled slide as well. */
html,html body,body .reveal,body .reveal .backgrounds{background:var(--paper)}
.reveal .slides>section.cover{padding:36px 56px 52px}
.cover h1{font-size:66px;line-height:1.06;letter-spacing:-1px;height:auto;max-width:1080px;margin:0}
.cover h1 .subtitle{display:block;font-size:34px;line-height:1.3;letter-spacing:0;margin-top:8px}
.cover .byline{font:21px/1.5 "PT Sans",Arial,sans-serif;color:var(--muted);margin:0;position:absolute;top:163px;left:56px}
.cover img{position:absolute;left:56px;top:213px;width:1168px;height:430px;object-fit:contain}

/* Feather only the outer paper margin. Size the image box to its pixels so
   the mask follows the illustration, rather than the object-fit letterbox.
   UV originals and interior colors stay unchanged. */
.image-slide img{
  width:auto;height:auto;max-width:100%;max-height:570px;margin:0 auto;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 3.5%,#000 96.5%,transparent),linear-gradient(to bottom,transparent,#000 3.5%,#000 96.5%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 3.5%,#000 96.5%,transparent),linear-gradient(to bottom,transparent,#000 3.5%,#000 96.5%,transparent);
  mask-composite:intersect;
}
.image-slide.portrait img{width:auto;height:630px;max-width:610px;max-height:630px}
.cover img{left:50%;transform:translateX(-50%);width:auto;height:430px;max-width:1168px;max-height:430px}

/* Preview frames need only the slide, without the full-size toolbar. */
body.speaker-preview .toolbar{display:none}

/* Split slides: bullets on the left, a smaller illustration on the right.
   Portrait slides keep their layout and add bullets under the title. */
.points{margin:0;padding-left:1.1em;font:30px/1.45 "PT Sans",Arial,sans-serif}
.points li{margin-bottom:12px}
.image-slide.split .side{position:absolute;left:40px;top:120px;width:520px}
.image-slide.split .points{padding-left:1.4em}
.reveal em{font-style:italic}
.reveal strong{font-weight:700}
.reveal .slides>section:not(.image-slide) .points{font-size:40px;line-height:1.4;padding-left:1.2em;margin-top:10px}
.image-slide.split .statement{font-size:40px;line-height:1.35;margin:20px 0 0}
.image-slide.split .scene{font-size:28px;margin:20px 0 0}
.image-slide.split img{position:absolute;right:40px;top:110px;max-width:660px;max-height:540px;margin:0}
.image-slide.portrait h1{top:60px;font-size:56px}
.image-slide.portrait .points{position:absolute;left:70px;top:150px;width:520px;font-size:25px}
.reveal footer .credit{flex:1;text-align:center;padding:0 20px;font-size:13px}
.reveal footer .credit a{color:var(--muted)}

/* Stepped triptych: each advance shades the other frames and captions them. */
.frames{position:relative;width:fit-content;margin:0 auto}
.frames .step{position:absolute;inset:0}
.frames .shade{position:absolute;top:0;bottom:0;background:rgba(246,237,219,.82);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.frames .caption{position:absolute;top:50%;transform:translateY(-50%);margin:0;padding:0 4%;box-sizing:border-box;
  text-align:center;font:36px/1.3 "PT Sans",Arial,sans-serif;color:var(--ink)}

/* Self-guided instruction slides: bundled deck font, so projection laptops
   without Arial match the rehearsal view. */
.reveal .short,.reveal .small{font-family:"PT Sans",Arial,sans-serif}
.reveal .small{margin-top:24px}
#hat-prompt .prompt{font-size:76px;line-height:1.2;margin-top:90px}
.image-slide.split .short{font-size:30px;line-height:1.45;margin-left:30px}
.image-slide.split .short li{margin-bottom:10px}

/* Rule tables for the card deals. */
.rules{border-collapse:collapse;margin:0 0 18px}
.rules th,.rules td{border:1px solid #c9beaa;padding:8px 22px;text-align:center}
.reveal .rules{font:34px/1.3 "PT Sans",Arial,sans-serif}
.reveal .rules th{font-size:24px;color:var(--muted);font-weight:400}
.reveal .rules td{font-weight:700;min-width:190px}
.reveal .rules+.short{font-size:28px;line-height:1.5}
/* PT Sans has no suit symbols; the fallback font varies by machine, so name the
   suit too and draw the symbol at normal weight, red for hearts and diamonds. */
.suit{font-family:"DejaVu Sans","Segoe UI Symbol","Apple Symbols",sans-serif;font-weight:400}
.suit.red{color:#b3261e}


/* Three deals on one slide, and the prediction table. */
#deals .rules{font-size:36px;margin-bottom:16px}
#deals .rules th,#deals .rules td{padding:6px 18px}
#deals .rules th{font-size:24px}
#deals .rules td{min-width:200px}
#deals .rules+.short{font-size:31px;line-height:1.4}
.reveal .rules.predict{margin-top:24px;font-size:40px}
.reveal .rules.predict td{min-width:300px;font-weight:400;text-align:left}
.reveal .rules.predict td .name{font-size:24px;color:var(--muted)}
.reveal .rules.predict tr.fragment:not(.visible) td{border-color:transparent}
/* Program 1 rule table. */
.reveal .rules.machine{font-size:32px}
.reveal .rules.machine td{min-width:0;font-weight:400;padding:6px 18px}
#add-rules .short{font-size:27px;line-height:1.35}
#add-rules .rules.machine{font-size:27px;margin:6px 0 8px}
#add-rules .rules.machine td,#add-rules .rules.machine th{padding:3px 18px}
.red{color:#b3261e}

/* Counter machine step cards, on slides: every number is tokens in a box. */
.steps{display:flex;gap:10px;margin-top:14px;flex-wrap:nowrap}
.steps .pos{display:flex;flex-direction:column;align-items:center;gap:4px}
.steps .posn{font:20px "PT Sans",Arial,sans-serif;color:var(--muted)}
.step-card{box-sizing:border-box;width:190px;padding:10px 10px 12px;border:2px solid #c9beaa;border-radius:14px;background:#fffdf7;font:18px/1.2 "PT Sans",Arial,sans-serif;display:flex;flex-direction:column;gap:7px;text-align:center}
.step-card strong{font-size:30px;letter-spacing:1px}
.step-card.add strong{color:#2f6b3a}.step-card.take strong{color:#86563c}
.step-card .say{font-size:17px;color:var(--muted)}
.step-card .box{display:flex;flex-direction:column;border:2px dashed #b9ad97;border-radius:8px;padding:3px 4px 5px;min-height:52px}
.step-card .box.index{border-color:#86563c;border-style:solid}
.step-card .lbl{font-size:15px;color:var(--muted)}
.step-card .tok{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;min-height:22px}
.step-card .tok i{width:16px;height:16px;border-radius:50%;background:#8a5a2b;display:inline-block}

.steps.example .step-card{width:280px;font-size:22px}
.steps.example+.short{margin-top:16px}
#machine-step .two-col{display:flex;gap:34px;align-items:flex-start;margin-top:10px}
#machine-step .two-col .steps{margin-top:0}
#machine-step .two-col .short{margin:0;font-size:28px;line-height:1.5}

/* Subroutines diagram and the ladder to any program. */
.sub-diagram{display:flex;align-items:center;gap:22px;margin-top:30px}
.sub-col{display:flex;flex-direction:column;gap:10px;align-items:center}
.sub-col .cap{font:22px "PT Sans",Arial,sans-serif;color:var(--muted)}
.mini{border:2px solid #c9beaa;border-radius:12px;background:#fffdf7;padding:10px 14px;font:22px/1.35 "PT Sans",Arial,sans-serif;text-align:center;width:230px}
.mini.big{width:270px;font-size:26px;padding:24px 14px}
.mini b{color:#86563c}
.sub-arrow{font-size:60px;color:var(--muted)}
.ladder{display:flex;flex-direction:column-reverse;gap:8px;list-style:none;margin:16px 0 0;padding:0;font:24px/1.3 "PT Sans",Arial,sans-serif}
.ladder li{border-left:8px solid #c9beaa;background:#fffdf7;padding:6px 16px;color:var(--muted)}
.ladder li b{color:var(--ink);margin-right:10px}
.ladder li:first-child{border-left-color:#2f6b3a}.ladder li:last-child{border-left-color:#86563c}
.reveal b{font-weight:700}
.reveal .ladder{font-size:28px;gap:10px}
.reveal .ladder li{padding:8px 18px}
.reveal .mini{font-size:24px;width:250px}
.reveal .mini.big{font-size:28px;width:290px}

/* Step cards hold written numbers. */
.step-card .box .num{font:700 30px/1.1 "PT Sans",Arial,sans-serif;color:var(--ink);min-height:30px}
.step-card .box.index .num{color:#86563c}
.steps.example .step-card .box .num{font-size:36px}
/* Every step card the same size; ADD keeps its spare space at the bottom. */
.steps{align-items:stretch}
.steps .pos{align-self:stretch}
.steps .pos>.step-card{flex:1;justify-content:flex-start}
#today .points{font-size:31px;line-height:1.3}
#today .points li{margin-bottom:10px}

/* Exercise 3: the layered postcard and macro cards. */
.term{font:italic 400 0.6em "PT Sans",Arial,sans-serif;color:var(--muted)}
.postcard{border:2px solid #c9beaa;border-radius:10px;background:#fffdf7;margin-top:12px;max-width:1100px}
.postcard .band{display:grid;grid-template-columns:300px 1fr;grid-template-rows:auto auto;column-gap:16px;padding:8px 16px;border-bottom:2px dashed #d8cfbd}
.postcard .band:last-child{border-bottom:0}
.postcard .band-head{grid-row:1/3;font:26px/1.2 "PT Sans",Arial,sans-serif;align-self:center}
.postcard .band-fields{display:flex;gap:24px;font:22px "PT Sans",Arial,sans-serif;color:var(--ink)}
.postcard .band-why{font:20px/1.3 "PT Sans",Arial,sans-serif;color:var(--muted)}
.postcard .field.wide{flex:1;border-bottom:1px solid #c9beaa}
.macros{display:flex;gap:16px;margin-top:14px}
.macro-card{flex:1;border:2px solid #c9beaa;border-radius:14px;background:#fffdf7;padding:12px 16px;font:22px/1.3 "PT Sans",Arial,sans-serif}
.macro-card strong{display:block;font-size:30px;color:#86563c;letter-spacing:1px}
.macro-card .who{display:block;font-size:18px;color:var(--muted);margin-bottom:6px}
.macro-card ol{margin:0;padding-left:1.2em}
.macro-card li{margin-bottom:4px}
#net-layers .postcard{max-width:none;margin-top:18px}
#net-layers .postcard .band{grid-template-columns:330px 1fr;padding:14px 20px}
#net-layers .postcard .band-head{font-size:30px}
#net-layers .postcard .term{display:block;font-size:20px}
#net-layers .postcard .band-fields{font-size:28px;gap:30px;white-space:nowrap}
#net-layers .postcard .band-why{font-size:23px;margin-top:4px}

/* Exercise 3: four kinds of postcard. */
.pcs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:10px}
.pc{border:2px solid #c9beaa;border-radius:10px;background:#fffdf7;font:18px/1.25 "PT Sans",Arial,sans-serif}
.pc-title{padding:4px 12px;border-bottom:2px solid #c9beaa}
.pc-title strong{font-size:22px;color:#86563c;letter-spacing:1px}
.pc-band{display:flex;gap:12px;padding:3px 12px;border-bottom:1px dashed #d8cfbd}
.pc-band:last-child{border-bottom:0}
.pc-head{width:170px;flex:none}
.pc-head .term{font-size:13px}
.pc-fields{display:flex;gap:16px;flex-wrap:wrap}
#net-kinds .pcs{gap:16px;margin-top:14px}
#net-kinds .pc{font-size:23px}
#net-kinds .pc-title strong{font-size:28px}
#net-kinds .pc-band{padding:6px 14px}
#net-kinds .pc-head{width:210px}
#net-kinds .pc-head .term{font-size:15px}
#net-kinds .pc{font-size:19px}
#net-kinds .pc-title strong{font-size:24px}
#net-kinds .pc-band{padding:3px 12px}
#net-kinds .pc-head{width:180px}
#net-kinds .pc-fields{gap:12px}
#today-recap .points{font-size:31px;line-height:1.3}
#today-recap .points li{margin-bottom:10px}

/* Phones: stop landscape text inflation, keep the toolbar to one compact line on
   short screens, and start the slide area below the toolbar instead of under it. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body .reveal{position:absolute;top:var(--bar,0px);left:0;right:0;bottom:0;width:auto;height:auto}
@media (max-height:500px){
  .toolbar{font-size:12px;padding:4px 10px;gap:10px;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto}
  .toolbar button{padding:2px 8px}
}
.demo-cols{display:flex;gap:50px;margin-top:6px}
.demo-cols .col{flex:1}
.demo-cols h3{font:bold 38px/1.2 "PT Sans",Arial,sans-serif;margin:0;color:var(--accent);text-transform:none}
.demo-cols .small{margin:4px 0 14px}
.demo-cols ul{margin:0;padding-left:1.1em;font-size:27px;line-height:1.45}
.demo-cols li{margin-bottom:8px}
.review-marker{border-left:5px solid var(--accent);padding-left:14px;margin-top:40px}
.demo-cols img{display:block;height:200px;width:100%;object-fit:contain;object-position:left center;margin-bottom:10px;border:0;box-shadow:none}
.demo-cols h3{font-size:34px}
.demo-cols ul{font-size:26px}
.reveal .demo-line{margin-top:10px}
.demo-cols img{height:170px;mix-blend-mode:multiply}
.demo-cols ul{font-size:25px}
.demo-cols li{margin-bottom:4px}
.demo-cols img{mix-blend-mode:normal;width:auto;max-width:100%;background:#fff;border-radius:10px;padding:8px}
.prompt-setup{font:32px/1.4 "PT Sans",Arial,sans-serif;color:var(--muted);margin-top:40px}
.reveal .prompt-setup+.prompt{margin-top:24px}