/* §15–§30 · maxxing guides — shared templates (slides are generated from structured content) */

.mx .mx-k { left: 96px; top: 132px; }
.mx-flow { display: flex; flex-direction: column; align-items: flex-start; }
.mx-h { font: 400 164px/.96 var(--f-display); text-transform: uppercase; color: var(--fg); letter-spacing: -.004em; }
.mx-h-xl { font-size: 184px; }
.mx-h-wide { font-size: 206px; }
.mx-tag { margin-top: 22px; }
.mx-p2 { color: var(--fg2); }
.mx .lead { font-size: 50px; line-height: 1.17; }
.mx .mx-p2.body, .mx .body.mx-p2 { font-size: 38px; }
.mx-fd .h2 { font-size: 124px; }
.xref { white-space: nowrap; background: linear-gradient(var(--acc), var(--acc)) no-repeat 0 100% / 100% .2em; }

/* topic · A: stacked text + giant outline index */
.mx-fa { left: 96px; top: 184px; width: 1120px; z-index: 2 !important; }
.mx-idx { right: 40px; top: 210px; font: 400 660px/.8 var(--f-display); color: transparent; -webkit-text-stroke: 3px var(--fg); opacity: .9; z-index: 0 !important; pointer-events: none; }
.mx-rule { font: 700 46px/1.06 var(--f-head); color: var(--fg); border-top: 6px solid var(--acc); padding-top: 18px; }
.mx-rule-box { left: 1300px; top: 830px; width: 524px; z-index: 3 !important; }
/* topic · B: split */
.mx-fb1 { left: 96px; top: 184px; width: 800px; }
.mx-fb2 { left: 980px; top: 214px; width: 844px; }
/* topic · C: banner */
.mx-fc { left: 96px; top: 180px; width: 1728px; }
.mx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 96px; width: 100%; }
/* topic · D: statement */
.mx-fd { left: 96px; top: 184px; width: 1240px; }
.mx-q { font-size: 54px; line-height: 1.28; }

/* list */
.mx-list-h { left: 96px; top: 184px; width: 1150px; }
.mx-ol { left: 96px; top: 480px; width: 1110px; }
.mx-ol li { font-size: 46px; margin-bottom: 22px; line-height: 1.12; }
.mx-side { left: 1290px; top: 490px; width: 534px; border-top: 6px solid var(--acc); padding-top: 18px; }
.mx-side .mono-s { display: flex; align-items: center; gap: 12px; }

/* myth (signal red) */
.mx-myth-stamp { left: 96px; top: 196px; font: 400 150px/.85 var(--f-display); text-transform: uppercase; color: var(--on-acc); background: var(--acc); box-shadow: inset 0 0 0 7px var(--acc), inset 0 0 0 12px var(--on-acc); padding: 22px 34px 36px; transform: rotate(-6deg); }
.mx-myth-q { left: 96px; top: 400px; width: 1680px; font: italic 400 76px/1.18 var(--f-serif); color: var(--fg); text-decoration: line-through; text-decoration-thickness: .09em; text-decoration-color: rgba(90,90,90,0); }
.flipped .mx-myth-q { text-decoration-color: var(--fg); opacity: .45; }
.mx-real { left: 96px; top: 640px; width: 1660px; }
.mx-real-h { font: 400 150px/.85 var(--f-display); text-transform: uppercase; }
.mx-real .lead { color: var(--fg); }
.mx-real .body { color: var(--fg2); }

/* facts panel */
.mx-ff { left: 96px; top: 184px; width: 820px; }
.mx-facts-panel { left: 1004px; top: 200px; width: 820px; }

/* stat */
.mx-num { left: 66px; top: 150px; font: 400 470px/.8 var(--f-display); color: var(--fg); white-space: nowrap; }
.mx-num .hl { padding: 0 .04em; }
.mx-num i { font-style: normal; font-size: .36em; margin-left: .3em; color: var(--fg); }
.mx-num i.ap { font-size: .3em; margin: 0 .45em 0 0; color: var(--muted); vertical-align: .9em; }
.mx-num-h { left: 96px; top: 610px; width: 860px; font-size: 58px; line-height: 1.04; }
.mx-fs { left: 1080px; top: 220px; width: 744px; }

