/* CC-18: compositions for script-v4.md. Slides rebuilt for v4 carry the id v4-NN; slides 9, 13, 15 and 21
   have their own stylesheets (v4-s09.css and so on) and are not styled here.
   Broadsheet only: type, hairlines and plain bars. */

/* The bullet style of the deck. One style everywhere: a short ink rule as the marker, Libre Franklin, 32 px.
   Size modifiers only come down for room (-md 30) or go up on a sparse slide (-lg 38); never below 26. */
.v4-bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:26px}
.v4-bullets li{position:relative;margin:0;padding-left:44px;font:400 32px/1.4 var(--sans);color:var(--ink)}
.v4-bullets li:before{content:'';position:absolute;left:0;top:.7em;width:22px;height:3px;background:var(--ink)}
.v4-bullets.v4-lg li{font-size:38px}
.v4-bullets.v4-md li{font-size:30px}
.v4-bullets.v4-roomy{gap:38px}
.v4-bullets.v4-xl li{font-size:36px}
.v4-slide p,.v4-slide li,.v4-slide h3{text-wrap:pretty}
.v4-slide .body p.v4-point,.v4-slide .body p.v4-punch{text-wrap:balance}
.v4-bullets strong{font-weight:600}
.v4-num{color:var(--accent);font-weight:600}
.v4-slide .body{padding-top:26px;gap:30px;justify-content:flex-start}
.v4-slide .variant-visual{gap:30px;justify-content:flex-start}
.slide[data-variant='bullets'] .variant-bullets{justify-content:flex-start;padding-top:26px}

/* Rows: a serif label and a sentence (slides 4 and 6). */
.v4-rows{display:flex;flex-direction:column;border-top:1px solid var(--rule-light)}
.v4-row{display:grid;grid-template-columns:400px 1fr;gap:40px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rule-light)}
.v4-row h3{font:400 40px/1.2 var(--serif);margin:0;letter-spacing:-.005em}
.v4-slide .body .v4-row p{font-size:32px;line-height:1.4}
.v4-slide .body p.v4-lead{font:400 32px/1.4 var(--sans)}
.v4-slide .body p.v4-sentence{font:400 32px/1.4 var(--sans)}
.v4-slide .body p.v4-point{font:italic 400 52px/1.2 var(--serif);color:var(--accent);letter-spacing:-.005em;border-top:1px solid var(--rule);padding-top:22px}
.v4-slide .body p.v4-punch{font:italic 400 52px/1.2 var(--serif);color:var(--accent);letter-spacing:-.005em;border-top:1px solid var(--rule);padding-top:22px}

/* 2 · Life 1.0 to 3.0 with Codex's figures. The loops run while the slide is on screen and stop under reduced motion, review, overview and print. */
.slide:not(.is-active){--t30-motion:paused}
.v4-life{display:grid;grid-template-columns:repeat(3,1fr)}
.v4-life-col{padding:0 48px;border-left:1px solid var(--rule-light)}
.v4-life-col:first-child{padding-left:0;border-left:0}
.v4-fig{display:flex;justify-content:center;height:260px;margin-bottom:16px}
.v4-fig svg{height:260px;width:auto;display:block}
.v4-life h3{font:400 42px/1.2 var(--serif);margin:0 0 12px;letter-spacing:-.005em}
.v4-slide .v4-life p{font-size:30px;line-height:1.4}
.v4-below{border-top:1px solid var(--rule);padding-top:22px}
.v4-slide .body .v4-below p{font-size:34px;line-height:1.4}

/* 5 · screening */
.v4-slide .body .visual-panel>.viz{width:490px;height:auto}
.v4-slide .body p.v4-dotcap{font:400 32px/1.4 var(--sans)}
.v4-slide .protein-facts p{font:400 36px/1.3 var(--serif)}
.v4-slide .build-first,.v4-slide .build-second{justify-content:flex-start}

