/* topic slide layouts in the maxxing guides (owned by .source/maxx/topic-layouts.mjs; list looks by render.mjs list())
   Every layout is one root, .ly.ly-<name> (data-ly="<name>"), laid over the whole 1920x1080 canvas.
   Sizes the copy needs (headline px, columns) are measured at build time and arrive as inline styles. */

.mx .ly { left: 0; top: 0; width: 1920px; height: 1080px; }
.ly h2, .ly p.lead, .ly p.body, .ly p.q { display: flow-root; }   /* SplitText's last line mask can't stretch the box past the frame */
/* headlines set on measured lines; a descender marker gets room under its line, the marked line a little above it */
.ly .ly-ln { display: block; white-space: nowrap; }
.ly .ly-ln-d { margin-bottom: .14em; }
.ly .ly-ln-u { margin-top: .05em; }
.ly .h2 .ly-ln-d { margin-bottom: .21em; }   /* Oswald's descender marker hangs .27em */
/* the spine's lines turn into columns: the marker's sides face the neighbouring line, so the gaps are wider (= GAPS.spine) */
.ly .ly-sp-h .ly-ln-d { margin-bottom: .26em; }
.ly .ly-sp-h .ly-ln-m { margin-bottom: .15em; }
.ly .ly-sp-h .ly-ln-u { margin-top: .16em; }
.ly-tags { display: flex; gap: 12px; align-items: center; }
.ly-tags .mx-tag { margin-top: 0; }
.mx .ly .mx-rule { font-size: 38px; }
.ly .mx-rule .tag { margin-bottom: 12px; }

