/* Guide page styles, scoped under .live (the app injects each page fragment into .live) */
.live *{box-sizing:border-box;margin:0;padding:0}
.live{font-family:J,sans-serif}
@font-face{font-family:IS;src:url(../fonts/instrument-serif-latin-400-normal.woff2)}
@font-face{font-family:IS;src:url(../fonts/instrument-serif-latin-400-italic.woff2);font-style:italic}
@font-face{font-family:J;src:url(../fonts/jost-latin-300-normal.woff2);font-weight:300}
@font-face{font-family:J;src:url(../fonts/jost-latin-400-normal.woff2);font-weight:400}
@font-face{font-family:J;src:url(../fonts/jost-latin-500-normal.woff2);font-weight:500}
@font-face{font-family:LX;src:url(../fonts/lexend-latin-300-normal.woff2);font-weight:300}
.live .page{position:relative;width:390pt;height:844pt;overflow:hidden;break-after:page;page-break-after:always}
.live .page:last-child{break-after:auto;page-break-after:auto}
.live img{display:block}
.live .cover{background:#0b0b0c;color:#fff}
.live .cover .hero{position:absolute;left:16pt;top:40pt;width:358pt;height:440pt;border-radius:28pt;overflow:hidden}
.live .cover .hero img{width:100%;height:100%;object-fit:cover}
.live .cover .card{position:absolute;left:16pt;right:16pt;top:598pt;width:auto;background:none;transition:none;cursor:auto;border-radius:22pt;overflow:hidden;
  box-shadow:0 14pt 30pt rgba(0,0,0,.35)}
.live .cover .cbg{position:absolute;max-width:none;display:none}
.live .cover .ctint{position:absolute;inset:0;border-radius:22pt;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  box-shadow:inset 0 0 0 .75pt rgba(255,255,255,.18),inset 0 1pt 0 rgba(255,255,255,.10)}
.live .cover .cin{position:relative;padding:15pt 17pt 16pt}
.live .cover .who{display:flex;align-items:center;gap:11pt}
.live .cover .who img{width:34pt;height:34pt;border-radius:50%;object-fit:cover;box-shadow:0 0 0 .75pt rgba(255,255,255,.3)}
.live .cover .who h2{font:500 10.5pt J;letter-spacing:.22em;text-transform:uppercase}
.live .cover .bio{font:300 11.5pt/1.55 J;color:rgba(255,255,255,.88);margin-top:9pt}
.live .cover .mail{font:400 8.5pt J;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin-top:9pt}
.live .cover .ttl{position:absolute;left:28pt;right:28pt;top:492pt;height:96pt;display:flex;flex-direction:column;justify-content:center}
.live .cover h1{font:400 42pt/1.02 IS,serif;letter-spacing:-.003em}
.live .cover h1 .n{color:#fff}
.live .cover .sub{font:300 9pt/1.75 J;letter-spacing:.2em;text-transform:uppercase;color:#a9a9ad;margin-top:9pt}
.live .cover .sub b{color:var(--acc);font-weight:400}
.live .cover .logo{display:none}
.live .step .rh{position:absolute;left:28pt;right:28pt;top:64pt;display:flex;justify-content:space-between;
  font:400 8pt J;letter-spacing:.24em;text-transform:uppercase;color:#98989d}
.live .step .rh b{color:#e8148c;font-weight:500}
.live .step .prog{position:absolute;left:28pt;right:28pt;top:84pt;height:1.2pt;background:#ececee;border-radius:1pt}
.live .step .prog i{display:block;height:100%;background:#e8148c;border-radius:1pt}
.live .step h1{position:absolute;left:27pt;top:100pt;font:italic 400 42pt/1 IS,serif;color:#e8148c;white-space:nowrap}
.live .frame{position:absolute;left:28pt;top:166pt;width:334pt;height:223pt;display:grid;gap:8pt}
.live .frame .c{position:relative;border-radius:16pt;overflow:hidden;box-shadow:0 8pt 20pt rgba(0,0,0,.09)}
.live .frame .c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.live .frame.f1{grid-template-columns:1fr}
.live .frame.f1p{grid-template-columns:149pt;justify-content:center}
.live .frame.f2{grid-template-columns:1fr 1fr}
.live .frame.f3{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.live .frame.f3 .c:first-child{grid-row:1/3}
.live .txt{position:absolute;left:28pt;right:28pt;top:413pt;bottom:46pt;font:300 15pt/1.6 J;color:#222}
.live .txt p+p{margin-top:.75em}
.live .look .lookph{position:absolute;left:28pt;top:100pt;width:334pt;height:698pt;border-radius:18pt;overflow:hidden;
  box-shadow:0 10pt 26pt rgba(0,0,0,.10)}
.live .look .lookph img{width:100%;height:100%;object-fit:cover}
.live .step .rh{left:37pt;right:37pt}
.live .step .prog{left:37pt;right:37pt}
.live .slot{position:absolute;left:37pt;width:316pt}
.live .slot.a{top:90pt}
.live .slot.b{top:430pt}
.live .slot.one{top:230pt}
.live .slot h1,.live .step .lh{position:absolute;left:-1pt;top:0;margin:0;font:italic 400 27pt/27pt IS,serif;color:#e8148c;white-space:nowrap}
.live .step .lh{left:36pt;top:90pt}
.live .slot .frame{left:0;top:33pt;width:316pt;height:211pt}
.live .slot .frame.f1p{grid-template-columns:141pt}
.live .slot .txt{position:absolute;left:0;right:0;top:254pt;bottom:auto;font:300 15pt/21pt J,sans-serif;color:#222}
.live .slot .txt p+p{margin-top:.4em}
.live .lk{position:absolute;left:37pt;width:316pt;border-radius:16pt;overflow:hidden;box-shadow:0 8pt 20pt rgba(0,0,0,.09)}
.live .lk img{display:block;width:100%;height:auto}
.live .lk.la{top:123pt}
.live .lk.lb{top:463pt}
.live .lk.l1{top:317pt}
.live .lk.p1{top:185pt}
.live .step{background:#fff}

/* One step per page (27 Oct): heading 100; photo tops 237.5; text 530 (single photo) or 600 / as low as fits (several photos, inline style); Lexend Light 17/25.5; four long steps (x-*); look photos from 203. */
.live .step .rh,.live .step .prog{left:28pt;right:28pt}
.live .slot.one{left:0;top:0;width:390pt;height:844pt}
.live .slot.one h1,.live .step .lh{left:28pt;top:100pt}
.live .slot.one .frame{left:28pt;top:237.5pt;width:334pt;height:223pt}
.live .slot.one .frame.f1p{height:302.5pt;grid-template-columns:202pt;justify-content:center}
.live .slot.one .frame.stack2{left:84.375pt;width:221.25pt;height:302.5pt;grid-template-columns:1fr;grid-template-rows:1fr 1fr}
.live .slot.one .frame.pair2p{height:243pt;grid-template-columns:162pt 162pt;justify-content:center;gap:10pt}
.live .slot.one .frame.f3{left:46.5pt;width:297pt;height:302.5pt;grid-template-columns:144.5pt 144.5pt;grid-template-rows:198pt 96.5pt}
.live .slot.one .frame.f3p{left:84.375pt;width:221.25pt;height:302.5pt;grid-template-columns:98pt 98pt;grid-template-rows:147.25pt 147.25pt;justify-content:center}
.live .slot.one .frame.f3 .c:first-child,.live .slot.one .frame.f3p .c:first-child{grid-column:1/3;grid-row:1/2;width:100%;justify-self:center}
.live .slot.one .txt{left:28pt;right:28pt;top:530pt;font:300 17pt/25.5pt LX,sans-serif;color:#1a1a1a}
.live .slot.one .txt p+p{margin-top:17pt}
.live .slot.one:not(.x-q1) .frame.f1p ~ .txt{top:600pt}
.live .slot.one.x-sb1 .frame{left:62pt;width:266pt;height:177pt}
.live .slot.one.x-sb1 .txt{top:440pt}
.live .slot.one.x-sb13 .frame{top:203pt}
.live .slot.one.x-sb13 .txt{top:451pt}
.live .slot.one.x-q1 .frame.f1p{height:229.5pt;grid-template-columns:153pt}
.live .slot.one.x-q1 .txt{top:492pt}
.live .slot.one.x-sol5 .frame.stack2{left:90pt;width:210pt;height:288pt}
.live .slot.one.x-sol5 .txt{top:559pt}
.live .lk{left:28pt;width:334pt}
.live .lk.la{top:203pt}
.live .lk.lb{top:474pt}
.live .lk.l1{top:338pt}
.live .lk.p1{top:203pt;left:45pt;width:300pt}