/* 7 · chart right, text left */
.v4-chart-layout{position:static}
#v4-07 .body{justify-content:center;padding-top:0}
#v4-07 .v4-bullets{width:672px;gap:44px}
.v4-sent{display:inline-block}
#v4-07 .content{bottom:110px}
#v4-07 .v4-frame{position:absolute;right:0;top:-14px}
.v4-frame{margin:0;display:flex;flex-direction:column;gap:10px;justify-self:end}
.v4-frame-kicker{font:600 18px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.v4-crop{position:relative;overflow:hidden;border:1px solid var(--rule)}
.v4-crop img{position:absolute;display:block}
.v4-frame-cite{font:400 19px/1.45 var(--sans);color:var(--ink-soft)}
.v4-chart-layout .v4-frame{width:570px}
.v4-chart-layout .v4-crop{width:570px;aspect-ratio:1206/1520}
.v4-chart-layout .v4-crop img{width:100%;left:0;top:-5.263%}

/* 8 · four findings, then the quote */
.v4-quote{margin:0;border-top:1px solid var(--rule);padding-top:24px}
.v4-slide .body .v4-quote p{font:italic 400 52px/1.2 var(--serif);letter-spacing:-.005em;margin:0}
.v4-slide .body .v4-quote p.v4-attribution{font:400 26px/1.4 var(--sans);color:var(--ink-soft);margin:12px 0 0}

/* 11 · the horse beside the quote */
.v4-horse-top{display:grid;grid-template-columns:1fr 600px;gap:48px;align-items:center}
.v4-fig-horse{display:flex;justify-content:flex-end}
.v4-fig-horse svg{height:300px;width:auto;display:block}

/* 18 · two small bars beside the first bullet */
.v4-first-row{display:grid;grid-template-columns:1fr 520px;gap:60px;align-items:center}
.v4-minibars{width:520px;height:auto;display:block}

/* 20 · two studies */
.v4-studies{display:grid;grid-template-columns:1000px 1fr;gap:80px;align-items:start}
.v4-study{display:flex;flex-direction:column;gap:18px;padding-bottom:20px}
.v4-study+.v4-study{border-top:1px solid var(--rule-light);padding-top:20px;padding-bottom:0}
.v4-drawing{display:flex;flex-direction:column;gap:18px}
.v4-drawing .viz{width:100%;height:auto}
.v4-drawing .viz text{font-size:34px}
.v4-slide .body p.v4-drawing-label{font:400 28px/1.4 var(--sans)}

/* 23 · six labelled sentences, then the group chat */
.v4-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 56px;width:100%}
.v4-benefits article{border-top:1px solid var(--rule);padding-top:18px}
.v4-benefits h3{font:400 40px/1.2 var(--serif);margin:0 0 12px;letter-spacing:-.005em}
.v4-slide .body .v4-benefits p{font-size:30px;line-height:1.45}
.v4-shot{display:grid;grid-template-columns:1fr 719px;gap:96px;align-items:center;height:100%}
.v4-slide .body p.v4-shot-caption{font:400 64px/1.15 var(--serif);letter-spacing:-.01em}
.v4-chat{justify-self:end}
.v4-chat{border:1px solid var(--rule);gap:0;width:719px}
.v4-chat .v4-crop{width:717px;border:0}
.v4-chat .v4-crop img{width:953px;left:-234px}
.v4-gap{height:7px;border-top:1px solid var(--rule-light);border-bottom:1px solid var(--rule-light);background:#fff}
#v4-23 .content{bottom:130px}

/* 24 to 28 · the caption column is wider (620 px; 740 px on slide 24) so titles and captions take at most two lines; the clip stays large */
.v2-slide.recording-slide.rec-wide .content{right:1180px}
.v2-slide.recording-slide.rec-wide:not(.is-expanded) .recording-frame{left:790px;top:250px;width:1010px;height:568px}
.v2-slide.recording-slide.rec-wide.rec-wider .content{right:1060px}
.v2-slide.recording-slide.rec-wide.rec-wider:not(.is-expanded) .recording-frame{left:900px;top:250px;width:900px;height:506px}
.rec-wide .v4-bullets li{font-size:30px}

/* 3 · two statements and the quote, balanced */
#v2-03 .body{justify-content:center;gap:90px;padding-top:0}
#v2-03 .two-col{min-height:0;align-items:start}
#v2-03 .two-col .v2-large{font-size:72px;line-height:1.1}

/* Titles balance their lines so no title ends on a single word. */
.title{text-wrap:balance}

/* 6 · the second build appears with no motion */
#v4-06 [data-step]{transition:none!important}

.v2-slide.recording-slide .v2-video-caption{text-wrap:balance}

/* 6 · the first build sits in the middle of the body */
#v4-06 .build-first{justify-content:center}
.v4-slide .body p.v4-shot-caption{text-wrap:balance}