/* an inverted block inside a slide: black on white slides, white on black ones */
.reveal section.dark .ly-inv, .reveal section.grid .ly-inv {
  --fg: #000; --fg2: #262626; --muted: #5f5f5f; --bg: #f2f2f2; --line: rgba(0,0,0,.16); --line2: rgba(0,0,0,.45); --acc: #000; --on-acc: #fff; --x-c: #000; color: #000; background-color: #f2f2f2; }
.reveal section.paper .ly-inv, .reveal section.xerox .ly-inv {
  --fg: #fff; --fg2: #cfcfcf; --muted: #9a9a9a; --bg: #000; --line: rgba(255,255,255,.17); --line2: rgba(255,255,255,.45); --acc: #fff; --on-acc: #000; --x-c: #fff; color: #fff; background-color: #000; }

/* ---------- POSTER: enormous headline along the bottom, copy small in the top-right corner ---------- */
.ly-po-txt { right: 96px; top: 132px; width: 640px; }
.ly-po-txt .ly-tags { margin-bottom: 16px; }
.mx .ly-po-txt .lead { font-size: 30px; line-height: 1.25; }
.mx .ly-po-txt .mx-p2.body { font-size: 26px; line-height: 1.3; margin-top: 18px; }
.mx .ly-po-txt .mx-rule { font-size: 30px; margin-top: 26px; border-top-width: 5px; }
.ly-po-hw { left: 88px; bottom: 64px; width: 1744px; transform-origin: 0 100%; }
.ly-po-h { white-space: nowrap; line-height: .92; letter-spacing: -.01em; }

/* ---------- STACK: one word per line down the right edge; copy anchored bottom left ---------- */
.ly-sk-h { right: 132px; top: 126px; text-align: right; line-height: 1; }
.ly-sk-bar { left: 1810px; top: 136px; width: 14px; height: 868px; background: var(--fg); transform-origin: 50% 0; }
.ly-sk-txt { left: 96px; bottom: 70px; width: 780px; }
.ly-sk-txt .ly-tags { margin-bottom: 20px; }
.mx .ly-sk-txt .lead { font-size: calc(40px * var(--lys, 1)); line-height: 1.2; }
.mx .ly-sk-txt .mx-p2.body { font-size: calc(32px * var(--lys, 1)); line-height: 1.32; margin-top: 22px; }
.mx .ly-sk-txt .mx-rule { font-size: calc(36px * var(--lys, 1)); margin-top: 30px; }

/* ---------- SPINE: the headline runs up the left edge ---------- */
.ly-sp-hw { left: 96px; top: 1012px; width: 822px; transform-origin: 0 0; transform: rotate(-90deg); }
.ly-sp-h { white-space: nowrap; line-height: .95; }
.ly-sp-line { top: 192px; width: 4px; height: 820px; background: var(--fg); transform-origin: 50% 100%; }
.ly-sp-txt { top: 192px; height: 820px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.ly-sp-txt .ly-tags { margin-bottom: 22px; }
.mx .ly-sp-txt .lead { font-size: calc(52px * var(--lys, 1)); line-height: 1.18; }
.mx .ly-sp-txt .mx-p2.body { font-size: calc(36px * var(--lys, 1)); line-height: 1.3; margin-top: 30px; }
.mx .ly-sp-txt .mx-rule { font-size: calc(40px * var(--lys, 1)); margin-top: 34px; }

/* ---------- PULL: the lead as a pull quote behind a heavy bar; the headline is its label ---------- */
.ly-pq-top { left: 96px; top: 196px; width: 1600px; }
.ly-pq-h { font: 700 46px/1.12 var(--f-head); letter-spacing: .03em; color: var(--fg); }
.reveal .ly-pq-h { text-transform: uppercase; }
.ly-pq-top .ly-tags { margin-top: 18px; }
.ly-pq-bar { left: 96px; width: 24px; background: var(--fg); transform-origin: 50% 0; }
.ly-pq-q { left: 176px; width: 1560px; line-height: 1.3; color: var(--fg); }
.ly-pq-foot { right: 96px; bottom: 66px; width: 1000px; border-top: 2px solid var(--line2); padding-top: 22px; }
.mx .ly-pq-foot .mx-p2.body { font-size: 32px; line-height: 1.32; }
.mx .ly-pq-foot .mx-rule { font-size: 34px; margin-top: 30px; }

/* ---------- TABLOID: masthead, double rule, headline across, three ruled columns ---------- */
.ly-tb-name { left: 0; top: 104px; width: 1920px; text-align: center; font: 400 112px/1 var(--f-display); letter-spacing: .07em; color: var(--fg); }
.reveal .ly-tb-name { text-transform: uppercase; }
.ly-tb-ed { right: 96px; top: 132px; font: 400 19px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.ly-tb-r1 { left: 96px; top: 232px; width: 1728px; height: 10px; background: var(--fg); }
.ly-tb-r2 { left: 96px; top: 250px; width: 1728px; height: 3px; background: var(--fg); }
.mx .ly-tb-h { left: 96px; width: 1728px; line-height: 1; letter-spacing: -.005em; white-space: nowrap; }
.reveal .ly-tb-h { text-transform: uppercase; }
.ly-tb-cols { left: 96px; width: 1728px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 3px solid var(--fg); padding-top: 26px; }
.ly-tb-c { padding: 0 28px; min-width: 0; }
.ly-tb-c:first-child { padding-left: 0; }
.ly-tb-c:last-child { padding-right: 0; }
.ly-tb-c + .ly-tb-c { border-left: 2px solid var(--line2); }
.ly-tb-p1 { font: 400 calc(32px * var(--lys, 1))/1.34 var(--f-body); color: var(--fg); text-wrap: pretty; }
.ly-tb-p1::first-letter { float: left; font: 400 4.9em/.8 var(--f-display); margin: .05em .09em 0 0; color: var(--fg); }
.mx .ly-tb-p2.body { font-size: calc(28px * var(--lys, 1)); line-height: 1.36; }
.ly-tb-c .ly-tags { margin-bottom: 20px; }
.mx .ly-tb-side .mx-rule { font-size: calc(40px * var(--lys, 1)); border-top-width: 8px; }
.ly-tb-side .cite { margin-top: 24px !important; }
.ly-tb-no { display: flex; align-items: flex-end; gap: 16px; font: 400 calc(280px * var(--lys, 1))/.8 var(--f-display); color: var(--fg); }
.ly-tb-no span { font: 400 20px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding-bottom: 10px; }

/* ---------- FORUM: a thread in monospace ---------- */
.ly-fo-thread { left: 96px; width: 1728px; border: 2px solid var(--line2); background: color-mix(in srgb, var(--bg) 94%, var(--fg) 6%); }
.ly-fo-top { display: flex; gap: 34px; padding: 13px 24px 11px; background: var(--fg); color: var(--bg); font: 400 18px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; }
.ly-fo-top span:last-child { margin-left: auto; }
.ly-fo-head { display: flex; align-items: center; gap: 24px; padding: 28px 30px 24px; border-bottom: 2px dashed var(--line2); }
.ly-fo-h { font: 700 calc(60px * min(var(--lys, 1), 1.2))/1.12 var(--f-head); color: var(--fg); }
.ly-fo-post { display: grid; grid-template-columns: 76px 1fr; gap: 26px; padding: 26px 30px 24px; }
.ly-fo-re { margin-left: 96px; border-left: 5px solid var(--fg); border-top: 2px dashed var(--line2); }
.ly-fo-av { display: grid; place-items: center; width: 76px; height: 76px; background: var(--fg); color: var(--bg); font: 400 46px/1 var(--f-display); }
.ly-fo-post > div { min-width: 0; }
.ly-fo-re .ly-fo-av { background: none; color: var(--fg); box-shadow: inset 0 0 0 3px var(--fg); }
.ly-fo-meta { font: 400 17px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px !important; }
.mx .ly-fo-p1.lead { font: 400 calc(32px * var(--lys, 1))/1.45 var(--f-mono); color: var(--fg); letter-spacing: -.01em; }
.mx .ly-fo-p2.body { font: 400 calc(28px * var(--lys, 1))/1.45 var(--f-mono); letter-spacing: -.01em; }
.mx .ly-fo-thread .mx-rule { font-size: 34px; margin: 8px 30px 26px; }
.ly-fo-thread > .cite { margin: 0 30px 24px !important; }

/* ---------- CINEMA: letterbox, the lead in frame, the headline as the subtitle ---------- */
.ly-cn-bar { left: 0; width: 1920px; height: 170px; background: #000; }
.ly-cn-t { top: 0; transform-origin: 50% 0; }
.ly-cn-b { bottom: 0; transform-origin: 50% 100%; }
.reveal section.dark .ly-cn-t, .reveal section.grid .ly-cn-t { box-shadow: 0 2px 0 rgba(255,255,255,.3); }
.reveal section.dark .ly-cn-b, .reveal section.grid .ly-cn-b { box-shadow: 0 -2px 0 rgba(255,255,255,.3); }
.ly-cn-tc { right: 96px; top: 132px; font: 400 19px/1 var(--f-mono); letter-spacing: .2em; color: #9a9a9a; }
/* the slide's own evidence tag rides in the top bar, left of the timecode (the take line keeps the bottom bar) */
.ly-cn-tag { right: 300px; top: 121px; --fg: #fff; --bg: #000; --acc: #fff; --on-acc: #000; color: #fff; }
.ly-cn-tag .mx-tag { margin-top: 0; }
.ly-cn-frame { left: 0; top: 170px; width: 1920px; height: 600px; display: flex; align-items: center; justify-content: center; }
.mx .ly-cn-p1.lead { width: 1340px; text-align: center; line-height: 1.24; text-wrap: balance; }
.ly-cn-sub { left: 0; top: 784px; width: 1920px; text-align: center; font: 600 60px/1.42 var(--f-body); }
.ly-cn-sub span { background: #000; color: #fff; padding: 2px 22px 8px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.reveal section.dark .ly-cn-sub span, .reveal section.grid .ly-cn-sub span { background: #fff; color: #000; }
.ly-cn-cred { --fg: #fff; --fg2: #cfcfcf; --acc: #fff; --on-acc: #000; left: 180px; bottom: 22px; width: 1560px; height: 128px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.mx .ly-cn-p2.body { font: 400 22px/1.5 var(--f-mono); color: #cfcfcf; letter-spacing: .01em; text-wrap: balance; }
.ly-cn-take { display: flex; gap: 14px; align-items: center; font: 700 26px/1.1 var(--f-head); color: #fff; }
.ly-cn-take .tag { --fg: #fff; --bg: #000; font-size: 14px; padding: 6px 9px 5px; }
.ly-cn-take .tag:not(.take):not(.rec) { color: #fff; }
.mx .mx-k.ly-k-cn { z-index: 3 !important; }
/* on a white slide the bars are black: the kicker, folio and timecode in them go light */
.reveal section.paper:has(> .ly-cin) > .mx-k { --acc: #fff; color: #9a9a9a; }
.reveal section.paper:has(> .ly-cin) > .folio { --fg: #fff; --muted: #9a9a9a; --acc: #fff; --on-acc: #000; color: #9a9a9a; }

/* ---------- TICKER: the headline as a marquee band across the slide ---------- */
.ly-tk-top { left: 96px; top: 190px; width: 1240px; }
.ly-tk-top .ly-tags { margin-bottom: 18px; }
.mx .ly-tk-p1.lead { line-height: 1.2; }
.ly-tk-band { left: -200px; top: 486px; width: 2320px; height: 200px; transform: rotate(-3deg); background: var(--fg); overflow: hidden; display: flex; align-items: center; }
.ly-tk-track { display: flex; align-items: center; flex: none; white-space: nowrap; font-family: var(--f-display); line-height: 1; color: var(--bg); animation: ly-tick 40s linear infinite; will-change: transform; padding-top: .06em; }
.reveal .ly-tk-track { text-transform: uppercase; }
.ly-tk-c { padding: 0 .1em; }
.ly-tk-s { display: inline-block; flex: none; width: .3em; height: .3em; margin: -.08em .26em 0; background: var(--bg); transform: rotate(45deg); }
@keyframes ly-tick { to { transform: translateX(-50%); } }
.ly-tk-foot { right: 96px; bottom: 66px; width: 900px; }
.mx .ly-tk-foot .mx-p2.body { font-size: 32px; line-height: 1.32; }
.mx .ly-tk-foot .mx-rule { font-size: 34px; margin-top: 28px; }

/* ---------- SLAB: an inverted slab holds the headline; copy on the open side ---------- */
.ly-sl-panel { left: 0; top: 0; width: 800px; height: 1080px; }
.ly-sl-h { left: 96px; bottom: 92px; width: 640px; }
.ly-sl-txt { left: 900px; top: 180px; bottom: 70px; width: 924px; display: flex; flex-direction: column; justify-content: center; }
.ly-sl-txt .ly-tags { margin-bottom: 22px; }
.mx .ly-sl-txt .lead { font-size: calc(46px * var(--lys, 1)); line-height: 1.2; }
.mx .ly-sl-txt .mx-p2.body { font-size: calc(34px * var(--lys, 1)); line-height: 1.32; margin-top: 26px; }
.mx .ly-sl-txt .mx-rule { font-size: calc(40px * var(--lys, 1)); margin-top: 34px; }
/* the folio's left half sits on the slab */
.reveal section:has(> .ly-slab) > .folio .f-l { color: var(--sl-muted); }
.reveal section.dark:has(> .ly-slab) > .folio .f-l, .reveal section.grid:has(> .ly-slab) > .folio .f-l { --fg: #000; --acc: #000; --on-acc: #fff; --sl-muted: #555; }
.reveal section.paper:has(> .ly-slab) > .folio .f-l, .reveal section.xerox:has(> .ly-slab) > .folio .f-l { --fg: #fff; --acc: #fff; --on-acc: #000; --sl-muted: #9a9a9a; }

/* ---------- INDEX: the slide number, solid and enormous ---------- */
.ly-ix-n { left: 56px; top: 196px; font: 400 1030px/.8 var(--f-display); letter-spacing: -.03em; color: var(--fg); white-space: nowrap; }
.ly-ix-n span { display: inline-block; }
.ly-ix-txt { left: 1000px; top: 190px; width: 824px; height: 820px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.mx .ly-ix-h.h2 { font-size: calc(80px * var(--lys, 1)); }
.ly-ix-txt .ly-tags { margin-top: 24px; }
.mx .ly-ix-txt .lead { font-size: calc(38px * var(--lys, 1)); line-height: 1.22; margin-top: 30px; }
.mx .ly-ix-txt .mx-p2.body { font-size: calc(30px * var(--lys, 1)); line-height: 1.34; margin-top: 22px; }
.mx .ly-ix-txt .mx-rule { font-size: calc(36px * var(--lys, 1)); margin-top: 30px; }

/* ---------- MARKED: the lead as the big type, one sentence marked; headline in the side column ---------- */
.ly-mk-p1 { left: 96px; top: 196px; width: 1200px; }
.mx .ly-mk-p1.lead { line-height: 1.34; }
.ly-mk-rule { left: 1352px; top: 200px; width: 3px; height: 810px; background: var(--line2); transform-origin: 50% 0; }
.ly-mk-side { left: 1404px; top: 196px; width: 420px; }
.mx .ly-mk-h { font-size: 92px; line-height: 1; }
.ly-mk-side .ly-tags { margin-top: 22px; }
.mx .ly-mk-side .mx-p2.body { font-size: 28px; line-height: 1.36; margin-top: 30px; }
.mx .ly-mk-side .mx-rule { font-size: 30px; margin-top: 30px; }

/* ---------- JOURNAL: an academic page with a footnote ---------- */
.mx .mx-k.ly-k-jo { left: 300px; top: 148px; }
.ly-jo-run { right: 300px; top: 148px; font: 400 19px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.ly-jo-page { left: 300px; top: 196px; width: 1320px; border-top: 2px solid var(--fg); padding-top: 40px; }
.ly-jo-h { font: 400 var(--jo-t, 66px)/1.18 var(--f-serif); color: var(--fg); text-align: center; text-wrap: balance; }
.ly-jo-sup { font-size: .42em; vertical-align: 1em; line-height: 0; margin-left: .06em; }
.ly-jo-tags { justify-content: center; margin-top: 24px; }
.ly-jo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; margin-top: 46px; }
.mx .ly-jo-cols .lead, .mx .ly-jo-cols .mx-p2.body { font: 400 var(--jo-b, 27px)/1.6 var(--f-serif); color: var(--fg); text-wrap: pretty; }
.ly-jo-fnr { display: block; width: 260px; height: 2px; margin-top: 44px; background: var(--fg); }
.ly-jo-fn { margin-top: 14px !important; font-size: 20px; line-height: 1.45; }
.ly-jo-fn sup { margin-right: 8px; font-size: .8em; }
.mx .ly-jo-page .mx-rule { font-size: 32px; margin-top: 30px; }

/* ---------- MEMO: typed, on a photocopy ---------- */
.ly-me-t { left: 96px; top: 124px; font: 400 128px/1 var(--f-type); letter-spacing: .16em; color: var(--fg); }
.reveal .ly-me-t { text-transform: uppercase; }
.ly-me-rows { right: 96px; top: 142px; width: 600px; font: 400 26px/1.45 var(--f-type); color: var(--fg); }
.ly-me-rows p { display: grid; grid-template-columns: 96px 1fr; }
.ly-me-rows b { font-weight: 400; color: var(--muted); text-transform: uppercase; }
.ly-me-line { left: 96px; top: 318px; width: 1728px; height: 4px; background: var(--fg); box-shadow: 0 10px 0 -1px var(--fg); }
.ly-me-flow { left: 96px; top: 368px; width: 1720px; }
.ly-me-h { font: 400 var(--me-h, 74px)/1.3 var(--f-type); color: var(--fg); }
.ly-me-h .hl::before { top: -.06em; bottom: -.02em; }
.ly-me-h .hl.dsc::before { bottom: -.2em; }
.ly-me-h:has(.hl) { line-height: 1.38; }
.ly-me-flow .ly-tags { margin-top: 18px; }
.ly-me-p { width: 1560px; margin-top: 36px !important; font: 400 var(--me-b, 33px)/1.5 var(--f-type); color: var(--fg); }
.ly-me-p2 { margin-top: 22px !important; font-size: calc(var(--me-b, 33px) * .91); color: var(--fg2); }
.mx .ly-me-flow .mx-rule { font-size: 36px; margin-top: 34px; width: 1560px; }

/* ---------- LIST · cards: a grid of numbered cards ---------- */
.ly-lc-h { left: 96px; top: 168px; width: 1728px; font-size: 128px; }
.reveal .ly-lc-grid { left: 96px; top: 346px; width: 1728px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.reveal .ly-lc-grid.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ly-lc-c { display: flex; flex-direction: column; gap: 12px; min-height: 196px; padding: 20px 26px 24px; box-sizing: border-box; border: 2px solid var(--line2); }
.ly-lc-c:first-child { background: var(--fg); border-color: var(--fg); }
.ly-lc-c:first-child b, .ly-lc-c:first-child span { color: var(--bg); }
.ly-lc-c b { font: 400 96px/.8 var(--f-display); color: var(--fg); }
.ly-lc-c span { font: 400 36px/1.2 var(--f-body); color: var(--fg); text-wrap: pretty; }
.ly-lc-note { left: 96px; bottom: 62px; width: 1728px; display: grid; grid-template-columns: 160px 1fr; align-items: baseline; gap: 24px; border-top: 6px solid var(--acc); padding-top: 16px; }
.ly-lc-note .mono-s { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ly-lc-note .body { margin-top: 0 !important; font-size: 30px; line-height: 1.3; }

/* ---------- LIST · zebra: full-width bands in alternating ink ---------- */
.ly-lz-h { left: 96px; top: 168px; width: 1728px; font-size: 120px; }
.ly-lz-rows { left: 0; top: 340px; width: 1920px; }
.ly-lz-r { display: grid; grid-template-columns: 96px 112px 1fr 96px; align-items: center; min-height: 90px; }
.ly-lz-r:nth-child(odd) { background: var(--fg); }
.ly-lz-r:nth-child(odd) b, .ly-lz-r:nth-child(odd) span { color: var(--bg); }
.ly-lz-r:nth-child(even) { box-shadow: inset 0 -2px 0 var(--line2); }
.ly-lz-r b { grid-column: 2; font: 400 62px/1 var(--f-display); color: var(--fg); padding-top: 4px; }
.ly-lz-r span { grid-column: 3; font: 400 37px/1.15 var(--f-body); color: var(--fg); padding: 12px 0; }
.ly-lz-note { left: 96px; bottom: 62px; width: 1728px; display: grid; grid-template-columns: 160px 1fr; align-items: baseline; gap: 24px; }
.ly-lz-note .mono-s { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ly-lz-note .body { margin-top: 0 !important; font-size: 30px; line-height: 1.3; }

@media (prefers-reduced-motion: reduce) { .ly-tk-track { animation: none; } }