@import url(fonts/fonts.css);
/* Reader page (/reader/): the comic as stories, the grid of all panels, the guide.
 * Loaded after /styles.css: reuses the landing topbar, footer, colours and font,
 * and widens the column, which on the landing is 760px. */
:root{--paper:#f6efe2;--ink:#1d1a16;--box:#fff8d6;--orange:#ff7a1a;
  --comic-font:'Pangolin','Comic Sans MS','Comic Neue',system-ui,sans-serif}
:root:lang(ar),:root:lang(fa){--comic-font:'Baloo Bhaijaan 2',system-ui,sans-serif}
:root:lang(ja){--comic-font:'Hiragino Maru Gothic ProN','Yu Gothic','Noto Sans JP',system-ui,sans-serif}
:root:lang(zh){--comic-font:'PingFang SC','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif}
body.reader-page{max-width:1180px;opacity:1}
.reader-page .topbar{border-bottom:1px solid var(--line);flex-wrap:nowrap}
.site-logo{color:var(--fg);font-weight:700;font-size:1.05rem;letter-spacing:-0.01em;text-decoration:none}
.site-logo:hover{color:var(--accent)}
.rp-nav-right{display:flex;align-items:center;gap:10px}
.rp-lang{font:inherit;font-size:.85rem;padding:5px 6px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg);max-width:160px}
.rp-head{text-align:center;padding:22px 0 10px}
/* The visible title took the room the panel needs on a phone: kept for search
 * engines and screen readers, hidden on screen. */
