/* Part II · the courtyard's envelopes */
.feed .row{animation:none;position:relative;overflow:hidden}
.feed .row.first{animation:in .6s ease both}
/* every few seconds, one envelope after another catches a little of the fire's light */
.feed .row::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;box-shadow:inset 0 0 0 1px rgba(255,155,102,.45),inset 0 0 40px rgba(255,155,102,.10)}
.feed .row::after{content:'';position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;opacity:0;transform:translateX(-110%);
  background:linear-gradient(100deg,transparent,rgba(255,155,102,.10) 30%,rgba(255,207,154,.30) 50%,rgba(255,155,102,.10) 70%,transparent)}
.feed .row.shim::after{animation:rshim 2.2s cubic-bezier(.45,0,.25,1) both}
.feed .row.shim::before{animation:rshimb 2.2s ease both}
@keyframes rshim{0%{opacity:0;transform:translateX(-110%)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(240%)}}
@keyframes rshimb{0%,100%{opacity:0}45%{opacity:1}}
@media (prefers-reduced-motion:reduce){.feed .row.shim::after,.feed .row.shim::before{animation:none}}
/* the envelope window ends where the two watches end, top and bottom */
@media (min-width:981px){
  .court{align-items:stretch}
  .court .fwrap{display:flex;flex-direction:column}
  .court .feed{flex:1;min-height:0;contain:size;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#1f3a6e transparent}
  .court .feed::-webkit-scrollbar{width:6px}.court .feed::-webkit-scrollbar-thumb{background:#1f3a6e;border-radius:3px}
}

/* the parts run edge to edge, like the first band */
.part{width:100vw;margin-left:calc(50% - 50vw)}

/* figures and devices side by side end on the same line, top and bottom; the drawing sits in the middle of its frame */
.v9 .twin{align-items:stretch}
.v9 .twin > .v9fig{display:flex;flex-direction:column}
.v9 .twin > .v9fig > svg{margin:auto 0}
.v9 .twin > .v9fig > figcaption{margin-top:14px}

/* Fig. 2 · the poll */
.pollfig2 .pcard{fill:#0b1534;stroke:#2f5a9e}
.pollfig2 .pline{fill:none;stroke:#1f3a6e;stroke-width:1}
.pollfig2 .ptrack2{fill:#0a1230;stroke:#1a2f5c}
.pollfig2 .pbt{fill:#cfe6ff;font-size:12px;letter-spacing:.2em}
.pollfig2 .pnum{fill:#9ef0ff;font-size:12px}
.pollfig2 .pmark{fill:#e8f4ff}
.pollfig2 .pglow{fill:#9ef0ff;opacity:.55}
.pollfig2 .pdot2{fill:#f2fbff}

/* Fig. 3 · the letter */
.letfig2 .lrail{stroke:#1f3a6e;stroke-width:1;stroke-dasharray:2 5}
.letfig2 .lrow{fill:rgba(11,21,52,.75);stroke:#1f3a6e}
.letfig2 .lrowlit{fill:none;stroke:#9ef0ff;stroke-width:1.2;filter:drop-shadow(0 0 8px rgba(158,240,255,.35))}
.letfig2 .lnode{fill:#0a1236;stroke:#3d70c3}
.letfig2 .lk{fill:#5f7fb4;font-size:11px;letter-spacing:.08em}
.letfig2 .lv{fill:#cfe6ff;font-size:12px}
.letfig2 .lcell{fill:#16264f;stroke:#24407a}
.letfig2 .lread{font-size:18px}
.letfig2 .lread.ciph{fill:#9fc2ee}
.letfig2 .lkey2{fill:none;stroke:#9ef0ff;stroke-width:1.8;stroke-linecap:round}
.letfig2 .lglow{fill:#9ef0ff;opacity:.6}
.letfig2 .lenv{fill:#0d1a44;stroke:#e8f4ff;stroke-width:1.2}
.letfig2 .lenvf{fill:none;stroke:#e8f4ff;stroke-width:1}
@media (max-width:560px){.letfig2 .lk{font-size:13px}.letfig2 .lv{font-size:14px}.pollfig2 .pbt,.pollfig2 .pnum{font-size:15px}.letfig2 .lread{font-size:19px}}

/* the seam between the door and the Order */
.seam{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:110px;overflow:hidden;--p:0}
.seam + .part{margin-top:0}
.seam .sl{position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,#1a2a4a 8%,#1a2a4a 92%,transparent)}
.seam .sl::after{content:'';position:absolute;left:0;top:0;height:1px;width:calc(var(--p) * 100%);background:linear-gradient(90deg,transparent,rgba(158,240,255,.55));transition:width .25s linear}
.seam .sp{position:absolute;left:0;right:0;top:50%}
.seam .sp i{position:absolute;top:-3px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#0a1236;border:1px solid #2a4a7a;transition:background .8s ease,border-color .8s ease,box-shadow .8s ease}
.seam .sp i.on{background:#e8f4ff;border-color:#9ef0ff;box-shadow:0 0 10px rgba(158,240,255,.7)}
.seam .sa,.seam .sb{position:absolute;top:calc(50% + 14px);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#4f6f9f}
.seam .sa{left:max(24px,calc(50vw - 640px + 48px))}.seam .sb{right:max(24px,calc(50vw - 640px + 48px));color:#7fa6d8}

/* Fig. 13 · recovery */
.recfig .rring{fill:none;stroke:#16264f;stroke-dasharray:3 6}
.recfig .rsign{stroke:#9ef0ff;stroke-width:1.1;stroke-dasharray:100 100}
.recfig .rg{fill:#0b1430;stroke:#24407a;stroke-width:1.2;transition:fill .8s,stroke .8s}
.recfig .rg.lit{fill:#10275a;stroke:#9ef0ff}
.recfig .rgt{fill:#9ec3ef;font-size:11px}
.recfig .rwal{fill:#0b1534;stroke:#7fbcff;stroke-width:1.2;transition:stroke .8s,opacity .8s,fill .8s}
.recfig .rwal.lost{stroke:#3d5a8a;stroke-dasharray:4 4;opacity:.7}
.recfig .rwal.back{stroke:#9ef0ff;fill:#10275a}
/* Fig. 14 · the sweep */
.sweepfig .swal{fill:#0b1534;stroke:#7fbcff;stroke-width:1.2}
.sweepfig .swire{fill:none;stroke:#1f3a6e;stroke-width:1}
.sweepfig .sfloor{stroke:#3d5a8a;stroke-width:1.4}
.sweepfig .sfloor.sell{stroke:#9ef0ff}.sweepfig .sfloor.dust{stroke:#ffcf9a}
.sweepfig .stok{fill:#0b1430;stroke:#6b8ac0;stroke-width:1.1}
.sweepfig .stok.sell{stroke:#9ef0ff}.sweepfig .stok.dust{stroke:#ffcf9a}
.sweepfig .snum{font-family:Disp,'Inter Display',sans-serif;font-size:20px;fill:#cfe6ff}
@media (max-width:560px){.recfig .rgt{font-size:14px}}

/* the contracts' print, and the scanner that reads it */
#cxp .rg{stroke:#2a4f8f;stroke-width:.9;opacity:.75}
#cxp .rh{fill:none;stroke:#cfe6ff;stroke-width:1;stroke-linecap:round}
#cxp .cxln{stroke:#9ef0ff;stroke-width:.8;filter:drop-shadow(0 0 4px rgba(158,240,255,.8))}
#cx .cxi{transition:opacity .6s ease,transform .6s ease,border-color .9s ease,background .9s ease}
#cx .cxi.ok{border-color:rgba(158,240,255,.6);background:rgba(61,112,195,.16)}
#cx .cxs{transition:color .6s}

/* quotes, word by word */
.qsplit .qw{display:inline-block;opacity:0;filter:blur(6px);transform:translateY(6px);transition:opacity 1.1s ease,filter 1.1s ease,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.qsplit.qon .qw{opacity:1;filter:none;transform:none}
.qband small{opacity:0;transition:opacity 1.2s ease 1.2s}
.qband.in small,.qband.on small{opacity:1}
#cxc{display:block;margin:0 auto;max-width:100%}
@media (max-width:980px){#cxc{width:180px!important;height:225px!important}}

/* the privacy note: the book's sentence types itself, like the hand device in chapter 6 */
.note2{margin-top:28px;display:grid;grid-template-columns:1.4fr 1fr;border:1px solid var(--line);background:linear-gradient(180deg,rgba(10,14,39,.6),rgba(5,5,16,.3))}
.note2>div{padding:22px 26px}
.note2 .nl{border-left:1px solid var(--line)}
.note2 small{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#4f78b8;margin-bottom:12px}
.note2 .tw{font-family:Disp,'Inter Display',sans-serif;font-weight:300;font-size:clamp(18px,1.7vw,23px);line-height:1.45;color:#e8f4ff;min-height:2.9em;margin:0}
.note2 .tw::after{content:'';display:inline-block;width:9px;height:1.05em;margin-left:3px;vertical-align:-3px;background:#9ef0ff;animation:cblink .8s steps(1) infinite}
.note2 .tw.done::after{animation:cblink 1.6s steps(1) infinite}
.note2 .nl p{font-size:13px;line-height:1.8;color:var(--txt);margin:0}
@media (max-width:820px){.note2{grid-template-columns:1fr}.note2 .nl{border-left:0;border-top:1px solid var(--line)}}

/* the courtyard: no more sheen across each envelope; now and then the whole window's edge glows the fire's colour */
.feed .row::before,.feed .row::after{content:none!important}
.court .feed{transition:box-shadow 1.6s ease,border-color 1.6s ease}
.court .feed.glow{border-color:rgba(255,155,102,.6);box-shadow:inset 0 0 0 1px rgba(255,155,102,.25),0 0 30px rgba(255,155,102,.12)}
.feed .row{transition:background-color 1.2s ease}
.feed .row.warm{background-color:rgba(255,155,102,.05)}
#letters .v9pane[data-v=read] .hint{font-size:13.5px;line-height:1.8;color:#9ec3ef}
.letfig2 .lkey2{stroke:#5fe3a1;stroke-width:1.6;filter:drop-shadow(0 0 6px rgba(95,227,161,.45))}