/* One print job, three acts. Native page scroll stays in control. */
.bps-story.bbs-story{--bbs-draft:1;--bbs-prep:0;--bbs-finish:0;--bbs-progress:0;--bbs-spread:0;--bbs-lift:0;position:relative;isolation:isolate;height:310svh;min-height:0;background:#eae5da;color:#242938;overflow:visible}
.bbs-stage{position:sticky;top:0;height:100svh;min-height:540px;max-height:none;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);grid-template-rows:auto minmax(0,1fr) auto;gap:25px 6%;padding:28px 5% 20px;box-sizing:border-box;overflow:hidden}
.bbs-heading{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;font:8px/1.5 Arial,sans-serif;letter-spacing:.13em;border-bottom:1px solid #24293833;padding-bottom:17px}.bbs-heading>span:last-child{text-align:right}
.bbs-scene{position:relative;isolation:isolate;min-width:0;min-height:0;overflow:hidden;background:#d6d1c4;box-shadow:0 8px 22px #25283a12}
.bbs-table{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#39392f05 0 1px,transparent 1px 6px),linear-gradient(125deg,#c6c1b4,#e8e3d9 48%,#d5cebe)}
.bbs-draft,.bbs-prep{position:absolute;inset:0;will-change:opacity,transform}.bbs-draft{opacity:var(--bbs-draft);transform:translateY(calc(-20px*var(--bbs-lift))) rotate(calc(-3deg*var(--bbs-lift)))}
.bbs-underpaper{position:absolute;width:53%;height:83%;left:21%;top:9%;background:#e0d9c9;transform:rotate(5deg);box-shadow:0 2px 4px #4a422c2b}
.bbs-drawing{position:absolute;left:22%;top:7%;width:54%;height:84%;background:repeating-linear-gradient(0deg,#6c797a0b 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,#6c797a0b 0 1px,transparent 1px 22px),#f7f3e6;transform:rotate(-4deg);box-shadow:0 8px 14px #3b352527;padding:11px}
.bbs-sheet-label{position:absolute;left:9%;top:4%;font-size:5px;letter-spacing:.1em;color:#6d6b61}.bbs-tape{position:absolute;top:-8px;left:37%;width:28%;height:22px;z-index:2;background:#d6bc8ac2;transform:rotate(2deg);border-inline:1px dashed #ba9f7370}
.bbs-graphic{display:block;width:100%;height:100%;overflow:visible;fill:#17253a}.bbs-graphite{fill:none;stroke:#666c6b;stroke-width:1.8;stroke-linejoin:round}.bbs-graphite text{stroke-width:.7;fill:#71746d}.bbs-graphite .bbs-guides{stroke:#92998c;stroke-width:.75;opacity:.55;stroke-dasharray:4 4;fill:none}.bbs-pencil-note{position:absolute;left:65%;top:45%;font:italic 9px/1.3 Georgia,serif;color:#7d7a6c;transform:rotate(8deg);white-space:nowrap}
.bbs-pencil{position:absolute;left:82%;top:22%;width:8px;height:54%;background:linear-gradient(90deg,#c19555 0 15%,#e0b47b 15% 60%,#a67942 60% 83%,#cd9d5f 83%);transform:rotate(19deg);box-shadow:3px 3px 3px #372b2430;border-radius:2px}.bbs-pencil:after{content:'';position:absolute;bottom:-19px;left:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:20px solid #c3a57b}.bbs-pencil:before{content:'';position:absolute;bottom:-20px;left:2px;z-index:2;border-left:2px solid transparent;border-right:2px solid transparent;border-top:7px solid #343534}.bbs-eraser{position:absolute;left:7%;bottom:14%;height:16px;width:39px;background:linear-gradient(90deg,#e0b4a5 67%,#426da7 67%);border-radius:3px;transform:rotate(-17deg);box-shadow:2px 3px 3px #4e443322}
.bbs-prep{opacity:var(--bbs-prep);transform:translateY(calc((1 - var(--bbs-prep))*18px))}.bbs-lightbox{position:absolute;inset:7% 6% 9%;background:linear-gradient(120deg,#fafbf5,#e7eee5);border:8px solid #545b5e;border-radius:5px;box-shadow:0 8px 16px #3b35252b,inset 0 0 25px #b3cfce88}.bbs-lightbox>span{position:absolute;left:5%;top:3%;font-size:5px;letter-spacing:.08em;color:#5d6f72}
.bbs-film{position:absolute;left:27%;top:12%;width:48%;height:77%;background:linear-gradient(120deg,#ffffff50,#c6e0dd14 50%,#ffffff80);border:1px solid #849c9780;box-shadow:6px 7px 12px #303f361d;transform-origin:center;will-change:transform}.bbs-film-a{transform:translate(calc(-24%*var(--bbs-spread)),calc(-3%*var(--bbs-spread))) rotate(calc(-8deg*var(--bbs-spread)))}.bbs-film-b{transform:translate(calc(24%*var(--bbs-spread)),calc(4%*var(--bbs-spread))) rotate(calc(7deg*var(--bbs-spread)));background:#eef7ef78}.bbs-film .bbs-graphic{position:absolute;inset:8%;width:84%;height:80%;fill:#17212c}.bbs-solid{position:absolute;inset:10% 9% 15%;background:#1c242b}.bbs-film>span{position:absolute;left:8%;right:6%;bottom:4%;font:5px/1.4 Arial,sans-serif;letter-spacing:.08em;display:flex;align-items:center;gap:5px;white-space:nowrap}.bbs-film>span i{width:7px;height:7px;background:#ed664c}.bbs-film-b>span i{background:#375ac7}
.bbs-reg{position:absolute;width:10px;height:10px;z-index:2}.bbs-reg:before,.bbs-reg:after{content:'';position:absolute;background:#263a3f}.bbs-reg:before{left:4px;width:1px;height:10px}.bbs-reg:after{top:4px;height:1px;width:10px}.bbs-reg-tl{left:4px;top:4px}.bbs-reg-tr{right:4px;top:4px}.bbs-reg-bl{left:4px;bottom:4px}.bbs-reg-br{right:4px;bottom:4px}
.bbs-finished{position:absolute;inset:0;opacity:var(--bbs-finish);transform:scale(calc(1.035 - .035*var(--bbs-finish)));will-change:opacity,transform}.bbs-finished img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}.bbs-edition-tag{position:absolute;right:5%;bottom:12%;background:#f8f3e8ef;padding:12px 15px;transform:rotate(3deg);font:7px/1.7 Arial,sans-serif;letter-spacing:.11em;box-shadow:0 3px 8px #25283a20}.bbs-edition-tag b{font-size:6px;font-weight:400}
.bbs-scene-caption{position:absolute;z-index:5;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:15px;padding:12px 15px;background:#242938ed;color:#f1ecdf;font:7px/1.4 Arial,sans-serif;letter-spacing:.07em}.bbs-scene-caption>span:last-child{white-space:nowrap}
.bbs-copy{align-self:center;min-width:0}.bbs-kicker{font-size:8px;line-height:1.8;letter-spacing:.15em}.bbs-copy h2{font-size:clamp(33px,4.5vw,63px)!important;line-height:1.04!important;letter-spacing:-.06em!important;font-weight:700!important;margin:22px 0 30px!important}.bbs-copy h2 em{color:#375ac7}.bbs-chapters{display:grid;min-height:165px}.bbs-chapter{grid-area:1/1;opacity:0;transform:translateY(8px);visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility 0s .22s}.bbs-chapter[aria-hidden=false]{visibility:visible;opacity:1;transform:none;transition-delay:.06s}.bbs-chapter-number{font-size:8px;letter-spacing:.11em;color:#6e6a61}.bbs-chapter h3{font-size:24px!important;line-height:1.14!important;margin:12px 0!important;font-weight:600!important;letter-spacing:-.045em!important}.bbs-chapter p{font-size:12px;line-height:1.85;max-width:340px}.bbs-inks{display:flex;align-items:center;gap:7px;margin-top:23px;font-size:6px;letter-spacing:.09em}.bbs-inks i{display:block;width:15px;height:21px;background:#ed664c;transform:rotate(-6deg)}.bbs-inks i+i{background:#375ac7;transform:rotate(5deg);margin-right:4px}.bbs-footnote{font-size:8px!important;line-height:1.6!important;color:#757163;margin-top:20px!important;max-width:260px}
.bbs-navigation{grid-column:1/-1}.bbs-track{height:2px;background:#24293825;margin-bottom:12px;overflow:hidden}.bbs-track>span{display:block;height:100%;background:#375ac7;transform:scaleX(0);transform-origin:left}.bbs-nav-row{display:flex;justify-content:space-between;align-items:center;gap:20px}.bbs-scroll-hint{font-size:7px;letter-spacing:.1em}.bbs-scroll-hint>span{margin-left:10px}.bbs-buttons{display:flex;gap:6px}.bbs-buttons button{display:flex;align-items:center;gap:15px;min-height:44px;background:transparent;border:1px solid #24293833;padding:10px 15px;font-size:10px!important;color:#242938}.bbs-buttons button>span{font-size:7px;color:#6e6a61}.bbs-buttons button[aria-pressed=true]{background:#242938;color:#f7f2e6;border-color:#242938}.bbs-buttons button[aria-pressed=true]>span{color:#b9baca}.bbs-buttons button:focus-visible{outline:3px solid #375ac7;outline-offset:3px}
@media(max-width:700px){.bbs-stage{min-height:0;padding:20px 6% 14px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(140px,1fr) auto auto;gap:14px}.bbs-heading{font-size:6px;padding-bottom:10px;gap:12px}.bbs-heading>span:last-child{max-width:100px}.bbs-scene{grid-row:2;min-height:140px}.bbs-copy{grid-row:3;display:grid;grid-template-columns:minmax(0,1fr);align-items:start}.bbs-kicker{display:none}.bbs-copy h2{font-size:26px!important;line-height:1!important;margin:0 0 12px!important}.bbs-copy h2 br{display:none}.bbs-copy h2 em{margin-left:.1em}.bbs-chapters{min-height:132px}.bbs-chapter-number{font-size:7px}.bbs-chapter h3{font-size:21px!important;margin:7px 0!important}.bbs-chapter p{font-size:11px;line-height:1.65;max-width:100%}.bbs-inks,.bbs-footnote{display:none}.bbs-navigation{grid-row:4}.bbs-scroll-hint{display:none}.bbs-nav-row{display:block}.bbs-buttons{width:100%;gap:5px}.bbs-buttons button{flex:1;justify-content:center;padding:8px 5px;gap:7px;font-size:9px!important}.bbs-scene-caption{font-size:6px;padding:9px 10px}.bbs-edition-tag{padding:7px 10px;font-size:6px}.bbs-film>span{font-size:4px}.bbs-pencil-note{font-size:7px}}
@media(max-width:700px) and (max-height:620px){.bbs-stage{padding:12px 6% 10px;gap:9px;grid-template-rows:auto minmax(110px,1fr) auto auto}.bbs-heading{font-size:5px;padding-bottom:6px}.bbs-copy h2{display:none}.bbs-chapters{min-height:108px}.bbs-chapter h3{font-size:18px!important;margin:5px 0!important}.bbs-chapter p{font-size:10px;line-height:1.55}.bbs-scene{min-height:110px}.bbs-sheet-label{font-size:4px}.bbs-pencil-note{display:none}.bbs-track{margin-bottom:7px}.bbs-buttons button{min-height:44px;font-size:8px!important;gap:4px}.bbs-scene-caption{padding:7px 9px;font-size:5px}}
@media(min-width:701px) and (max-height:540px){.bbs-stage{min-height:0;padding:12px 5%;gap:12px 5%}.bbs-heading{padding-bottom:8px;font-size:6px}.bbs-copy h2{font-size:27px!important;margin:10px 0 17px!important}.bbs-kicker,.bbs-inks,.bbs-footnote{display:none}.bbs-chapters{min-height:140px}.bbs-chapter h3{font-size:20px!important}.bbs-chapter p{font-size:11px;line-height:1.65}.bbs-track{margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){.bbs-story *{transition:none!important;animation:none!important}.bbs-draft,.bbs-prep,.bbs-finished{will-change:auto;transform:none}.bbs-film{will-change:auto}}
/* Paper and film keep their portrait proportions even in a tall phone scene. */
.bbs-table,.bbs-lightbox{container-type:size}
.bbs-drawing,.bbs-underpaper{width:min(54cqw,67.2cqh);height:auto;aspect-ratio:4/5;left:50%;top:50%}
.bbs-drawing{transform:translate(-50%,-50%) rotate(-4deg)}.bbs-underpaper{transform:translate(-48%,-48%) rotate(5deg)}
.bbs-film{width:min(48cqw,61.6cqh);height:auto;aspect-ratio:4/5;left:50%;top:50%}
.bbs-film-a{transform:translate(calc(-50% - 24%*var(--bbs-spread)),calc(-50% - 3%*var(--bbs-spread))) rotate(calc(-8deg*var(--bbs-spread)))}
.bbs-film-b{transform:translate(calc(-50% + 24%*var(--bbs-spread)),calc(-50% + 4%*var(--bbs-spread))) rotate(calc(7deg*var(--bbs-spread)))}
@media(max-width:700px){.bbs-drawing,.bbs-underpaper{width:min(70cqw,67.2cqh)}.bbs-film{width:min(63cqw,61.6cqh)}}
/* Size the pencil against the paper, including its point, rather than the scene. */
.bbs-pencil{--bbs-pencil-paper-width:min(54cqw,67.2cqh);--bbs-pencil-width:calc(var(--bbs-pencil-paper-width)*.025);top:31%;width:var(--bbs-pencil-width);height:calc(var(--bbs-pencil-paper-width)*.625 - var(--bbs-pencil-width)*2)}
.bbs-pencil:after{bottom:calc(var(--bbs-pencil-width)*-2);border-left:calc(var(--bbs-pencil-width)/2) solid transparent;border-right:calc(var(--bbs-pencil-width)/2) solid transparent;border-top:calc(var(--bbs-pencil-width)*2) solid #c3a57b}
.bbs-pencil:before{left:calc(var(--bbs-pencil-width)*.3);bottom:calc(var(--bbs-pencil-width)*-2);border-left:calc(var(--bbs-pencil-width)*.2) solid transparent;border-right:calc(var(--bbs-pencil-width)*.2) solid transparent;border-top:calc(var(--bbs-pencil-width)*.8) solid #343534}
@media(max-width:700px){.bbs-pencil{--bbs-pencil-paper-width:min(70cqw,67.2cqh)}}