.rp-head{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.stories{padding-top:12px}
.rp-head h1{font-family:var(--comic-font);font-weight:400;font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:4px}
.rp-head .sub{margin:0;font-size:1.05rem}
:lang(ar) .rp-head h1,:lang(fa) .rp-head h1{font-weight:600}

/* ---------- one panel at a time ---------- */
.stories,.comic-all .all-back{display:none}
.js .stories{display:block}
.js .comic-all{display:none}
.js.mode-grid .stories{display:none}
.js.mode-grid .comic-all,.js.mode-grid .comic-all .all-back{display:block}
.stories{padding:6px 0 4px;user-select:none;-webkit-user-select:none}
.st-progress{display:flex;gap:3px;margin:0 auto 8px;max-width:760px}
.st-progress span{flex:1;height:4px;border-radius:2px;background:var(--line);overflow:hidden;position:relative}
.st-progress span.done{background:var(--fg)}
.st-progress span.cur::after{content:"";position:absolute;inset:0;background:var(--fg);transform-origin:left;transform:scaleX(1)}
[dir=rtl] .st-progress span.cur::after{transform-origin:right}
.playing .st-progress span.cur::after{animation:st-fill var(--st-ms,7000ms) linear both}
@keyframes st-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.st-bar{display:flex;align-items:center;gap:12px;max-width:760px;margin:0 auto 10px;font-size:.95rem}
/* Counter + autoplay in one pill, in the style of "Open app": accent outline,
 * accent fill on hover/focus. The icon is SVG in a 40px circle; the play
 * triangle is nudged right (optical centre, ~8% of the circle). While playing:
 * pause icon and a thin ring around the circle that fills in 7 s per panel. */
.st-ctl{display:inline-flex;align-items:center;gap:4px;padding:3px 3px 3px 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg)}
[dir=rtl] .st-ctl{padding:3px 14px 3px 3px}
.st-count{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;color:var(--mute);min-width:3.6em;font-size:.9rem}
.st-play{display:inline-flex;align-items:center;gap:8px;padding:0 8px 0 0;height:44px;border:0;border-radius:999px;background:none;color:var(--accent);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer}
[dir=rtl] .st-play{padding:0 0 0 8px}
.st-play:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.st-ico{position:relative;width:42px;height:42px;flex:none;display:grid;place-items:center;border:1.5px solid var(--accent);border-radius:50%;transition:background .15s,color .15s,border-color .15s}
.st-play:hover .st-ico,.st-play:focus-visible .st-ico{background:var(--accent);color:#fff}
.st-play:hover .st-auto{text-decoration:underline}
.st-ico svg{fill:currentColor}
/* the triangle's box is already right of centre (7.5..19.5 of 24); +1.5px more
 * puts it ~8% of the circle right of the geometric centre */
.ic-play{width:18px;height:18px;transform:translateX(1.5px)}
.ic-pause{width:18px;height:18px;display:none}
.st-ring{position:absolute;inset:-1.5px;width:42px;height:42px;transform:rotate(-90deg);fill:none;opacity:0;overflow:visible}
.st-ring-fg{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.playing .st-ico{border-color:rgba(29,78,216,.22)}
.playing .ic-play{display:none}
.playing .ic-pause{display:block}
.playing .st-ring{opacity:1}
.playing .st-ring-fg{animation:st-ring var(--st-ms,7000ms) linear both}
@keyframes st-ring{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.playing .st-ring-fg{animation:none;stroke-dashoffset:0}}
.st-all{margin-inline-start:auto;color:var(--accent);font-weight:600;text-decoration:none}
.st-all:hover{text-decoration:underline}
.st-view{position:relative;display:flex;align-items:center;justify-content:center;gap:14px}
.st-nav{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;font-size:1.7rem;line-height:1;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.st-nav:hover{border-color:var(--fg)}
.st-nav:disabled{opacity:.3;cursor:default}
[dir=rtl] .st-nav span{display:inline-block;transform:scaleX(-1)}
.st-slide{touch-action:pan-y pinch-zoom;min-width:0}
.st-guide{display:block;text-align:center;margin:14px 0 0;color:var(--mute);font-size:.95rem;text-decoration:none}
.st-guide:hover{color:var(--accent)}

/* the panel inside the viewer: caption or bubble on top, picture under it */
.st-slide .panel{box-shadow:5px 5px 0 var(--ink);width:min(calc((100svh - 380px) * .8),560px)}
.st-slide .panel .caption{font-size:clamp(1.15rem,1.6vw,1.4rem);min-height:calc(2 * 1.3em + 20px)}
.st-slide .stage{width:100%;cursor:pointer}
@media(max-width:820px){
  .st-view{gap:0}
  .st-nav{display:none}
  .st-slide{width:100%;display:flex;justify-content:center}
  .st-slide .panel{width:min(100%,calc((100svh - 330px) * .8));min-width:0;box-shadow:3px 3px 0 var(--ink)}
  .st-slide .panel .caption{font-size:1.1rem;min-height:calc(3 * 1.3em + 20px)}
  .st-bar{gap:10px}
}

/* ---------- panels (shared by the grid and the viewer) ---------- */
.comic{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.panel{margin:0;display:flex;flex-direction:column;background:#fff;border:3px solid var(--ink);border-radius:6px;overflow:hidden;box-shadow:4px 4px 0 var(--ink)}
.caption{order:-1;flex:1 0 auto;background:var(--box);border-bottom:3px solid var(--ink);padding:10px 14px;
  font-family:var(--comic-font);font-size:1.15rem;line-height:1.3;min-height:calc(2 * 1.3em + 20px);display:flex;align-items:center;gap:10px;color:var(--ink)}
:lang(ar) .caption,:lang(fa) .caption{font-weight:600;line-height:1.55}
/* Speech and thought bubbles: the caption strip keeps its place on top of the
 * panel, the text sits in a white bubble, and the tail (or the thought dots)
 * hangs into the picture at --tail (0..1 of the panel width, set per panel in
 * layout.css). The picture never mirrors, so the tail uses physical "left" and
 * keeps pointing at Lena on RTL pages too. */
.caption.speech,.caption.thought{background:var(--paper);padding:10px 12px 14px;position:relative;z-index:2;align-items:flex-end}
.caption.speech .txt,.caption.thought .txt{flex:1;background:#fff;border:2.5px solid var(--ink);padding:8px 14px;position:relative}
.caption.speech .txt{border-radius:20px}
.caption.thought .txt{border-radius:40px;padding:10px 18px;box-shadow:0 0 0 0 transparent}
.caption.speech::before,.caption.speech::after{content:"";position:absolute;width:0;height:0;pointer-events:none}
.caption.speech::before{left:calc(var(--tail,.5) * 100% - 14px);top:calc(100% - 17px);border-left:14px solid transparent;border-right:14px solid transparent;border-top:44px solid var(--ink)}
.caption.speech::after{left:calc(var(--tail,.5) * 100% - 10px);top:calc(100% - 19.5px);border-left:10px solid transparent;border-right:10px solid transparent;border-top:40px solid #fff}
.caption.thought::before,.caption.thought::after{content:"";position:absolute;border:2.5px solid var(--ink);background:#fff;border-radius:50%;pointer-events:none}
.caption.thought::before{width:20px;height:16px;left:calc(var(--tail,.5) * 100% - 10px);top:calc(100% - 8px)}
.caption.thought::after{width:12px;height:10px;left:calc(var(--tail,.5) * 100% - 4px);top:calc(100% + 14px)}
/* the wide final panel of the grid has its caption beside the picture: tail points sideways */
@media(min-width:601px){
.comic .panel.wide .caption.speech::before{left:auto;top:calc(50% - 14px);inset-inline-end:-19px;border:14px solid transparent;border-inline-start:44px solid var(--ink);border-inline-end:0}
.comic .panel.wide .caption.speech::after{left:auto;top:calc(50% - 10px);inset-inline-end:-13px;border:10px solid transparent;border-inline-start:40px solid #fff;border-inline-end:0}
.comic .panel.wide .caption.speech,.comic .panel.wide .caption.thought{padding:20px 22px;align-items:center}
}
.stage{position:relative;aspect-ratio:4/5;background:var(--paper)}
.stage>img.art{display:block;width:100%;height:100%;object-fit:cover}
/* The inset and its rings sit on the picture, which never mirrors: keep them LTR. */
.stage{direction:ltr}
.inset{position:absolute;width:var(--w,60%);padding:5px;background:#111418;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.35),0 0 0 2px var(--ink);cursor:zoom-in;border:0;margin:0;line-height:0}
.inset img{width:100%;height:auto;border-radius:9px;display:block}
.inset.bl{left:4%;bottom:4%}.inset.br{right:4%;bottom:4%}.inset.tl{left:4%;top:4%}.inset.tr{right:4%;top:4%}
.chain{position:absolute;right:4%;bottom:3%;width:var(--w,58%);display:flex;flex-direction:column;align-items:stretch;gap:2px}
.chain.bl{right:auto;left:4%}
.chain .inset.step{position:relative;width:100%;padding:4px;border-radius:11px}
.chain .inset.step img{border-radius:7px}
.chain .inset.step.bare{background:none;padding:0;box-shadow:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.chain .inset.step.bare img{border-radius:0}
.shot{position:relative;display:block;container-type:inline-size}
/* Orange highlight over a button of a screenshot: boxes come from <image>.json
 * (fractions of the image), drawn here so it scales with the picture and
 * pulses softly; static for people who asked for less motion. */
.hl{position:absolute;border:0;background:none;outline:2px solid var(--orange);outline-offset:2px;box-shadow:0 0 6px 3px rgba(255,122,26,.35);pointer-events:none;animation:hl-pulse 1.6s ease-in-out infinite}
/* drawn OUTSIDE the box (outline with an offset, glow outward), so it never covers
 * the letters; the pulse changes brightness and glow only, never the size.
 * soft amplitude: with five or six boxes on one screen the page must not flicker */
@keyframes hl-pulse{0%,100%{outline-color:rgba(255,122,26,.75);box-shadow:0 0 4px 2px rgba(255,122,26,.25)}50%{outline-color:rgba(255,122,26,1);box-shadow:0 0 9px 4px rgba(255,122,26,.5)}}
@media(prefers-reduced-motion:reduce){.hl{animation:none}}
dialog.zoom .shot{line-height:0}
.chain .arrow{align-self:center;width:0;height:0;margin:3px 0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:13px solid var(--orange);filter:drop-shadow(0 0 1.5px var(--ink))}
.comic .panel.wide{grid-column:span 2;flex-direction:row}
.comic .panel.wide .caption{flex:0 0 36%;border-bottom:0;border-inline-end:3px solid var(--ink);font-size:clamp(1.3rem,2.2vw,1.7rem);padding:24px}
.comic .panel.wide .stage{flex:1;aspect-ratio:auto;min-height:260px}
.comic .panel.wide .stage>img.art{position:absolute;inset:0}
.comic-all{padding:10px 0 4px}
.all-back{margin:0 0 14px}
.all-back a{color:var(--accent);font-weight:600;text-decoration:none}
@media(max-width:900px){.comic{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
  .comic{grid-template-columns:1fr;gap:22px}
  .caption{min-height:0}
  .comic .panel.wide{flex-direction:column;grid-column:auto}
  .comic .panel.wide .stage{aspect-ratio:4/5;min-height:0}
  .comic .panel.wide .caption{flex:none;font-size:1.15rem;padding:10px 14px;border-inline-end:0;border-bottom:3px solid var(--ink)}
}
.rp-notes{text-align:center;color:var(--mute);font-size:.9rem;padding:14px 0 6px}
.rp-notes p+p{margin-top:2px}

/* ---------- the guide ---------- */
.guide{border-top:1px solid var(--line);margin-top:22px;padding:30px 0 10px;max-width:980px;margin-inline:auto}
.g-kicker{color:var(--accent);font-weight:600;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.g-intro{color:var(--mute);font-size:1.05rem;margin-bottom:8px;max-width:640px}
.g-sec{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:start;padding:26px 0;border-bottom:1px solid var(--line)}
.g-sec:last-child{border-bottom:0}
.g-text h3{font-size:1.25rem;margin-bottom:10px}
.g-text p,.g-text li{font-size:1.02rem;margin-bottom:10px;max-width:620px}
.g-text ul{padding-inline-start:20px}
.g-note{color:var(--mute);font-size:.95rem;border-inline-start:3px solid var(--line);padding-inline-start:12px}
.kbtn{display:inline-block;padding:0 7px;border:1.5px solid currentColor;border-radius:6px;font-weight:600;font-size:.92em;line-height:1.45;white-space:nowrap}
h3 .kbtn{font-size:.85em}
.caption .kbtn{border-width:2px;padding:0 6px}
.g-shots{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.g-shot{border:0;padding:4px;margin:0;background:#111418;border-radius:16px;cursor:zoom-in;width:220px;line-height:0;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.g-shot img{width:100%;height:auto;border-radius:12px;display:block}
.g-shots.many .g-shot{width:180px}
.g-shots.many{max-width:384px}
@media(max-width:760px){
  .g-sec{grid-template-columns:1fr;gap:14px}
  .g-shots,.g-shots.many{justify-content:flex-start;max-width:none;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .g-shot,.g-shots.many .g-shot{flex:0 0 100%;width:100%;scroll-snap-align:start}
  .g-shots.many .g-shot{flex-basis:86%}
}

/* ---------- lightbox ---------- */
/* Lightbox: an opaque full-screen layer (the page under it is scroll-locked by
 * reader.js). The screen is shown whole: contained by the viewport height, and
 * when that would make it too narrow to read, it keeps a readable width and the
 * layer scrolls, starting from the top (margin:auto centres it only when it
 * fits, so the top is never cut). Close: the × top right, a tap on the
 * background, Escape, or a swipe down. */
dialog.zoom{border:0;padding:max(56px,calc(env(safe-area-inset-top) + 48px)) 12px max(16px,env(safe-area-inset-bottom));background:#0d0c0b;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;overflow-y:auto;overscroll-behavior:contain;color:#fff}
dialog.zoom[open]{display:flex;flex-direction:column}
dialog.zoom::backdrop{background:#0d0c0b}
dialog.zoom .shot{margin:auto;flex:none;max-width:100%}
dialog.zoom img{width:100%;height:auto;border-radius:14px;display:block}
.zoom-close{position:fixed;top:max(10px,calc(env(safe-area-inset-top) + 6px));right:max(10px,calc(env(safe-area-inset-right) + 6px));width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);background:rgba(13,12,11,.75);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:2}
.zoom-close svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;fill:none}
.zoom-close:hover,.zoom-close:focus-visible{background:#fff;color:#0d0c0b}
html.zoom-open,html.zoom-open body{overflow:hidden}

@media(max-width:520px){
  body.reader-page{padding:0 16px 48px}
  .rp-lang{max-width:none;width:auto;padding:5px 4px}
  .st-auto{display:none}
  .st-play{padding:0}
  .st-all{font-size:.88rem;text-align:end;line-height:1.25}
  .rp-nav-right{gap:8px}
  .reader-page .open-app-link{white-space:normal;text-align:center;line-height:1.2;font-size:.85rem;padding:5px 8px}
  .site-logo{font-size:1rem}
  .rp-head{padding-top:14px}
  .rp-head .sub{font-size:.95rem}
}

/* ---------- invite-only beta: request access ---------- */
.rp-access{max-width:640px;margin:18px auto 6px;padding:16px 18px;border:1.5px solid var(--fg);border-radius:12px;box-shadow:4px 4px 0 var(--fg);display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.guide .rp-access{margin:18px 0 6px}
.rp-access-badge{color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:1px 10px;font-size:.8rem;font-weight:600}
.rp-access p{flex:1 1 100%;margin:0;color:var(--fg);font-size:.98rem}
.rp-access-btn{display:inline-block;padding:10px 20px;background:var(--fg);color:#fff;border-radius:8px;font-weight:600;text-decoration:none}
.rp-access-btn:hover{background:var(--accent)}

/* ---------- one panel at a time, wide and low screens (laptops) ----------
 * Width > height and >= 700px: caption or bubble LEFT of the picture (right on
 * RTL), picture fitted to the screen height, text large and vertically centred,
 * text column ~40% of a block of at most 1100px (reader.js sets the width).
 * The tail of a bubble points sideways at Lena, the thought dots go sideways. */
.st-wide .st-slide .panel{display:grid;grid-template-columns:var(--capw,40%) 1fr;align-items:stretch}
.st-wide .st-slide .panel .caption{order:-1;min-height:0;border-bottom:0;border-inline-end:3px solid var(--ink);font-size:clamp(20px,1.75vw,24px);line-height:1.35;padding:24px 22px;align-items:flex-start}
.st-wide .st-slide .stage{width:100%;aspect-ratio:4/5}
.st-wide .st-slide .caption .txt{min-width:0}
.kb-wrap{white-space:nowrap}
/* Bubbles and instruction plaques sit at the top of the column; the tail
 * belongs to the bubble itself (--tail-y, set by reader.js) and runs from its
 * inline-end edge across the column border onto the picture. */
.st-wide .st-slide .caption.speech,.st-wide .st-slide .caption.thought{padding:0 26px 0 18px;align-items:flex-start;overflow:visible}
[dir=rtl] .st-wide .st-slide .caption.speech,[dir=rtl] .st-wide .st-slide .caption.thought{padding:0 18px 0 26px}
.st-wide .st-slide .caption.speech::before,.st-wide .st-slide .caption.speech::after,
.st-wide .st-slide .caption.thought::before,.st-wide .st-slide .caption.thought::after{content:none}
.st-wide .st-slide .caption.speech .txt,.st-wide .st-slide .caption.thought .txt{padding:14px 18px;margin-top:var(--bub-top,24px)}
.st-wide .st-slide .caption .txt::before,.st-wide .st-slide .caption .txt::after{content:"";position:absolute;pointer-events:none}
.st-wide .st-slide .caption.speech .txt::before{inset-inline-start:calc(100% - 2px);top:calc(var(--tail-y,30px) - 13px);border:13px solid transparent;border-inline-start:46px solid var(--ink);border-inline-end:0}
.st-wide .st-slide .caption.speech .txt::after{inset-inline-start:calc(100% - 4.5px);top:calc(var(--tail-y,30px) - 9px);border:9px solid transparent;border-inline-start:40px solid #fff;border-inline-end:0}
.st-wide .st-slide .caption.thought .txt::before{inset-inline-start:calc(100% + 6px);top:calc(var(--tail-y,30px) - 9px);width:16px;height:16px;border:2.5px solid var(--ink);border-radius:50%;background:#fff}
.st-wide .st-slide .caption.thought .txt::after{inset-inline-start:calc(100% + 28px);top:calc(var(--tail-y,30px) - 5px);width:9px;height:9px;border:2.5px solid var(--ink);border-radius:50%;background:#fff}
/* in the small comic insets the words sit one space apart: thinner outline, tighter gap */
.inset .hl{outline-width:1.5px;outline-offset:1px;box-shadow:0 0 3px 1px rgba(255,122,26,.25);animation-name:hl-pulse-sm}
@keyframes hl-pulse-sm{0%,100%{outline-color:rgba(255,122,26,.75);box-shadow:0 0 2px 0 rgba(255,122,26,.2)}50%{outline-color:rgba(255,122,26,1);box-shadow:0 0 5px 1px rgba(255,122,26,.45)}}
/* phones: one caption height for all panels; a caption taller than the cap scrolls inside */
.st-measure .st-slide .panel{box-shadow:none}

/* ---------- phones: bubble at the bottom of the caption zone ----------
 * The bubble sits at the BOTTOM of the zone, next to Lena; its short tail / the
 * thought dots leave the zone onto the picture, drawn above it; spare room
 * stays at the top. A caption that would take too much of the screen
 * gets a smaller font (data-cap-small), never a scrollbar. */
.stories:not(.st-wide) .st-slide .caption.speech,.stories:not(.st-wide) .st-slide .caption.thought{align-items:flex-end;overflow:visible}
.stories:not(.st-wide) .st-slide .caption.speech::before,.stories:not(.st-wide) .st-slide .caption.speech::after,
.stories:not(.st-wide) .st-slide .caption.thought::before,.stories:not(.st-wide) .st-slide .caption.thought::after{content:none}
.stories:not(.st-wide) .st-slide .caption .txt::before,.stories:not(.st-wide) .st-slide .caption .txt::after{content:"";position:absolute;pointer-events:none}
.stories:not(.st-wide) .st-slide .caption.speech .txt::before{left:calc(var(--tail,.5) * 100% - 16px);top:calc(100% - 2px);border-left:16px solid transparent;border-right:16px solid transparent;border-top:36px solid var(--ink)}
.stories:not(.st-wide) .st-slide .caption.speech .txt::after{left:calc(var(--tail,.5) * 100% - 12px);top:calc(100% - 4.5px);border-left:12px solid transparent;border-right:12px solid transparent;border-top:27px solid #fff}
.stories:not(.st-wide) .st-slide .caption.thought .txt::before{left:calc(var(--tail,.5) * 100% - 10px);top:calc(100% + 5px);width:18px;height:14px;border:2.5px solid var(--ink);border-radius:50%;background:#fff}
.stories:not(.st-wide) .st-slide .caption.thought .txt::after{left:calc(var(--tail,.5) * 100% - 4px);top:calc(100% + 22px);width:11px;height:9px;border:2.5px solid var(--ink);border-radius:50%;background:#fff}
[data-cap-small="1"] .st-slide .caption{font-size:1rem}
[data-cap-small="2"] .st-slide .caption{font-size:.92rem}

/* ---------- the video (after the comic, before the guide) ---------- */
.rp-video{max-width:760px;margin:18px auto 4px}
.rp-video-link,.rp-video-frame{display:block;position:relative;width:100%;aspect-ratio:16/9;border:3px solid var(--ink);border-radius:8px;box-shadow:4px 4px 0 var(--ink);overflow:hidden;background:#000}
.rp-video-frame{border-width:3px}
.rp-video-link img{display:block;width:100%;height:100%;object-fit:cover}
.rp-video-play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:rgba(13,12,11,.78);display:grid;place-items:center;transition:transform .15s,background .15s}
.rp-video-play svg{width:34px;height:34px;fill:#fff;transform:translateX(3px)}
.rp-video-link:hover .rp-video-play,.rp-video-link:focus-visible .rp-video-play{background:var(--accent);transform:scale(1.06)}
.rp-video-label{text-align:center;margin:10px 0 0;font-weight:600}