/* visual: text column + signature diagram */
.mx-fv { left: 96px; top: 184px; width: 820px; }
.mx-vis { left: 980px; top: 150px; width: 844px; height: 800px; display: flex; align-items: center; justify-content: center; }
.mx-svg { width: 100%; height: 100%; overflow: visible; }
.mx-svg .ln { stroke: var(--fg); stroke-width: 3; vector-effect: non-scaling-stroke; fill: none; }
.mx-svg .ln.thin { stroke-width: 1.5; stroke: var(--fg2); }
.mx-svg .ln.acc { stroke: var(--acc); }
.mx-svg .ln.fat { stroke-width: 7; }
.mx-svg .ln.dash { stroke-dasharray: 8 10; }
.mx-svg .strand { stroke-width: 4; }
.mx-svg .dot { fill: var(--acc); stroke: none; }
.mx-svg .dot.fg { fill: var(--fg); }
.mx-svg .lbl { font: 400 30px var(--f-head); text-transform: uppercase; fill: var(--fg); stroke: none; letter-spacing: .01em; }
.mx-svg .sub { font: 400 17px var(--f-mono); fill: var(--muted); stroke: none; letter-spacing: .05em; text-transform: uppercase; }
.mx-svg .bar { fill: var(--muted); stroke: none; }
.mx-svg .bar.hot { fill: var(--acc); }
.mx-svg .wedge { stroke: var(--bg); stroke-width: 8; }
.mx-svg .wedge.veg { fill: #939393; } .mx-svg .wedge.pro { fill: #8a8a8a; } .mx-svg .wedge.gra { fill: #c0c0c0; }
.mx-svg .wedge ~ .lbl { fill: #111; } .mx-svg .wedge ~ .sub { fill: #383838; }
.mx-svg .gum { fill: rgba(158,158,158,.38); stroke: none; }
.mx-svg .skin1 { fill: #cecece; } .mx-svg .skin2 { fill: #b6b6b6; } .mx-svg .skin3 { fill: #d8d8d8; }
.mx-svg .band { stroke: var(--bg); stroke-width: 6; }
.mx-svg .band.b1 { fill: var(--acc); fill-opacity: .95; } .mx-svg .band.b2 { fill: var(--acc); fill-opacity: .6; } .mx-svg .band.b3 { fill: var(--acc); fill-opacity: .3; }
.mx-svg .frame { fill: var(--line); stroke: none; }
.mx-svg .frame.hot { fill: var(--acc); }

/* ascension vs cope closer */
.mx-cope-cols { left: 96px; top: 196px; width: 1728px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 96px; }
.mx-cope-h { font: 400 220px/.82 var(--f-display); text-transform: uppercase; color: var(--fg); }
.mx-cope-h.mut { color: var(--muted); }
.mx-asc li, .mx-cp li { position: relative; padding: 15px 0 15px 50px; border-bottom: 2px solid var(--line); font-size: 37px; line-height: 1.15; }
.mx-asc li::before { content: ''; position: absolute; left: 0; top: 26px; width: 22px; height: 22px; background: var(--acc); }
.mx-cp li { --k: 1; color: var(--fg2); text-decoration: line-through; text-decoration-thickness: 4px; text-decoration-color: color-mix(in srgb, var(--fg) calc(var(--k) * 100%), transparent); }
.mx-cp li::before { content: '\00d7'; position: absolute; left: 0; top: 8px; font: 400 48px/1 var(--f-display); color: var(--muted); }
.mx-cp li::after { content: none; }

/* section opener */
.mx-o-word { left: 62px; top: 176px; font: 400 300px/1.07 var(--f-display); text-transform: uppercase; color: var(--fg); white-space: nowrap; }
.mx-o-word span { display: inline-block; }
.mx-o-b { color: var(--on-acc); }
.mx-o-goal { left: 1060px; top: 196px; width: 764px; }
.mx-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.mx-chips span { font: 400 30px/1 var(--f-head); text-transform: uppercase; padding: 12px 18px 10px; border: 2px solid var(--fg); }
.mx-o-cav { left: 96px; top: 860px; width: 860px; }
.mx-o-cav .body { font-size: 33px; color: var(--fg2); }
.mx-o-goal .lead { font-size: 50px; }
.mx-chips span { font-size: 34px; }

/* §15 index */
.mx-ix-h { left: 96px; top: 184px; width: 1720px; }
.mx-ix-grid { left: 96px; top: 586px; width: 1728px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.mx-ix-t { border: 2px solid var(--line2); padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 8px; background: rgba(255,255,255,.02); }
.mx-ix-t b { font: 400 56px/.9 var(--f-display); color: var(--on-acc); background: var(--acc); width: max-content; padding: 6px 10px 0; }
.mx-ix-t:nth-child(even) b { background: none; color: var(--fg); box-shadow: inset 0 0 0 3px var(--fg); }
.mx-ix-t span { font: 400 30px/1 var(--f-head); text-transform: uppercase; color: var(--fg); }

/* receipts part two */
#sources-2 .so-h { left: 96px; top: 186px; }
#sources-2 .so-cols { left: 96px; top: 330px; width: 1728px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 72px; }
#sources-2 .so-list[start="17"] { counter-reset: s 16; }
#sources-2 .so-list[start="24"] { counter-reset: s 23; }
#sources-2 .so-list li { counter-increment: s; position: relative; padding-left: 52px; margin-bottom: 15px; font: 400 21px/1.32 var(--f-body); color: var(--fg2); }
#sources-2 .so-list li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 2px; font: 400 16px var(--f-mono); color: var(--fg); }
#sources-2 .so-list li b { font-weight: 600; color: var(--fg); }
#sources-2 .so-img { left: 96px; top: 984px; width: 1728px; text-transform: none; letter-spacing: .04em; }
.mx-svg .ln.ink { stroke: #000; }
.mx-svg .onband .lbl { fill: #000; }
.mx-svg .onband .sub { fill: #222; }

/* opener: a live 3D black pill parked bottom-right, cropped by the frame */
.mx-o-gl { left: 980px; top: 500px; width: 1100px; height: 640px; z-index: 0 !important; }
.mx-o-word, .mx-o-goal, .mx-o-cav, .mx .mx-k { z-index: 2 !important; }

/* photos: real prints from the deck, graded black and white, captioned in marker */
.mx-fp { left: 96px; top: 184px; width: 820px; }
.mx-fp .mx-h { font-size: 140px; }
.mx-prints { left: 990px; top: 150px; width: 834px; height: 850px; display: grid; gap: 30px 26px; }
.mx-prints.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.mx-prints.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; }
.mx-ph { position: relative; margin: 0; min-width: 0; background: #fff; padding: 12px; box-sizing: border-box; box-shadow: 0 24px 50px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3); }
.mx-prints.n4 .mx-ph { height: 410px; }
.mx-prints.n2 .mx-ph { height: 620px; }
.mx-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mx-ph figcaption { position: absolute; left: -14px; bottom: 30px; }
.mx-ph figcaption span { display: inline-block; font: 700 34px/1 var(--f-head); text-transform: uppercase; color: #fff; background: #000; padding: 9px 14px 5px; transform: rotate(-2deg); box-shadow: 0 6px 14px rgba(0,0,0,.25); }

/* ascension vs cope on the split slide: left column sits on white */
.split .mx-cope-cols > div:first-child { --fg: #000; --fg2: #222; --muted: #666; --line: rgba(0,0,0,.2); --acc: #000; --on-acc: #fff; color: #000; }
.split .mx-cope-cols > div:first-child .echo-ghost { -webkit-text-stroke-color: #000; }
.split .mx-k { --muted: #555; --acc: #000; color: #555; }

/* opener vocab row: three words you'll meet once you look this up */
.mx-o-vocab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; }
.mx-o-vocab .mono-s { flex: none; }
.mx-o-vocab b { display: inline-block; font: 400 34px/1.15 var(--f-head); text-transform: uppercase; color: var(--fg); background: linear-gradient(var(--acc), var(--acc)) no-repeat 0 100% / 100% .16em; }

/* §12 lexicon: one word per card, letterboxed */
.lex .mx-k, .rx .mx-k { left: 96px; top: 132px; z-index: 2 !important; }
.lex-flow { left: 96px; top: 176px; width: 1560px; display: flex; flex-direction: column; align-items: flex-start; z-index: 2 !important; }
.lex-term { font: 400 290px/.84 var(--f-display); color: var(--fg); white-space: nowrap; }
.lex-term.long { font-size: 200px; }
.lex-say { display: flex; align-items: baseline; gap: 12px; margin-top: 26px !important; font: 400 40px/1 var(--f-mono); letter-spacing: .04em; color: var(--fg2); }
.lex-say .syl { display: inline-block; padding: 6px 10px 4px; }
.lex-say i { font-style: normal; color: var(--muted); }
.lex-def { width: 1300px; }
.lex .lead { font-size: 50px; line-height: 1.17; }
.lex-use { width: 1300px; display: flex; gap: 20px; align-items: baseline; font: italic 400 36px/1.35 var(--f-serif); color: var(--fg); }
.lex-use .mono-s { font-style: normal; flex: none; }
.lex-tags { width: 1180px; display: flex; gap: 18px; align-items: center; }
.lex-tags .cite { font-size: 19px; }
.lex-n { right: 60px; top: 470px; font: 400 560px/.8 var(--f-display); color: transparent; -webkit-text-stroke: 3px var(--fg); opacity: .35; z-index: 0 !important; pointer-events: none; }
/* definition first, the word lands last at the bottom */
.lex-rv-top { left: 96px; top: 196px; width: 1150px; z-index: 2 !important; }
.lex-rv-top .lex-def { width: auto; font-size: 60px; line-height: 1.12; }
.lex-rv-side { left: 1330px; top: 210px; width: 494px; display: flex; flex-direction: column; gap: 30px; z-index: 2 !important; }
.lex-rv-side .lex-use { width: auto; flex-direction: column; gap: 12px; font-size: 31px; }
.lex-rv-side .lex-tags { width: auto; flex-wrap: wrap; }
.lex-rv-bot { left: 80px; bottom: 74px; width: 1760px; display: flex; flex-direction: column; align-items: flex-start; z-index: 2 !important; }
.lex-rv-bot .lex-term { font-size: 330px; }
.lex-rv-bot .lex-say { margin: 0 0 40px 16px !important; }
/* split: the word on white, what it means on black */
.lex-sp-l { left: 96px; top: 190px; width: 768px; height: 780px; display: flex; flex-direction: column; justify-content: center; z-index: 2 !important;
  --fg: #000; --fg2: #262626; --muted: #6b6b6b; --line: rgba(0,0,0,.16); --line2: rgba(0,0,0,.45); --acc: #000; --on-acc: #fff; color: #000; }
.lex-sp-l .lex-term, .lex-sp-l .lex-term.long { font-size: 210px; line-height: .9; white-space: normal; }
.lex-sp-r { left: 1056px; top: 190px; width: 768px; height: 780px; display: flex; flex-direction: column; justify-content: center; gap: 34px; z-index: 2 !important; }
.lex-sp-r .lex-def { width: auto; font-size: 44px; line-height: 1.18; }
.lex-sp-r .lex-use { width: auto; flex-direction: column; gap: 12px; font-size: 32px; }
.lex-sp-r .lex-tags { width: auto; flex-wrap: wrap; }
.split.lex .mx-k { --muted: #6b6b6b; --acc: #000; color: #6b6b6b; }
/* centred card, the number behind it */
.lex-cd { left: 160px; top: 168px; width: 1600px; display: flex; flex-direction: column; align-items: center; text-align: center; z-index: 2 !important; }
.lex-cd .lex-term { font-size: 250px; }
.lex-cd .lex-def, .lex-cd .lex-use, .lex-cd .lex-tags { width: 1240px; }
.lex-cd .lex-use { flex-direction: column; align-items: center; gap: 10px; }
.lex-cd .lex-tags { justify-content: center; flex-wrap: wrap; }
.lex[data-layout="lex-card"] .lex-n { left: 0; right: 0; top: 250px; text-align: center; font-size: 760px; opacity: .13; }
.lex-o-h { left: 66px; top: 170px; font: 400 300px/.84 var(--f-display); color: var(--fg); white-space: nowrap; }
.lex-o-sub { left: 96px; top: 480px; width: 1150px; }
.lex-o-list { left: 96px; top: 730px; width: 1728px; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.lex-o-list span { display: inline-block; font: 400 28px/1 var(--f-head); text-transform: uppercase; color: var(--fg); padding: 9px 12px 6px; border: 2px solid var(--line2); }
.lex-o-list span i { font: 400 14px/1 var(--f-mono); font-style: normal; color: var(--on-acc); background: var(--acc); padding: 3px 5px 2px; margin-right: 9px; vertical-align: 5px; }

/* §03 exhibit C: lookism, with receipts */
.rx-word { left: 66px; top: 170px; font: 400 330px/.84 var(--f-display); color: var(--fg); white-space: nowrap; z-index: 2 !important; }
.rx-find { left: 96px; top: 480px; width: 1120px; }
.rx .lead { font-size: 50px; line-height: 1.17; }
.rx-cite { left: 96px; top: 820px; width: 1120px; }
.rx-take .rx-cite { font-size: 36px; color: var(--fg2); top: 800px; }
.rx-stamp { left: 1300px; top: 540px; max-width: 540px; font-size: 92px; text-align: center; padding: 20px 28px 8px; box-shadow: inset 0 0 0 7px #000; z-index: 3 !important; }
.rx-o-h { left: 66px; top: 170px; font: 400 250px/.84 var(--f-display); color: var(--fg); white-space: nowrap; }
.rx-o-sub { left: 96px; top: 430px; width: 1300px; }
.rx-o-list { left: 96px; top: 620px; width: 1728px; display: flex; flex-wrap: wrap; gap: 6px 34px; }
.rx-o-list span { display: inline-block; font: 400 128px/.92 var(--f-display); text-transform: uppercase; color: var(--fg); }

/* the old rule box now holds a TAKE (an opinion, labelled as one) */
.mx-rule .tag { display: flex; width: max-content; margin-bottom: 14px; font-size: 15px; }
.mx-take-t { display: block; }

/* §03B / §11: the sad sections. quiet, slow, letterboxed */
.sad .sad-flow { left: 96px; top: 250px; width: 1640px; display: flex; flex-direction: column; align-items: flex-start; z-index: 2 !important; }
.sad .sad-h { font: 400 210px/.88 var(--f-display); text-transform: uppercase; color: var(--fg); }
.sad .sad-s { margin-top: 52px !important; width: 1300px; font: italic 400 52px/1.32 var(--f-serif); color: var(--fg2); }
.sad .sad-tag { margin-top: 30px; }
.sad .sad-cite { margin-top: 26px !important; }
.sad-open .sad-o-h { left: 66px; top: 230px; width: 1150px; font: 400 230px/.86 var(--f-display); text-transform: uppercase; color: var(--fg); z-index: 2 !important; }
.sad-open .sad-o-s { left: 96px; top: 860px; width: 1100px; font: italic 400 44px/1.3 var(--f-serif); color: var(--fg2); z-index: 2 !important; }
.sad-open .sad-gl { left: 980px; top: 110px; width: 940px; height: 860px; z-index: 0 !important; }
/* two real CSS-3D dice; they land on snake eyes */
.sad-open .dice { left: 1250px; top: 300px; width: 600px; height: 300px; display: flex; gap: 90px; perspective: 1400px; z-index: 1 !important; }
.die { position: relative; width: 220px; height: 220px; flex: none; transform-style: preserve-3d; }
.die i { position: absolute; inset: 0; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 28px; box-sizing: border-box; border-radius: 26px; background: #f2f2f2; box-shadow: inset 0 0 0 3px #000, inset 0 0 46px rgba(0,0,0,.28); backface-visibility: hidden; }
.die b { width: 40px; height: 40px; border-radius: 50%; background: #000; place-self: center; }
.die .f1 { transform: translateZ(110px); } .die .f6 { transform: rotateY(180deg) translateZ(110px); }
.die .f2 { transform: rotateY(90deg) translateZ(110px); } .die .f5 { transform: rotateY(-90deg) translateZ(110px); }
.die .f3 { transform: rotateX(90deg) translateZ(110px); } .die .f4 { transform: rotateX(-90deg) translateZ(110px); }
.die .f1 b { grid-area: 2 / 2; }
.die .f2 b:nth-child(1) { grid-area: 1 / 1; } .die .f2 b:nth-child(2) { grid-area: 3 / 3; }
.die .f3 b:nth-child(1) { grid-area: 1 / 1; } .die .f3 b:nth-child(2) { grid-area: 2 / 2; } .die .f3 b:nth-child(3) { grid-area: 3 / 3; }
.die .f4 b:nth-child(1), .die .f5 b:nth-child(1), .die .f6 b:nth-child(1) { grid-area: 1 / 1; }
.die .f4 b:nth-child(2), .die .f5 b:nth-child(2), .die .f6 b:nth-child(2) { grid-area: 1 / 3; }
.die .f4 b:nth-child(3), .die .f5 b:nth-child(3), .die .f6 b:nth-child(3) { grid-area: 3 / 1; }
.die .f4 b:nth-child(4), .die .f5 b:nth-child(4), .die .f6 b:nth-child(4) { grid-area: 3 / 3; }
.die .f5 b:nth-child(5) { grid-area: 2 / 2; }
.die .f6 b:nth-child(5) { grid-area: 2 / 1; } .die .f6 b:nth-child(6) { grid-area: 2 / 3; }
.sad-open .dice-l { left: 1250px; top: 680px; width: 600px; text-align: center; font: 400 26px/1 var(--f-mono); letter-spacing: .3em; text-transform: uppercase; color: var(--fg2); z-index: 2 !important; }

/* §03C opener: the long headline wraps instead of running off the slide */
.rx-o-h { font-size: 200px !important; width: 1780px; white-space: normal !important; }
.rx-o-list span { font-size: 110px !important; }
.sad .mx-k { left: 96px; top: 132px; z-index: 2 !important; }

.mx-num .hl::before { left: -.04em; right: -.04em; top: 0; bottom: .04em; }
.lex-say .syl.hl::before { top: -.16em; bottom: -.32em; }
/* receipts stickers: room for descenders, air between lines */
.rx-stamp { line-height: 1 !important; padding: 18px 26px 20px !important; }
/* the folio's P box on the white half of split slides */
.reveal section.split .folio .f-l { --acc: #000; --on-acc: #fff; }
.mx-svg .onink .lbl, .mx-svg .onink .sub { fill: var(--on-acc) !important; }
.mx-svg .band.b2 { fill-opacity: .42; } .mx-svg .band.b3 { fill-opacity: .16; }
/* "Reality." marker: clear the line under it */
.mx-real-h { margin-bottom: 40px !important; }

/* receipts, part three+ (the §03C studies) */
.so3 .so-h { left: 96px; top: 186px; }
.so3 .so-cols { left: 96px; top: 330px; width: 1728px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 72px; }
.so3 .so-list li { counter-increment: s; position: relative; padding-left: 52px; margin-bottom: 15px; font: 400 21px/1.32 var(--f-body); color: var(--fg2); }
.so3 .so-list li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 2px; font: 400 16px var(--f-mono); color: var(--fg); }
.so3 .so-list li b { font-weight: 600; color: var(--fg); }
/* diagram slides: a marked two-line headline + text column has to end above the frame edge */
.mx-fv .mx-h { font-size: 146px; }
.mx .mx-fv .lead { font-size: 46px; }
.mx .mx-fv .mx-p2.body { font-size: 34px; }
/* lists start right under a marked two-line headline */
.mx-ol { top: 452px !important; }
.mx-side { top: 462px !important; }
.mx-ol li { margin-bottom: 16px; }