/* The responsive deck (Julian, 3 Oct: "much better reflow"; ADR-013). Loaded after app.css.

   Desktop and tablet: the deck fills the stage. The Stage hook picks a design box by the window's
   shape (1280 x 720 landscape, 1120 x 720 squarer, 900 x 1100 upright), zooms the deck so the box
   fits, and gives the deck the rest of the window as extra logical room: --dw x --dh (never less
   than the box), --z the zoom. The layouts below use that room (wider columns, a centered measure on
   an ultrawide, stacked layouts upright) through container queries on the frame's shape; type
   never goes under its floor (max(..., 10.5px / --z)), and a slide that does not fit even then grows
   taller than the window and the deck scrolls (compact: a phone held sideways).

   Phones held upright: story mode (.story, at the end of this file). */

@property --z{syntax:"<number>";inherits:true;initial-value:1}

/* ---------------------------------------------------------------- the stage */
.present .stagewrap{padding:0}
.present .stagewrap>.frame{container-type:size;container-name:stage;overflow:hidden;background:#fff}
/* hidden until the Stage hook has laid it out (assets/js/app.js does that before the socket connects): no layout shift */
.stagewrap>.frame>.deck:not(.laid){visibility:hidden}
.stagewrap>.frame>.deck{transform:none!important;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  --mx:max(var(--m),calc((var(--dw) - 1560px) / 2));--zf:var(--z)}
/* the floors count every zoom on the way: the example widget beside the votes draws at 87 % */
.stagewrap>.frame>.deck .tgrid.voting>.w{--zf:calc(var(--z) * .87)}
.stagewrap>.frame>.deck>.slide{position:relative;inset:auto;min-height:var(--dh);height:auto}
/* a slide taller than the window: a soft edge at the bottom says there is more */
.present .stagewrap>.frame.more::after{content:"";position:absolute;left:0;right:0;bottom:0;height:36px;z-index:60;pointer-events:none;background:linear-gradient(to top,rgba(0,20,45,.22),rgba(0,20,45,0))}
/* the edge arrows: the height of the window, over the top of a taller slide */
.stagewrap>.frame>.deck>.navcue{bottom:auto;height:var(--dh)}

/* ---------------------------------------------------------------- type floors (screen pixels) */
.stagewrap>.frame>.deck .foot{font-size:max(11px,calc(10.5px / var(--zf)))}
.stagewrap>.frame>.deck .k{font-size:max(12px,calc(10.5px / var(--zf)))}
.stagewrap>.frame>.deck .pad>.k,.stagewrap>.frame>.deck .tgrid .thead>.k,.stagewrap>.frame>.deck .talktext>.k,.stagewrap>.frame>.deck .vtext .k{font-size:max(calc(12px * var(--wk,1)),calc(10.5px / var(--zf)))}
.stagewrap>.frame>.deck .blabel,.stagewrap>.frame>.deck .b-table th,.stagewrap>.frame>.deck .cmp .rl,.stagewrap>.frame>.deck .zlabel,.stagewrap>.frame>.deck .linkbtn,.stagewrap>.frame>.deck .card .go{font-size:max(.62em,calc(10.5px / var(--zf)))}
.stagewrap>.frame>.deck .card .tag{font-size:max(.58em,calc(10.5px / var(--zf)))}
.stagewrap>.frame>.deck .fig .fl{font-size:max(.64em,calc(10.5px / var(--zf)))}
.stagewrap>.frame>.deck .cmp-h .cv{font-size:max(.66em,calc(10.5px / var(--zf)))}
.stagewrap>.frame>.deck .b-note{font-size:max(.68em,calc(11px / var(--zf)))}
.stagewrap>.frame>.deck .b-table .caption{font-size:max(.7em,calc(10.5px / var(--zf)))}
.stagewrap>.frame>.deck .fact .fl{font-size:max(.72em,calc(10.5px / var(--zf)))}
.stagewrap>.frame>.deck .xtag{font-size:max(.52em,8.5px,calc(10.5px / var(--zf)))}
.stagewrap>.frame>.deck .rline,.stagewrap>.frame>.deck .vnote,.stagewrap>.frame>.deck .rnote{font-size:max(.72em,calc(11px / var(--zf)))}
.stagewrap>.frame>.deck .fact{font-size:max(.82em,calc(12px / var(--zf)))}
.stagewrap>.frame>.deck .b-table td{font-size:max(.9em,calc(12px / var(--zf)))}
.stagewrap>.frame>.deck .card .cx,.stagewrap>.frame>.deck .b-flow .fx{font-size:max(.84em,calc(12px / var(--zf)))}
.stagewrap>.frame>.deck .b-flow .ft{font-size:max(.84em,calc(11px / var(--zf)))}
.stagewrap>.frame>.deck .desc,.stagewrap>.frame>.deck .b-bullets li{font-size:max(.95em,calc(12.5px / var(--zf)))}
.stagewrap>.frame>.deck .poll{font-size:max(.72em,calc(12px / var(--zf)))}
.stagewrap>.frame>.deck .seg button{font-size:max(.72em,calc(11px / var(--zf)))}
.stagewrap>.frame>.deck .steps li{font-size:max(.8em,calc(11px / var(--zf)))}
.stagewrap>.frame>.deck .cmp .cv{font-size:max(.82em,calc(11.5px / var(--zf)))}
.stagewrap>.frame>.deck .fbfoot{font-size:max(12px,calc(11px / var(--zf)))}
.stagewrap>.frame>.deck .fbpres{font-size:max(11px,calc(10.5px / var(--zf)))}
.stagewrap>.frame>.deck .cinecredit{font-size:max(9px,calc(10px / var(--zf)))}

/* compact (a window too small for the design box: a phone held sideways): body text at least 14 px
   on screen, the presenter small in the right margin beside the content, the slide scrolls */
.stagewrap>.frame>.deck.compact .fit{font-size:max(calc(18px * var(--fit,1) * var(--wk,1)),calc(14px / var(--zf)))}
.stagewrap>.frame>.deck.compact .pad,.stagewrap>.frame>.deck.compact .foot{right:calc(var(--mx) + 12px)}
.stagewrap>.frame>.deck.compact .tgrid.voting>.w{zoom:1;--zf:var(--z)}
.stagewrap>.frame>.deck .playbtn{font-size:max(15px,calc(12px / var(--zf)))}
.stagewrap>.frame>.deck .fbcta{font-size:max(14px,calc(12px / var(--zf)))}
.stagewrap>.frame>.deck .askcta{font-size:max(13px,calc(11.5px / var(--zf)));height:auto;min-height:36px}
.stagewrap>.frame>.deck.compact .avatar.slidebot{right:4px!important;left:auto!important;top:auto!important;bottom:52px!important;width:116px!important;height:186px!important}
.stagewrap>.frame>.deck .card .ct{font-size:max(1.02em,calc(11.5px / var(--zf)))}
.stagewrap>.frame>.deck .sov-card{font-size:max(.8em,calc(11px / var(--zf)))}
.stagewrap>.frame>.deck .swc{font-size:max(.82em,calc(11px / var(--zf)))}

/* ---------------------------------------------------------------- the standard layouts */
.stagewrap>.frame>.deck .pad{left:var(--mx);right:var(--mx)}
.stagewrap>.frame>.deck .foot{left:var(--mx);right:var(--mx)}
.stagewrap>.frame>.deck .L-video .foot{left:var(--m)}
.stagewrap>.frame>.deck .lead{max-width:min(980px,100%)}
/* wider than 16:9 (--wk > 1): the text boxes, their type and the talk grow with the width */
.stagewrap>.frame>.deck .pad,.stagewrap>.frame>.deck .vtext,.stagewrap>.frame>.deck .talktext{font-size:calc(18px * var(--fit,1) * var(--wk,1))}
.stagewrap>.frame>.deck .vtext{width:calc(560px * var(--wk,1))}
.stagewrap>.frame>.deck .slide[data-id="sell"] .vtext .blocks{max-width:calc(318px * var(--wk,1))}
/* the talk: text and call as one composition, centered in the width */
.stagewrap>.frame>.deck .talktext{width:calc(320px * var(--wk,1));left:max(var(--mx),calc(var(--dw) / 2 - 520px * var(--wk,1)))}
.stagewrap>.frame>.deck .talktext .lead,.stagewrap>.frame>.deck .talktext .tnote{max-width:calc(300px * var(--wk,1))}
.stagewrap>.frame>.deck .talkbox{left:calc(max(var(--mx),calc(var(--dw) / 2 - 520px * var(--wk,1))) + 360px * var(--wk,1));width:calc(680px * var(--wk,1));height:calc(442px * var(--wk,1));top:max(64px,calc((var(--dh) - 442px * var(--wk,1)) / 2))}
.stagewrap>.frame>.deck .talkbox .tvid{width:100%;height:auto;aspect-ratio:16/9}
.stagewrap>.frame>.deck .fintext{left:var(--mx)}

/* an ultrawide: the measure stays readable (the content centered, --mx), the scene videos keep
   the presenter's head in the picture (cropped from the bottom, not the middle) */
@container stage (aspect-ratio > 1.95){
  /* the content in the middle of the height (the blocks no longer sit a third down) */
  .stagewrap>.frame>.deck .pad.has{justify-content:center}
  .stagewrap>.frame>.deck .pad.has>.blocks{flex:0 0 auto}
  .stagewrap>.frame>.deck .pad.has>.blocks.spread::before,.stagewrap>.frame>.deck .pad.has>.blocks.spread::after{display:none}
  .stagewrap>.frame>.deck .L-target .pad{justify-content:center}
  .stagewrap>.frame>.deck .vbg video,.stagewrap>.frame>.deck .vbg img{object-position:50% 12%}
  .stagewrap>.frame>.deck .cine video,.stagewrap>.frame>.deck .cine img{object-position:50% 30%}
}

/* a squarer window (4:3, 16:10 tablets): the content sits in the middle of the extra height */
@container stage (aspect-ratio < 1.6){
  .stagewrap>.frame>.deck .pad.has{justify-content:center}
  .stagewrap>.frame>.deck .pad.has>.blocks{flex:0 0 auto}
  .stagewrap>.frame>.deck .L-target .pad{justify-content:center}
  .stagewrap>.frame>.deck .L-target .tfacts{margin-top:1.4em}
  /* a scene keeps its 16:9 picture (cropping the sides would push the scene into the text):
     the picture spans the width, the scene's color above and below, the text in its column */
  .stagewrap>.frame>.deck .L-video .vbg{top:calc((var(--dh) - var(--dw) * 9 / 16) / 2);bottom:auto;height:calc(var(--dw) * 9 / 16)}
  .stagewrap>.frame>.deck .L-video.tone-dark{background:var(--blue)}
  .stagewrap>.frame>.deck .L-video.tone-light{background:#fff}
  .stagewrap>.frame>.deck .L-video .vtext{width:calc(var(--dw) * .4375);top:calc((var(--dh) - var(--dw) * 9 / 16) / 2);bottom:calc((var(--dh) - var(--dw) * 9 / 16) / 2 + 60px)}
  .stagewrap>.frame>.deck .slide[data-id="sell"] .vtext .blocks{max-width:calc(var(--dw) * .25)}
  /* the presenter stands at the bottom right, never over a headline moved to the middle; the
     content keeps a lane free for him */
  .stagewrap>.frame>.deck .avatar.slidebot{top:auto!important;bottom:56px!important}
  .stagewrap>.frame>.deck .slide:not(.L-target):has(.nslot .avatar.slidebot:not(.nomedia)) .pad.has{right:calc(var(--mx) + 180px)}
}

/* upright (a tablet held upright, a narrow desktop window): the layouts stack */
@container stage (aspect-ratio < 1.05){
  .stagewrap>.frame>.deck{--m:72px}
  .stagewrap>.frame>.deck .pad{top:72px;bottom:96px}
  .stagewrap>.frame>.deck .pad.statement h1{max-width:none}
  /* a target: the head over the example, the three columns in two rows */
  .stagewrap>.frame>.deck .tgrid,.stagewrap>.frame>.deck .tgrid.voting{grid-template-columns:minmax(0,1fr);row-gap:1.2em}
  .stagewrap>.frame>.deck .tgrid.voting>.w{zoom:1;--zf:var(--z)}
  .stagewrap>.frame>.deck .tfacts{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:1.4em}
  .stagewrap>.frame>.deck .tfacts>.fact:nth-child(3){grid-column:1 / -1}
  .stagewrap>.frame>.deck .tfacts.jslot{margin-right:140px}
  .stagewrap>.frame>.deck .b-cards{grid-template-columns:repeat(min(var(--cols,3),2),minmax(0,1fr))}
  /* a scene: the video on top at its own shape, the text under it */
  .stagewrap>.frame>.deck .L-video .vbg{bottom:auto;height:calc(var(--dw) * 9 / 16)}
  .stagewrap>.frame>.deck .L-video .vtext{top:calc(var(--dw) * 9 / 16);width:auto;right:0;bottom:96px;padding:40px var(--m) 0;justify-content:flex-start}
  .stagewrap>.frame>.deck .L-video.tone-dark{background:var(--blue)}
  .stagewrap>.frame>.deck .L-video.tone-light{background:#fff}
  .stagewrap>.frame>.deck .L-video .vtext h1{font-size:2.6em}
  .stagewrap>.frame>.deck .slide[data-id="sell"] .vtext .blocks{max-width:none}
  /* the talk: the text over the call */
  .stagewrap>.frame>.deck .talktext{width:auto;right:var(--m);bottom:auto;top:72px;justify-content:flex-start}
  .stagewrap>.frame>.deck .talktext .lead,.stagewrap>.frame>.deck .talktext .tnote{max-width:640px}
  .stagewrap>.frame>.deck .talkbox{left:var(--m);right:var(--m);width:auto;top:44%;bottom:auto;height:auto}
  .stagewrap>.frame>.deck .talkbox .tvid{width:100%;height:auto;aspect-ratio:16/9}
  /* the finale and the title: the shot fills the height, the presenter stays in the picture */
  .stagewrap>.frame>.deck .L-end.fin .vbg video{object-position:62% 50%}
  .stagewrap>.frame>.deck .cine video,.stagewrap>.frame>.deck .cine img{object-position:90% 50%}
  /* the presenter stands at the bottom right, under the content, never floating at the top */
  .stagewrap>.frame>.deck .avatar.slidebot{top:auto!important;bottom:56px!important}
  .stagewrap>.frame>.deck .fintext{width:auto;right:var(--m)}
  .stagewrap>.frame>.deck .rank,.stagewrap>.frame>.deck .rnote{margin-right:0}
}

/* ---------------------------------------------------------------- story mode (a phone held upright)
   One page: the compact header, the sections (every slide, reflowed for one narrow column), the dock
   with the presenter (head and shoulders, 22vw, 3:4) and the captions. The page scrolls between the
   header and the dock, so neither ever covers a slide. Touch targets are at least 44 px. */
.present[data-story=true]{display:flex;flex-direction:column;background:#fff;--headh:52px;--dockh:calc(22vw * 4 / 3 + 16px + env(safe-area-inset-bottom))}
.shead{flex:none;display:flex;align-items:center;gap:2px;height:calc(var(--headh) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 4px 0;background:var(--chrome);color:var(--chrome-text);border-bottom:1px solid var(--chrome-line);z-index:5}
.sbtn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:3px;background:none;color:inherit;cursor:pointer;touch-action:manipulation}
.sbtn svg.i{width:22px;height:22px}
.sbtn:hover,.sbtn[aria-expanded=true]{background:rgba(255,255,255,.08);color:#fff}
.spos{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:10px;padding:0 4px;white-space:nowrap}
.spos .sn{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:#c6d2de}
.spos .sn b{color:#fff;font-weight:700}
.spart{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:#9fb0c2}
.story{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#fff;scroll-padding-top:0}

/* the menu: a sheet under the header */
.smenu{position:absolute;left:0;right:0;top:calc(var(--headh) + env(safe-area-inset-top));bottom:0;z-index:60;overflow-y:auto;overscroll-behavior:contain;background:#0d1218;color:var(--chrome-text);padding:6px 16px calc(28px + env(safe-area-inset-bottom));outline:none}
.smenu[hidden]{display:none}
.smbar{display:flex;align-items:center;gap:8px;min-height:48px;border-bottom:1px solid var(--chrome-line);margin-bottom:12px}
.smtitle{flex:1;min-width:0;font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:900;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.smctl{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:4px 0 16px;border-bottom:1px solid var(--chrome-line)}
.smenu .psw .pl{display:inline;font-size:11px}
.smenu .psw .pf{display:inline}.smenu .psw .ps{display:none}
.smenu .psw .pseg{height:44px;padding:0 14px;font-size:14px}
.smenu .mswitch{min-height:44px;font-size:14px}
.smenu .mswitch .tg{font-size:12px}
.sindex{padding:8px 0}
.sigroup h3{margin:16px 0 6px;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;color:var(--cyan)}
.sindex ol{list-style:none;margin:0;padding:0}
.sidx{display:flex;align-items:baseline;gap:12px;min-height:44px;padding:11px 8px;border-radius:3px;color:var(--chrome-text);text-decoration:none;font-size:15px;line-height:1.35}
.sidx b{flex:none;min-width:2ch;font-size:12px;font-weight:700;color:#9fb0c2;font-variant-numeric:tabular-nums}
.sidx:hover,.sidx:focus-visible{background:rgba(255,255,255,.07);color:#fff}
.sidx[aria-current=page]{background:rgba(0,166,226,.16);color:#fff}
.sidx[aria-current=page] b{color:var(--cyan)}
.smdl{display:flex;flex-direction:column;gap:4px;padding:12px 0;border-top:1px solid var(--chrome-line)}
.smdl .dlitem{height:48px;font-size:15px}
.smwho{display:flex;padding:14px 8px 0;border-top:1px solid var(--chrome-line);font-size:14px;color:var(--chrome-text)}
.smwho .wout{min-height:44px}

/* the dock: the captions, the presenter */
.sdock{flex:none;display:flex;align-items:stretch;gap:12px;height:var(--dockh);padding:8px 12px calc(8px + env(safe-area-inset-bottom)) 16px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(0,30,70,.06)}
.spcap{flex:1 1 auto;min-width:0;display:flex;align-items:flex-end}
.spcap p{margin:0;font:500 16px/1.36 "Fira Sans",Arial,sans-serif;color:var(--ink);text-wrap:balance;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;opacity:0;transition:opacity .2s}
.spcap.on p{opacity:1}
.spcap .sphint{display:none;font:400 14px/1.4 "Fira Sans",Arial,sans-serif;color:var(--grey)}
.sdock.idle .spcap .sphint{display:block}
.sdock.idle .spcap p{display:none}
.spres{flex:none;position:relative;display:flex;flex-direction:column;align-items:stretch;width:22vw;padding:0;border:0;background:none;cursor:pointer;touch-action:manipulation;color:inherit}
.spres[hidden]{display:none}
.spbox{position:relative;display:block;width:22vw;aspect-ratio:3/4;overflow:hidden;border-radius:10px;background:linear-gradient(180deg,#eef4fa,#dfe9f3)}
/* the clips are full figures (9:16): the box shows the head and the shoulders */
.spv{position:absolute;left:-57.8%;top:-17.8%;width:220%;height:auto;aspect-ratio:9/16;object-fit:contain;opacity:0;transition:opacity .35s var(--ease)}
.spv.on{opacity:1}
.spplay{position:absolute;right:6px;bottom:6px;width:26px;height:26px;border-radius:50%;background:var(--cyan);box-shadow:0 3px 10px rgba(0,30,70,.3)}
.spplay::before{content:"";position:absolute;left:10px;top:7px;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.spres.playing .spplay{background:rgba(11,15,20,.6)}
.spres.playing .spplay::before{left:8px;top:8px;width:3px;height:10px;border:0;background:#fff;box-shadow:6px 0 0 #fff}
.spname{position:absolute;left:0;right:0;bottom:0;padding:2px 4px 3px;border-radius:0 0 10px 10px;background:rgba(0,26,54,.62);color:#fff;font:700 10px/1.2 "Fira Sans",Arial,sans-serif;letter-spacing:1.5px;text-transform:uppercase;text-align:left;padding-left:8px}
.spres:focus-visible{outline:none}.spres:focus-visible .spbox{outline:3px solid var(--cyan);outline-offset:2px}
.sdock.nobody .spcap p{-webkit-line-clamp:5}
@media (prefers-reduced-motion:reduce){.spv,.spcap p{transition:none}}

/* the sections: every slide in the flow of the page */
.ssec{position:relative;border-bottom:8px solid var(--pale)}
.ssec:last-child{border-bottom:0}
.story .deck{position:relative!important;left:auto;top:auto;width:auto!important;height:auto!important;transform:none!important;zoom:1!important;overflow:visible!important;background:transparent;box-shadow:none}
.story .frame{box-shadow:none;overflow:visible;background:transparent}
.story .slide{position:relative;inset:auto;overflow:hidden;animation:none}
.story .slide .in,.story .slide [class*=" in"]{animation:none!important}
.story .pad,.story .vtext,.story .talktext{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;max-width:none;display:flex;flex-direction:column;justify-content:flex-start;padding:28px 20px 6px;font-size:16px;overflow:visible;--fit:1}
.story .pad.statement,.story .L-divider .pad,.story .L-end .pad{padding-top:44px;padding-bottom:28px}
.story .slide h1,.story .pad h1,.story .vtext h1,.story .talktext h1{font-size:clamp(28px,8.6vw,36px);line-height:.98;margin-bottom:.34em}
.story .pad h1.long,.story .pad h1.xlong,.story .vtext h1.long,.story .vtext h1.xlong{font-size:clamp(25px,7.4vw,31px)}
.story .pad.statement h1,.story .L-divider h1,.story .L-end h1{font-size:clamp(34px,10.5vw,44px);max-width:none}
.story .k,.story .pad>.k,.story .tgrid .thead>.k{font-size:11px;letter-spacing:3px;margin-bottom:.9em}
.story .lead,.story .statement .lead,.story .vtext .lead{font-size:17px;line-height:1.42;max-width:none}
.story .blocks{flex:none;gap:22px}
.story .blocks.spread::before,.story .blocks.spread::after{display:none}
.story .pad>.w{margin-bottom:22px}
.story .foot{position:relative;left:auto;right:auto;bottom:auto;margin:14px 20px 0;padding:12px 0 16px;font-size:11px;letter-spacing:2px}
.story .L-video .foot{width:auto;min-width:0;justify-content:space-between}
.story .fbfoot{height:36px;min-height:36px;padding:0 14px 0 10px;margin:-8px auto -8px -6px;border-radius:18px;font-size:13px}
.story .fbfoot::after{content:"";position:absolute;inset:-4px}
.story .fbfoot{position:relative}
.story .b-bullets li,.story .desc{font-size:16px;line-height:1.45}
.story .b-note,.story .rnote,.story .vnote,.story .tnote{font-size:13px;line-height:1.45}
.story .xtag{font-size:10px}

/* a target: the head with the big pair beside it, the example, the columns one under the other */
.story .tgrid,.story .tgrid.voting{grid-template-columns:minmax(0,1fr)!important;row-gap:18px;margin-bottom:22px}
.story .tgrid.voting>.w{zoom:1}
.story .thead .ttop{gap:12px}
.story .tvote.hin{margin-top:2px;zoom:1}
.story .goal{font-size:18px}
.story .tfacts{grid-template-columns:minmax(0,1fr)!important;gap:22px;margin:6px 0 0}
.story .tfacts.jslot{margin-right:0}
.story .fact{font-size:15px}
.story .fact .fl{font-size:11px}
.story .fact li.bv{align-items:center;min-height:44px;margin-bottom:2px}
.story .bvote{opacity:.9;margin:0}
.story .vrow.small .vbtn{min-width:44px;height:44px;justify-content:center}
.story .vrow.small .vdisc,.story .vrow.small .vicon{width:16px;height:16px}
.story .tnotes{margin-top:18px}
.story .L-target .blocks.tmid{margin:0 0 20px}

/* cards, flows, figures, tables */
.story .b-cards{grid-template-columns:minmax(0,1fr)!important;gap:12px}
.story .card{padding:14px 16px}
.story .card .ct{font-size:16px}
.story .card .cx{font-size:15px}
.story .card .tag,.story .card .go,.story .blabel{font-size:11px}
.story .b-flow{flex-direction:column;gap:8px}
.story .b-flow li,.story .b-flow li:first-child{margin:0;padding:12px 16px 20px;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),50% 100%,0 calc(100% - 10px))}
.story .b-flow .ft{font-size:14px}.story .b-flow .fx{font-size:14px}
.story .b-flow li{min-height:0!important;flex:none}
.story .b-figures{grid-template-columns:repeat(2,minmax(0,1fr))}
.story .b-table{overflow-x:auto;overscroll-behavior-x:contain;margin:0 -20px;padding:0 20px;-webkit-overflow-scrolling:touch}
.story .b-table table{table-layout:auto;min-width:100%}
.story .b-table td{font-size:14px;overflow-wrap:normal}
.story .b-table th{font-size:11px}
.story .b-table td:first-child{min-width:7.5em}

/* the widgets */
.story .seg button{min-height:44px;font-size:12px;padding:.6em .9em}
.story .steps li{font-size:14px}
.story .w-sov .zones{grid-template-columns:minmax(0,1fr);gap:12px}
.story .zone{min-height:0}
.story .sov-card{min-height:44px;font-size:14px}
.story .linkbtn{min-height:44px;font-size:11px}
.story .swc{min-height:44px;font-size:14px}
.story .cmp-r{grid-template-columns:5.2em minmax(0,1fr) minmax(0,1fr);gap:0 .7em}
.story .cmp .cv{font-size:14px}.story .cmp .rl{font-size:10.5px}.story .cmp-h .cv{font-size:11px}
.story .w-targets{grid-template-columns:minmax(0,1fr)}

/* the ranking: rank, name and counts on one line, the bar under the name */
.story .rank{margin-right:0;font-size:15px}
.story .rlink{grid-template-columns:1.5em minmax(0,1fr) auto;row-gap:.35em;column-gap:.7em;padding:.55em .8em .6em .5em;min-height:44px}
.story .rbar{grid-column:2 / 4;grid-row:2}
.story .rn{grid-row:1 / 3}
.story .rline{font-size:12px}
.story .rnote{margin-right:0}

/* a quick poll: big, touch-friendly options */
.story .poll{font-size:15px;gap:8px;margin-top:18px}
.story .poll .pq{flex-basis:100%;margin:0 0 2px}
.story .popt{height:auto;min-height:44px;padding:.55em 1em;border-radius:22px;white-space:normal;text-align:left;line-height:1.25}
.story .pmeta{flex-basis:100%;font-size:13px}

/* a scene: the video at its own shape, the text under it on the scene's color */
.story .L-video .vbg{position:relative;inset:auto;aspect-ratio:16/9;height:auto}
.story .L-video.tone-dark{background:var(--blue)}
.story .L-video.tone-light{background:#fff}
.story .tone-dark .vtext{text-shadow:none}
.story .slide[data-id="sell"] .vtext .blocks{max-width:none}
.story .vtext .blocks{flex:none}

/* the title and the finale: the shot fills the page between the header and the dock */
.story .L-title,.story .L-end.fin{height:calc(100dvh - var(--headh) - var(--dockh) - env(safe-area-inset-top));min-height:480px}
.story .cam{position:absolute;inset:0;perspective:none}
.story .rig{transform:none!important}
.story .cine{inset:0;transform:none!important}
.story .cine video,.story .cine img{object-position:72% 50%}
.story .cine-title h1{left:20px!important;right:20px;top:auto!important;bottom:150px;width:auto!important;font-size:clamp(40px,12.5vw,54px)!important;letter-spacing:-1.5px;text-shadow:0 2px 18px rgba(0,10,30,.45)}
.story .layer.front .cinesub{left:20px!important;right:20px;top:auto!important;bottom:100px;width:auto!important;font-size:18px;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.story .layer.front{transform:none}
.story .photo .k.cinek{left:20px!important;top:22px!important;right:20px;font-size:10px!important;letter-spacing:2.5px!important;white-space:normal;transform:none!important;line-height:1.5}
.story .cinecredit{left:20px;right:20px;white-space:normal;bottom:10px;font-size:10px;line-height:1.35}
.story .L-title .foot{position:absolute;left:0;right:0;bottom:52px;margin:0 20px;padding:0}
.story .L-end.fin .vbg{position:absolute;inset:0}
.story .L-end.fin .vbg video{object-position:62% 50%}
/* Corinna's or the duo's stand-in on the title and the thanks slide: a transparent clip, fitted */
.story .story-stand video.narr{object-fit:contain!important;object-position:50% 100%!important}
.story .cine.story-stand{background:#1d2a3a center/cover no-repeat}
.story .fintext{position:absolute;left:20px;right:20px;top:22px;width:auto}
.story .fintext h1{font-size:clamp(40px,12vw,52px);letter-spacing:-1.5px}
.story .fintext .lead{font-size:17px;max-width:none}
.story .fintext .fbcta{min-height:48px}
.story .L-end.fin .foot{position:absolute;left:0;right:0;bottom:12px;margin:0 20px}

/* the talk: the text, then the call in the flow of the section */
.story .talktext .lead,.story .talktext .tnote{max-width:none}
.story .talktext h1{font-size:clamp(34px,10.5vw,44px)}
.story .talkbox{position:relative;left:auto;top:auto;width:auto;height:auto;margin:14px 20px 4px;display:block}
.story .talkbox .tvid{width:100%;height:auto;aspect-ratio:16/9}
.story .talkbox .talkin .tvid{aspect-ratio:16/9}
.story .talkin .tctl{flex-wrap:wrap;padding-top:12px}
.story .tbtn{min-height:44px;font-size:14px}
.story .askcta{min-height:44px}