/* === THEME: tokens, stage, typography, layouts ===
   The resting look of every slide. motion.css (screen only) animates towards it,
   so print and reduced motion show exactly this. */
:root{
  --bg:#f4f1ea; --ink:#12403f; --ink-soft:#3f5e5d; --muted:#7d8f8e;
  --teal:#0e7c7b; --teal-light:#e3efee; --rule:#12403f; --hair:rgba(18,64,63,.14);
  --mark:rgba(14,124,123,.065);
  --font-serif:'EB Garamond',Georgia,serif; --font-mono:'DM Mono',monospace;
  --stage-bg:#0d1f1f;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}

/* === viewport-base (mandatory) === */
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--stage-bg)}
.deck-viewport{position:fixed;inset:0;overflow:hidden;background:var(--stage-bg)}
.deck-stage{position:absolute;left:0;top:0;width:1920px;height:1080px;overflow:hidden;transform-origin:0 0;background:var(--bg)}
.slide{position:absolute;inset:0;z-index:0;width:1920px;height:1080px;overflow:hidden;display:block;visibility:hidden;opacity:0;pointer-events:none}
.slide.active{visibility:visible;opacity:1;pointer-events:auto;z-index:1}
img,video,canvas,svg{max-width:100%;max-height:100%}
@media print{@page{size:1920px 1080px;margin:0}html,body{width:1920px;height:auto;overflow:visible;background:#fff}.deck-viewport{position:static;overflow:visible;background:#fff}.deck-stage{position:static;width:auto;height:auto;transform:none!important;background:none}.slide{position:relative;display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;width:1920px;height:1080px;background:var(--bg);break-after:page;page-break-after:always}.slide:last-child{break-after:auto;page-break-after:auto}[data-runtime],#notesPanel,.edit-hotzone,.edit-toggle{display:none!important}}

/* === SLIDE CHROME === */
.slide{font-family:var(--font-serif);color:var(--ink);padding:90px 130px 80px}
.top{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:21px;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);border-bottom:2px solid var(--rule);padding-bottom:20px}
h1{font-size:150px;line-height:.95;font-weight:400;letter-spacing:-.01em}
h2{font-size:86px;line-height:1.02;font-weight:400;margin:64px 0 44px;max-width:1150px}
.ln{display:block}
h1 i,h2 i{color:var(--teal);background:linear-gradient(currentColor,currentColor) 0 94%/100% .03em no-repeat}
.lead{font-size:34px;line-height:1.45;color:var(--ink-soft);max-width:1050px}
ul{list-style:none;font-size:34px;line-height:1.35;max-width:1000px}
li{padding:14px 0 14px 46px;position:relative;background:linear-gradient(var(--hair),var(--hair)) 0 100%/100% 1px no-repeat}
li:last-child{background:none}
li::before{content:"—";position:absolute;left:0;color:var(--teal);font-family:var(--font-mono);transform-origin:0 50%}
li b{font-weight:500;color:var(--ink);background:linear-gradient(var(--mark),var(--mark)) 0 85%/100% .42em no-repeat}
.note{font-family:var(--font-mono);font-size:19px;letter-spacing:.06em;color:var(--muted);margin-top:34px;max-width:600px;line-height:1.5}
/* big outlined slide number in the background */
.slide::after{content:attr(data-n);position:absolute;left:60px;bottom:-.25em;z-index:-1;font:italic 400 560px/1 var(--font-serif);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:2px rgba(14,124,123,.1);pointer-events:none}

/* === PHOTO CARDS === */
.card{position:absolute;rotate:var(--r,0deg);box-shadow:0 34px 70px rgba(18,64,63,.24);background:#fff}
.card.a{--r:2deg}.card.b{--r:-1.5deg}.card.c{--r:1deg}.card.d{--r:-1deg}
.pic{width:100%;height:100%;overflow:hidden}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.card::before{content:"";position:absolute;inset:-18px;border:2px solid var(--teal);z-index:-1;rotate:-3deg}
.card.b::before{rotate:3deg}
.cap{position:absolute;left:0;right:0;top:calc(100% + 26px);font-family:var(--font-mono);font-size:22px;line-height:1.15;letter-spacing:.06em;color:var(--ink-soft);text-align:center}
/* technical slides: straight frames, calm shadows; diagrams shown whole */
.tech .card{--r:0deg;box-shadow:0 18px 40px rgba(18,64,63,.16)}
.tech .card::before{rotate:0deg;inset:-14px}
.card.whole img{object-fit:contain}
/* one tall card right */
.one .card{right:130px;top:230px;width:520px;height:690px}
.one .body{max-width:1000px}
/* two cards right, staggered */
.two .card.a{right:520px;top:250px;width:400px;height:530px}
.two .card.b{right:130px;top:420px;width:400px;height:530px}
.two .body{max-width:900px}
/* three cards strip at bottom, text on top */
.strip h2{margin-bottom:20px;font-size:76px;margin-top:50px}
.strip .lead{max-width:1500px;font-size:32px;margin-bottom:6px}
.strip .card{top:600px;width:410px;height:400px}
.strip .card.a{left:130px}.strip .card.b{left:660px}.strip .card.c{left:1190px}
/* strip with one hero photo: the students' own work leads */
.strip.hero .card{height:380px}
.strip.hero .card.a{width:760px;--r:-1deg}
.strip.hero .card.b{left:990px;width:350px}
.strip.hero .card.c{left:1440px;width:350px}
.strip.hero .card.a .cap{font-size:26px;color:var(--teal)}
/* three cards right: one tall, two stacked */
.trio .body{max-width:860px}
.trio ul,.trio ol{font-size:32px}
.trio .card.a{right:520px;top:250px;width:380px;height:500px}
.trio .card.b{right:130px;top:190px;width:340px;height:376px}
.trio .card.c{right:130px;top:664px;width:340px;height:316px}
/* four cards strip at bottom */
.strip.four .card{width:350px;height:380px;top:620px}
.strip.four .card.a{left:130px}.strip.four .card.b{left:567px}.strip.four .card.c{left:1004px}.strip.four .card.d{left:1440px}
.strip.four.tall .card{top:450px;height:530px}.strip.four.tall .lead{font-size:32px}
/* numbered steps */
ol.steps{font-size:32px;list-style:none;counter-reset:s;line-height:1.3;max-width:1000px}
ol.steps li{counter-increment:s;padding:10px 0 10px 64px;background-position:64px 100%;background-size:calc(100% - 64px) 1px}
ol.steps li::before{content:counter(s,decimal-leading-zero);transform-origin:50% 50%}
/* two columns of text */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:10px}
.cols h3{font-family:var(--font-mono);font-size:22px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-bottom:14px;font-weight:500}
.cols ul{font-size:30px;line-height:1.25}
.cols li{padding:6px 0 6px 40px}
/* side-by-side comparison: topic label, then Italy | Czech practice */
.versus{max-width:840px}
.versus .pair{display:grid;grid-template-columns:1fr 1fr;row-gap:6px}
.versus .k{grid-column:1/-1;font:500 21px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.versus .it{padding-right:28px}
.versus .cz{padding-left:28px;border-left:1px solid rgba(18,64,63,.28);color:var(--ink-soft)}
/* placeholder box */
.ph{border:2px dashed var(--teal);background:var(--teal-light);display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font-mono);font-size:19px;color:var(--teal);letter-spacing:.08em;padding:30px;line-height:1.6}
/* golden spiral figure under the list (slide with the golden ratio) */
.spiral{position:absolute;left:130px;bottom:26px;width:420px;fill:none;stroke:var(--teal)}
.spiral .sq{stroke-opacity:.3;stroke-width:2.4}
.spiral .arc{stroke-opacity:.8;stroke-width:4;stroke-dasharray:1;stroke-dashoffset:0}

/* === TITLE / CLOSING === */
.title h1{margin-top:110px;max-width:1000px}
.title .date{font-size:44px;margin-top:50px;color:var(--ink-soft)}
.title .coords{display:inline-block;margin-top:24px;font-family:var(--font-mono);font-size:22px;letter-spacing:.14em;color:var(--teal);clip-path:inset(0)}
.title .card{right:130px;top:260px;width:520px;height:660px}
.title .who{position:absolute;bottom:90px;left:130px;font-family:var(--font-mono);font-size:24px;color:var(--ink)}
.closing h1{margin-top:120px;font-size:140px}
.closing .card{width:780px;height:555px;top:270px;--r:-1deg}
.closing .thanks{margin-top:50px;font-size:34px;line-height:1.5;color:var(--ink-soft);max-width:820px}
/* on screen the closing slide turns dark teal, like the chapter curtain; print stays light */
@media screen{
  .closing{background:var(--ink);color:var(--bg)}
  .closing .top{color:#7fc7c2;border-color:rgba(244,241,234,.35)}
  .closing h1 i{color:#7fc7c2}
  .closing .thanks{color:rgba(244,241,234,.8)}
  .closing::after{-webkit-text-stroke-color:rgba(244,241,234,.12)}
  .closing .card::before{border-color:#7fc7c2}
}
.notes{display:none}