/* Course typography, palette and slide geometry follow Sessions 8–9. */
:root{--paper:#fff;--ink:#111;--muted:#565656;--line:#d7d7d7;--soft:#f5f3ee;--red:#e34f59;--pink:#f4b4c3;--blue:#365f96;--serif:"EB Garamond",Garamond,Georgia,serif;--sans:Inter,system-ui,sans-serif;--side:clamp(28px,5vw,76px);--h1:clamp(4rem,10vw,9rem);--h2:clamp(2.7rem,6.2vw,6.2rem)}
*{box-sizing:border-box}html{scroll-snap-type:y mandatory;scroll-behavior:smooth;background:var(--paper)}body{margin:0;color:var(--ink);font-family:var(--sans);background:var(--paper)}h1,h2,h3,p,figure,blockquote,ol,ul{margin:0}button,a,select{font:inherit;color:inherit}a{text-underline-offset:.22em}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--pink);outline-offset:3px}button:disabled{opacity:.35;cursor:default}[hidden]{display:none!important}
.slide{height:100svh;scroll-snap-align:start;scroll-snap-stop:always;position:relative;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(18px,2.2vw,30px) var(--side) 72px;border-bottom:1px solid var(--line);background:var(--paper)}.inner{width:100%;max-width:1320px;margin:auto;align-self:center;display:grid;gap:clamp(18px,2.5vw,32px);align-items:center}.title-copy{display:grid;gap:24px;max-width:1050px}h1,h2,h3,.statement,.dek,.body{font-family:var(--serif)}h1{font-size:var(--h1);line-height:.8;letter-spacing:-.055em;font-weight:600;max-width:10ch}h1 em{font-style:normal;color:var(--red)}h2{font-size:var(--h2);line-height:.91;letter-spacing:-.045em;font-weight:600;max-width:16ch}h2.wide{max-width:none}.demo h2{font-size:clamp(2.2rem,4.1vw,4.6rem);max-width:none}.kicker,.label{font:700 .75rem/1.25 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--red)}.dek{font-size:clamp(1.35rem,2.3vw,2.3rem);line-height:1.16;max-width:40ch}.body{font-size:clamp(1.1rem,1.6vw,1.6rem);line-height:1.3;max-width:44ch}.statement{font-size:clamp(3.3rem,7.4vw,7.6rem);line-height:.94;letter-spacing:-.045em;max-width:17ch}.red{color:var(--red)}.question{max-width:20ch}.rule{height:1px;background:var(--ink)}.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,70px);align-items:center}.two-up{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.example-label{font:700 .73rem/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;color:var(--muted)}.caption,.source{font:.8rem/1.4 var(--sans);color:var(--muted)}.source a{display:inline-block;min-height:24px}.prompt-question{font:500 clamp(1.2rem,2vw,1.8rem)/1.2 var(--serif)}
.progress{position:fixed;left:0;top:0;height:4px;background:var(--red);width:0;z-index:60;transition:width .2s}.counter{position:fixed;right:20px;top:18px;z-index:50;font:700 .72rem/1 var(--sans);letter-spacing:.12em;background:rgba(255,255,255,.94);padding:9px 11px;border:1px solid var(--ink);border-radius:999px}.controls{position:fixed;right:20px;bottom:18px;z-index:50;display:flex;gap:8px}.controls button{width:42px;height:42px;border:1px solid var(--ink);border-radius:50%;background:#fff}.course-links{position:fixed;left:var(--side);bottom:23px;z-index:50;display:flex;align-items:center;gap:16px;font:.72rem/1.2 var(--sans);background:rgba(255,255,255,.96);padding:6px 0}.course-links button{background:none;border:0;text-decoration:underline;text-underline-offset:4px;padding:0}.skip{position:fixed;top:-100px;left:12px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px}.skip:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;clip-path:inset(50%);overflow:hidden}.reveal{opacity:0;transform:translateY(10px)}.is-current .reveal{animation:reveal .45s ease forwards;animation-delay:var(--delay,0ms)}@keyframes reveal{to{opacity:1;transform:none}}
/* These deliberately contrasting web designs are the teaching material. */
.mock{padding:clamp(18px,2.5vw,32px);border:1px solid var(--line);background:#fff;display:grid;gap:15px;min-width:0}.mock h3{font-size:clamp(1.6rem,2.3vw,2.6rem);line-height:1.02;letter-spacing:-.025em}.mock p{font-size:.88rem;line-height:1.4}.mock .masthead{font:700 .65rem/1.3 var(--sans);letter-spacing:.13em;text-transform:uppercase}.ai{color:#fff;background:radial-gradient(at 10% 0%,#433180 0,transparent 55%),linear-gradient(130deg,#101126,#252056);border-color:#51488e;border-radius:18px;box-shadow:0 16px 30px #34226430;gap:17px}.ai h3{font-family:var(--sans);font-weight:800;color:#d9c5ff}.ai .masthead{color:#ccc4f7}.ai p{color:#d8d5ed}.pills{display:flex;gap:8px;flex-wrap:wrap}.pill{padding:5px 12px;border-radius:99px;font-size:.65rem;background:#6a50ae;box-shadow:0 4px 10px #0004}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.stat{min-width:0}.stat strong{display:block;font:600 clamp(1.6rem,2.7vw,3rem)/1 var(--serif)}.stat small{display:block;font:.72rem/1.3 var(--sans);margin-top:7px}.ai .stat{background:linear-gradient(130deg,#585395,#312b65);border:1px solid #8c74d9;border-radius:14px;box-shadow:0 8px 20px #07061a88;padding:18px 12px}.ai .stat strong{font-family:var(--sans);font-size:clamp(1.2rem,2.5vw,2.5rem);color:#c7cbff}.mini .mock{padding:20px;gap:14px}.mini .mock h3{font-size:clamp(1.3rem,2.1vw,2rem)}.mini .mock p{font-size:.82rem}.mini .ai .stat{padding:12px 8px}.mini .stat strong{font-size:1.5rem}.mini .stat small{font-size:.65rem}.editorial .masthead{color:var(--red);border-bottom:1px solid var(--ink);padding-bottom:10px}.editorial .takeaway{font-family:var(--serif);font-size:1.1rem;max-width:40ch}.editorial .stats{padding-block:16px;border-block:1px solid var(--line)}.mock .fiction{font:.65rem/1.4 var(--sans);color:inherit;opacity:.8}.mock .chart{width:100%;display:block;height:auto;max-height:190px}.mock .chart text{font-family:var(--sans)}.mini .chart{max-height:130px}.mock .byline{font:.65rem/1.3 var(--sans);color:var(--muted)}.equal h3,.equal .takeaway,.equal .byline,.equal .masthead{font:700 1.35rem/1.1 var(--sans);color:var(--blue);border:0;padding:8px;background:#eef2ff}.equal{gap:8px}.equal .byline{font-size:1.15rem}.editorial .source-note{font:.65rem/1.4 var(--sans);color:var(--muted)}
.annotated{display:grid;grid-template-columns:1.4fr .8fr;gap:24px;align-items:center}.pin{display:inline-grid;place-items:center;background:var(--red);color:white;font:700 .75rem/1 var(--sans);width:24px;height:24px;border-radius:50%;margin-right:7px;flex-shrink:0}.annotation-list{list-style:none;padding:0;display:grid;gap:16px}.annotation-list li{display:flex;align-items:start;font:500 1.03rem/1.3 var(--serif)}.annotation-list button{width:max-content;border:0;border-bottom:1px solid var(--ink);background:transparent;padding:5px 0;font:.8rem var(--sans)}.annotation-list li[data-step]{opacity:.2;transition:opacity .3s}.annotation-list li.revealed{opacity:1}.five-rules{list-style:none;padding:0;counter-reset:rule;display:grid;grid-template-columns:1fr 1fr;gap:20px 50px}.five-rules li{counter-increment:rule;display:flex;align-items:baseline;gap:20px;border-top:1px solid var(--ink);padding-top:12px;font:500 clamp(1.6rem,3vw,3rem)/1 var(--serif)}.five-rules li::before{content:counter(rule,decimal-leading-zero);font:700 .75rem var(--sans);color:var(--red)}.five-rules li:last-child{grid-column:1/-1}.type-bad{font-family:Georgia,serif!important;font-weight:700;line-height:.98!important;letter-spacing:-.03em;background:#f0ecf5;padding:12px}.type-bad h3{font-family:var(--sans);font-size:1.3rem;text-transform:uppercase;text-shadow:1px 2px #d6b5ff}.type-bad p{font-family:Georgia,serif;font-size:.82rem;font-weight:800;line-height:1;max-width:none}.type-good p{font:400 .95rem/1.6 Georgia,serif;max-width:52ch}.type-good h3{font-size:2.2rem}.type-spec{display:flex;flex-wrap:wrap;gap:10px 22px;font:.75rem/1.4 var(--sans);border-top:1px solid var(--line);padding-top:12px}.chart-compare .mock{gap:10px}.chart-compare h3{font-size:clamp(1.4rem,2.4vw,2rem)}.chart-compare .chart{max-height:245px}.distant-legend{display:flex;justify-content:end;gap:20px;font:.65rem var(--sans)}.distant-legend b:nth-child(1){color:#a14cce}.distant-legend b:nth-child(2){color:#168c88}.distant-legend b:nth-child(3){color:#df8e13}.reading-bad{gap:6px;padding:12px}.reading-bad h3{font:700 1.35rem var(--sans)}.reading-bad p{font:.78rem/1.03 var(--sans);max-width:none}.reading-bad .chart{width:42%;height:80px;justify-self:center}.reading-good p{max-width:48ch;font:.9rem/1.55 Georgia,serif}.reading-good h4{font:600 1.5rem var(--serif);margin:8px 0 0}.phone-row{display:grid;grid-template-columns:1.35fr .65fr;gap:36px;align-items:center}.phone{max-width:300px;border:2px solid var(--ink);border-radius:20px;padding:16px;background:var(--soft)}.phone .mock{padding:12px;gap:10px}.phone .mock h3{font-size:1.6rem}.phone .mock p{font-size:.85rem;line-height:1.45}.phone .chart{height:110px}.phone .tap{display:block;padding:12px 0;border-top:1px solid var(--line);font:.75rem var(--sans)}
.publications{display:grid;gap:18px}.publications a{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-top:18px;border-top:1px solid var(--ink);text-decoration:none;font:500 clamp(1.6rem,3.3vw,3.2rem)/1 var(--serif)}.publications span{font:.85rem/1.3 var(--sans);color:var(--muted)}.publication-example{display:grid;grid-template-columns:1.3fr .8fr;gap:32px;align-items:center}.publication-example figure{min-width:0;display:grid;gap:8px}.publication-example img{max-width:100%;width:100%;height:clamp(240px,48svh,470px);object-fit:contain;object-position:center;background:#fafafa;border:1px solid var(--line)}.publication-example .portrait{width:auto;max-width:100%;justify-self:center}.publication-example .points{display:grid;gap:20px}.points p{font:500 clamp(1.15rem,1.8vw,1.7rem)/1.15 var(--serif)}.points strong{display:block;font:700 .7rem/1.4 var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--red);margin-bottom:6px}.live-grid{display:grid;grid-template-columns:.85fr 1.4fr;gap:28px;align-items:center}.edits{padding-left:22px;display:grid;gap:12px;font:500 clamp(1rem,1.3vw,1.25rem)/1.2 var(--serif)}.live-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}.live-tools button,.live-tools a{font:.73rem/1.3 var(--sans);padding:8px 10px;min-height:36px;border:1px solid var(--ink);background:white;text-decoration:none}.live-tools button[aria-pressed=true]{background:var(--ink);color:white}.live-frame{margin:auto;width:100%;max-width:100%;transition:width .25s;border:1px solid var(--line);background:var(--soft)}.live-frame.mobile{width:375px}.live-frame iframe{width:100%;height:330px;border:0;display:block;background:white}.live-frame-tall iframe{height:380px}.prompt-bad{border-bottom:1px solid var(--line);padding:16px 0;display:grid;gap:12px}.prompt-bad blockquote{font:500 clamp(1.5rem,2.5vw,2.4rem)/1.15 var(--serif);color:var(--muted)}.prompt-good{border-left:4px solid var(--red);padding:18px 24px;background:var(--soft);display:grid;gap:14px}.prompt-good blockquote{font:500 clamp(1.15rem,1.8vw,1.65rem)/1.3 var(--serif);max-width:63ch}.exercise{display:grid;grid-template-columns:.65fr 1.35fr;gap:40px;align-items:center}.exercise .minutes{font:600 clamp(4rem,10vw,9rem)/.85 var(--serif);letter-spacing:-.05em;color:var(--red)}.exercise ol,.questions{list-style:none;padding:0;display:grid;gap:16px;counter-reset:q}.exercise li,.questions li{counter-increment:q;display:flex;gap:18px;align-items:baseline;font:500 clamp(1.25rem,2.2vw,2.15rem)/1.1 var(--serif)}.exercise li::before,.questions li::before{content:counter(q,decimal-leading-zero);font:700 .75rem var(--sans);color:var(--red)}.exercise .caption{grid-column:1/-1}.closing{max-width:1080px}.closing .statement{font-size:clamp(2.6rem,5.3vw,5.5rem)}.closing .dek{border-top:1px solid var(--ink);padding-top:24px;max-width:none}
.notes{max-width:min(720px,calc(100% - 32px));max-height:80svh;padding:28px;border:1px solid var(--ink);background:white;color:var(--ink)}.notes::backdrop{background:#0008}.notes header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.notes h2{font-size:2rem;max-width:none}.notes p{font:1rem/1.5 var(--sans);margin:12px 0}.notes button{padding:8px 12px;background:var(--soft);border:1px solid var(--ink)}.notes .label{font-size:.72rem;color:var(--red)}.notes a{font-size:.8rem}.notes ul{padding-left:20px;line-height:1.5}
@media(max-width:820px){:root{--side:20px;--h1:clamp(3.5rem,16vw,6rem);--h2:clamp(2.5rem,9vw,4rem)}.slide{padding:55px var(--side) 75px}.inner{gap:20px}.split{gap:22px}.demo h2{font-size:clamp(2rem,6vw,3rem)}.two-up{gap:14px}.mock{padding:18px}.annotated{grid-template-columns:1.2fr 1fr;gap:18px}.ai .stat{padding:12px 8px}.mock h3{font-size:1.7rem}.mock p{font-size:.8rem}.publication-example{grid-template-columns:1fr .8fr;gap:20px}.publication-example img{height:42svh}.live-grid{grid-template-columns:1fr;gap:18px}.edits{grid-template-columns:1fr 1fr;gap:8px 22px}.live-frame iframe{height:260px}.phone-row{gap:20px}.phone .mock h3{font-size:1.25rem}.course-links{gap:12px}.five-rules{gap:20px}.exercise{gap:25px}}
@media(max-width:540px){.slide{padding:56px 18px 74px}.inner{gap:16px}.title-copy{gap:24px}.statement{font-size:clamp(2.55rem,10vw,4rem)}.dek{font-size:1.35rem}.body{font-size:1.2rem}.two-up{gap:12px}.two-up.stack-mobile{grid-template-columns:1fr}.mini .mock{padding:12px;gap:9px}.mini .mock h3{font-size:1.22rem}.mini .mock p{font-size:.74rem;line-height:1.3}.mini .stats{gap:5px}.mini .ai .stat{padding:8px 5px}.mini .stat strong{font-size:1.15rem}.mini .stat small{font-size:.58rem}.mini .chart{height:100px}.mock .masthead{font-size:.55rem}.mock .fiction{font-size:.58rem}.pill{padding:4px 7px;font-size:.55rem}.stats{gap:8px}.ai .stat strong{font-size:1.5rem}.annotated{grid-template-columns:1fr;gap:14px}.annotated .mock{padding:14px;gap:10px}.annotated .mock .chart{height:95px}.annotated .mock h3{font-size:1.5rem}.annotation-list{grid-template-columns:1fr 1fr;gap:10px}.annotation-list li{font-size:.9rem;line-height:1.2}.pin{width:20px;height:20px;font-size:.65rem;margin-right:5px}.annotation-list .reveal-action{grid-column:1/-1}.five-rules{grid-template-columns:1fr;gap:18px}.five-rules li{font-size:1.8rem}.five-rules li:last-child{grid-column:auto}.equal h3,.equal .takeaway,.equal .byline,.equal .masthead{font-size:.95rem;padding:5px}.equal .byline{font-size:.8rem}.type-good h3{font-size:1.4rem}.type-spec{gap:6px;font-size:.64rem}.type-bad p{font-size:.72rem;line-height:1!important}.type-good p{font-size:.78rem;line-height:1.5}.chart-compare .two-up{grid-template-columns:1fr}.chart-compare .mock{padding:12px;gap:7px}.chart-compare .chart{height:125px}.chart-compare h3{font-size:1.25rem}.chart-compare .caption{font-size:.65rem}.chart-compare .example-label{margin-bottom:5px}.reading-bad p{font-size:.64rem}.reading-good p{font-size:.73rem}.reading-good h4{font-size:1.1rem}.reading-bad .chart{height:65px}.phone-row{grid-template-columns:1fr 1fr;gap:12px}.phone{padding:8px;border-radius:14px}.phone .mock{padding:8px}.phone .mock p{font-size:.7rem}.phone .mock h3{font-size:1.2rem}.phone .chart{height:100px}.phone .tap{font-size:.65rem;padding:10px 0}.phone-row>.mock{padding:12px}.phone-row>.mock h3{font-size:1.25rem}.phone-row>.mock p{font-size:.7rem}.phone-row>.mock .chart{height:120px}.publication-example{grid-template-columns:1fr;gap:12px}.publication-example img{height:29svh;max-height:260px}.publication-example .points{grid-template-columns:1fr 1fr 1fr;gap:10px}.points p{font-size:1rem}.points strong{font-size:.58rem}.publication-example .caption{font-size:.62rem}.publications a{flex-direction:column;gap:8px;font-size:2rem}.publications span{font-size:.8rem}.edits{font-size:.94rem;line-height:1.2;gap:10px 22px}.live-tools{gap:6px;margin-bottom:8px}.live-tools button,.live-tools a{font-size:.66rem;padding:7px;min-height:36px}.live-frame iframe{height:235px}.live-frame-tall iframe{height:330px}.prompt-good{padding:14px 16px;gap:10px}.prompt-good blockquote{font-size:1.15rem;line-height:1.22}.prompt-bad{padding:10px 0}.prompt-bad blockquote{font-size:1.4rem}.exercise{grid-template-columns:1fr;gap:20px}.exercise .minutes{font-size:4rem}.exercise ol{gap:14px}.exercise li{font-size:1.25rem}.exercise .caption{grid-column:auto}.questions li{font-size:1.7rem}.closing .statement{font-size:2.5rem}.closing .dek{font-size:1.55rem}.course-links{left:18px;gap:9px;bottom:27px;font-size:.62rem}.controls{right:14px;bottom:18px;gap:6px}.controls button{width:40px;height:40px}.counter{right:14px;top:14px}.source{font-size:.72rem}.caption{font-size:.73rem}}
@media(max-height:650px) and (min-width:821px){.slide{padding-top:45px;padding-bottom:64px}.inner{gap:14px}.demo h2{font-size:2.5rem}.mock{padding:16px;gap:10px}.mock .chart{max-height:140px}.mini .chart{max-height:100px}.publication-example img{height:260px}.live-frame iframe{height:230px}.statement{font-size:4.3rem}.dek{font-size:1.5rem}.mock h3{font-size:1.6rem}.five-rules{gap:14px}.prompt-good blockquote{font-size:1.25rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}
@media print{html{scroll-snap-type:none}.slide{height:auto;min-height:100vh;break-after:page;padding:36px}.controls,.counter,.progress,.course-links,.live-tools,.notes{display:none}.reveal{opacity:1;transform:none}.annotation-list li[data-step]{opacity:1}}
/* Keep the constructed full-page examples within a laptop projector viewport. */
@media(min-width:821px) and (max-height:800px){
  #slide-3 .mock{gap:10px;padding:18px}#slide-3 .mock h3{font-size:2rem}#slide-3 .mock .chart{max-height:115px}#slide-3 .ai .stat{padding:12px}
  #slide-4 .mock{gap:10px;padding:18px}#slide-4 .mock .chart{max-height:125px}#slide-4 .mock h3{font-size:1.85rem}#slide-4 .ai .stat{padding:12px}
  #slide-18 .live-frame iframe{height:330px}
}
@media(max-width:540px) and (max-height:740px){
  .slide{padding-top:44px;padding-bottom:65px}.inner{gap:12px}.demo h2{font-size:1.8rem}.mock{gap:10px;padding:14px}.mock h3{font-size:1.5rem}.mock .chart{max-height:105px}.ai .stat{padding:10px 8px}.mini .mock{padding:10px;gap:8px}.mini .mock h3{font-size:1.1rem}.mini .mock p{font-size:.7rem}.mini .chart{height:75px}.mini .stat strong{font-size:1rem}.mini .stat small{font-size:.55rem}.type-good h3{font-size:1.3rem}.type-good p{font-size:.75rem;line-height:1.5}.type-spec{font-size:.6rem}.chart-compare .chart{height:95px}.chart-compare .mock{gap:5px;padding:10px}.chart-compare h3{font-size:1.15rem}.chart-compare .caption{font-size:.6rem}.annotated .mock .chart{height:65px}.annotation-list{gap:8px}.annotation-list li{font-size:.85rem}.publication-example img{height:26svh}.live-frame-tall iframe{height:275px}.live-frame iframe{height:205px}.exercise{gap:14px}.exercise li{font-size:1.12rem}.exercise ol{gap:12px}.exercise .minutes{font-size:3.5rem}.prompt-good blockquote{font-size:1.08rem}.phone .chart{height:75px}
}
@media(max-width:540px) and (max-height:740px){#slide-10 .inner{gap:10px}#slide-10 .mock{padding:10px}}
/* Include the frame border so the inner desktop mobile preview is exactly 375px. */
.live-frame.mobile{width:377px}

#slide-6 .editorial-reason{max-width:none;font-size:clamp(2.5rem,6.6vw,6.8rem)}
@media(max-width:540px){#slide-6 .editorial-reason{font-size:clamp(1.5rem,6.5vw,2.5rem)}}

#slide-8 .hierarchy-heading{white-space:nowrap;font-size:clamp(1rem,4.1vw,4.6rem);letter-spacing:-.045em}

#slide-20 .implementer-heading{white-space:nowrap;font-size:clamp(1rem,4.1vw,4.6rem);letter-spacing:-.045em}

#slide-21 .exercise{grid-template-columns:1fr}

#slide-22 .share-heading{white-space:nowrap;font-size:clamp(1rem,4.1vw,4.6rem);letter-spacing:-.045em}

#slide-23 .closing{max-width:none}
#slide-23 .closing-statement{max-width:none;font-size:clamp(.75rem,3.7vw,4rem)}
#slide-23 .closing-line{display:block;white-space:nowrap}