/* Bread & Circuses. The page is the comic: white paper, wobbly ink frames, marker
   lettering, one crown of gold. Mobile first; the desktop layout is the phone
   column with more air. */
@font-face{font-family:Hand;src:url(/assets/hand.ac5bc9033b.woff2) format('woff2');font-display:swap}
@font-face{font-family:Body;src:url(/assets/body.f15631aba9.woff2) format('woff2');font-weight:300 800;font-display:swap}
@font-face{font-family:Brush;src:url(/assets/brush.1e1ef30f8b.woff2) format('woff2');font-display:swap}
@font-face{font-family:Roman;src:url(/assets/roman.61efc27ceb.woff2) format('woff2');font-display:swap}
:root{--ink:#111;--paper:#fff;--gold:#f8c81e;--red:#d4261f;--green:#37953f;--blue:#1c5aa6;--pink:#ee4f93;--note:#fdf0cc;--mint:#e3f3dc;--grey:#a3a3a3;--soft:#555;
--wob:15px 10px 17px 9px/10px 16px 9px 15px;--wob2:9px 16px 10px 15px/15px 9px 16px 10px;--dock:62px;--bar:54px}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--bar) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='3' cy='3' r='1' fill='%23e6e6e6'/%3E%3C/svg%3E");color:var(--ink);font:400 1.06rem/1.5 Body,'Comic Sans MS',system-ui,sans-serif;padding-bottom:calc(var(--dock) + env(safe-area-inset-bottom));overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
button,input{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
a{color:var(--blue);text-underline-offset:2px}
h1,h2,h3{font-family:Hand,Body,sans-serif;font-weight:400;line-height:1.05;margin:0;letter-spacing:.01em}
p{margin:.55em 0}
b{font-weight:750}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);padding:10px;z-index:90}.skip:focus{left:8px;top:8px}
.hide{display:none!important}

/* top bar */
.bar{position:sticky;top:0;z-index:40;height:var(--bar);display:flex;align-items:center;gap:8px;padding:0 10px;background:var(--gold);border-bottom:3.5px solid var(--ink)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font:400 1.5rem/1 Brush,Hand,sans-serif;margin-right:auto;min-width:0;white-space:nowrap}
.brand img{width:32px;height:32px}
.chip{display:inline-flex;align-items:center;gap:5px;min-height:40px;padding:0 11px;border:2.5px solid var(--ink);border-radius:var(--wob2);background:#fff;font:400 1.08rem/1 Hand,sans-serif}
.chip svg{width:16px;height:16px}

/* a section is a page of comic */
main{max-width:640px;margin:0 auto;padding:12px 10px 0}
.panel{position:relative;background:#fff;border:3.5px solid var(--ink);border-radius:var(--wob);padding:14px 14px 18px;margin:0 0 16px;overflow:hidden}
.panel:nth-of-type(even){border-radius:var(--wob2)}
.num{float:left;font:400 2.5rem/.86 Hand,sans-serif;margin:0 9px 0 0}
.panel h2{font-size:1.95rem;text-transform:uppercase;min-height:2.1rem}
.lede{font-size:1.1rem;clear:both;padding-top:6px}
.strip{display:block;width:100%;border:0;padding:0;background:none;margin:10px 0;position:relative}
.strip img{width:100%;border:2.5px solid var(--ink);border-radius:9px}
.strip .zoomhint{position:absolute;right:7px;bottom:7px;background:#fff;border:2px solid var(--ink);border-radius:8px;padding:0 7px;font:400 .95rem/1.5 Hand,sans-serif}
.spoken{outline:3.5px solid var(--gold);outline-offset:3px;border-radius:9px}

/* hero */
.hero{padding:0;border-width:3.5px}
.hero .top{padding:13px 14px 8px;background:var(--gold);border-bottom:3.5px solid var(--ink)}
.hero h1{font:400 3.1rem/.92 Brush,Hand,sans-serif}
.hero .tag{font:400 1.32rem/1.12 Hand,sans-serif;margin:.3em 0 0}
.hero .art{position:relative;border:0;padding:0;background:none;width:100%;display:block}
.hero .art img{width:100%}
.badge{position:absolute;right:9px;bottom:9px;background:#fff;border:2.5px solid var(--ink);border-radius:var(--wob2);padding:1px 8px;font:400 1.02rem/1.35 Hand,sans-serif;transform:rotate(-2deg)}
.listen{padding:12px 14px 0}
.listen-btn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--red);color:#fff;border:3.5px solid var(--ink);border-radius:var(--wob);padding:10px 12px;box-shadow:4px 4px 0 var(--ink)}
.listen-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.listen-btn .ico{flex:none;width:50px;height:50px;border-radius:50%;background:#fff;color:var(--red);display:grid;place-items:center;border:2.5px solid var(--ink)}
.listen-btn .ico svg{width:24px;height:24px}
.listen-btn b{display:block;font:400 1.6rem/1 Hand,sans-serif}
.listen-btn small{font-size:.92rem}
.cast{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;text-align:center}
.cast li{font:400 .98rem/1.05 Hand,sans-serif;border:2.5px solid transparent;border-radius:10px;padding:3px 1px;min-width:0}
.cast li.on{border-color:var(--ink);background:var(--gold)}
.cast svg{width:46px;height:46px;display:block;margin:0 auto}
.cast small{display:block;font:400 .78rem/1.1 Body,sans-serif;color:var(--soft)}
.hero .body{padding:6px 14px 16px}

/* buttons, bubbles, captions */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:6px 15px;background:var(--gold);border:3px solid var(--ink);border-radius:var(--wob2);box-shadow:3px 3px 0 var(--ink);font:400 1.2rem/1.05 Hand,sans-serif;text-decoration:none;color:var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn[disabled]{opacity:.45;box-shadow:none}
.btn.quiet{background:#fff}
.btn svg{width:17px;height:17px}
.row{display:flex;flex-wrap:wrap;gap:9px;margin:10px 0}
.bub{position:relative;background:#fff;border:3px solid var(--ink);border-radius:20px 24px 18px 26px/22px 18px 26px 20px;padding:9px 13px;margin:12px 0 18px;font:400 1.22rem/1.2 Hand,sans-serif}
.bub:after{content:"";position:absolute;left:26px;bottom:-14px;width:18px;height:18px;background:#fff;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:skewX(32deg) rotate(38deg)}
.note{background:var(--note);border:2.5px solid var(--ink);border-radius:10px;padding:8px 11px;margin:12px 0;font-size:.98rem}
.note.win{background:var(--mint)}
.src{font-size:.86rem;color:var(--soft);margin:.5em 0 0}
.lab{font:400 1.32rem/1.08 Hand,sans-serif;margin:16px 0 4px;text-transform:uppercase}
.fade{animation:pop .28s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* the slider everything is built on */
.rng{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:none;margin:2px 0;touch-action:pan-y}
.rng::-webkit-slider-runnable-track{height:12px;border:2.5px solid var(--ink);border-radius:8px;background:linear-gradient(90deg,var(--gold) var(--p,50%),#fff var(--p,50%))}
.rng::-moz-range-track{height:8px;border:2.5px solid var(--ink);border-radius:8px;background:#fff}
.rng::-moz-range-progress{height:8px;background:var(--gold)}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:36px;height:36px;margin-top:-14px;border-radius:50%;background:var(--red);border:3px solid var(--ink)}
.rng::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:var(--red);border:3px solid var(--ink)}
.rng-ends{display:flex;justify-content:space-between;gap:10px;font:400 1.02rem/1.05 Hand,sans-serif}
.rng-ends span:last-child{text-align:right}
.big{font:400 2.5rem/1 Hand,sans-serif}
.big small{font-size:1.1rem}

/* puppet */
.puppet{display:block;width:100%;max-height:230px;margin:6px 0 0}
.puppet path,.puppet circle,.puppet line{transition:d .25s,all .25s}

/* choice */
.opts{display:grid;gap:8px;margin:8px 0}
.opt{text-align:left;background:#fff;border:3px solid var(--ink);border-radius:var(--wob2);padding:9px 12px;min-height:48px;font:400 1.17rem/1.13 Hand,sans-serif}
.opt.yes{background:var(--mint)}.opt.no{background:#fbdcdc}.opt[disabled]{color:var(--ink)}

/* Juvenal's lines */
.latin{background:#f1ede4;border:3px solid var(--ink);border-radius:10px;padding:9px 8px;margin:10px 0}
.lat{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:2px dashed #b9b09d;padding:8px 4px;font:600 1rem/1.25 Roman,serif;letter-spacing:.015em}
.lat:last-child{border-bottom:0}
.lat span{display:block;font:400 1.14rem/1.14 Hand,sans-serif;color:var(--ink);letter-spacing:0;max-height:0;overflow:hidden;opacity:0;transition:max-height .25s,opacity .25s}
.lat.on span{max-height:7em;opacity:1;margin-top:3px}
.lat.key{color:var(--red)}

/* Rome dial */
.dial{border:3px solid var(--ink);border-radius:10px;padding:9px 11px;margin:10px 0;background:#fff}
.dial-y{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.dial-y b{font:400 2rem/1 Hand,sans-serif}
.dial-ev{min-height:5.6em;font-size:.98rem}
.dial-ev p{margin:.1em 0}
.days{display:grid;grid-template-columns:repeat(20,1fr);gap:2px;margin:6px 0 2px}
.days i{aspect-ratio:1;background:#eee;border-radius:2px}.days i.on{background:var(--red)}

/* tabs */
.tabs{display:flex;gap:6px;margin:10px 0 0}
.tab{flex:1;background:#fff;border:3px solid var(--ink);border-bottom:0;border-radius:11px 11px 0 0;padding:7px 3px;font:400 1.13rem/1 Hand,sans-serif;min-height:46px}
.tab[aria-selected=true]{background:var(--gold)}
.tabp{border:3px solid var(--ink);border-radius:0 0 10px 10px;padding:6px 12px}

/* people bar */
.people{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin:8px 0}
.people svg{width:100%;height:auto}
.people .m{color:var(--blue)}.people .w{color:var(--pink)}

/* compare bars */
.gapq{margin:14px 0;padding-top:4px;border-top:2.5px dashed #ccc}
.gapq:first-of-type{border-top:0}
.bars{display:grid;grid-template-columns:4.9em 1fr;gap:4px 8px;align-items:center;margin:6px 0;font:400 1.03rem/1 Hand,sans-serif}
.barv{height:28px;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;border:2.5px solid var(--ink);border-radius:6px;font:400 1.1rem/1 Hand,sans-serif;min-width:36px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.barv.g{background:var(--green);color:#fff}.barv.n{background:var(--grey)}.barv.y{background:#fff;border-style:dashed}

/* the day */
.tower{display:flex;flex-direction:column-reverse;gap:3px;margin:8px 0}
.blk{display:grid;grid-template-columns:1fr auto auto auto;gap:6px;align-items:center;border:3px solid var(--ink);border-radius:7px;padding:2px 5px 2px 9px;min-height:44px;font:400 1.13rem/1 Hand,sans-serif}
.blk output{min-width:3.1em;text-align:right}
.blk button{width:40px;height:38px;border:2.5px solid var(--ink);border-radius:7px;background:#fff;font:400 1.3rem/1 Hand,sans-serif;padding:0}
.blk.fixed{grid-template-columns:1fr auto}

/* checklist */
.checks{list-style:none;padding:0;margin:9px 0}
.checks li{margin:6px 0}
.check{display:flex;gap:9px;align-items:flex-start;width:100%;text-align:left;background:#fff;border:3px solid var(--ink);border-radius:var(--wob2);padding:8px 10px;font:400 1.16rem/1.1 Hand,sans-serif;text-decoration:none;color:var(--ink)}
.check i{flex:none;width:25px;height:25px;border:2.5px solid var(--ink);border-radius:5px;display:grid;place-items:center;font:400 1.3rem/1 Hand,sans-serif;font-style:normal;color:var(--green)}
.check.done{background:var(--mint)}
.verdict{background:var(--mint);border:3.5px solid var(--ink);border-radius:var(--wob);padding:10px 13px;font:400 1.5rem/1.1 Hand,sans-serif;text-align:center;margin:12px 0}

/* share tiles */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:10px 0}
.tile-pick{padding:0;border:3px solid var(--ink);border-radius:9px;overflow:hidden;background:#fff;display:block}
.tile-pick img{width:100%;aspect-ratio:1;object-fit:cover}
.tile-pick span{display:block;padding:4px 6px;font:400 1rem/1.05 Hand,sans-serif;min-height:2.4em}
footer{max-width:640px;margin:0 auto;padding:6px 14px 26px;font-size:.92rem}
.srcs{padding-left:1.25em}.srcs li{margin:.4em 0;overflow-wrap:anywhere}
.transcript{border:3px solid var(--ink);border-radius:10px;padding:8px 11px;margin:10px 0}
.transcript summary{font:400 1.2rem/1.2 Hand,sans-serif;cursor:pointer;min-height:32px}
.transcript p{margin:.35em 0;font-size:.98rem}.transcript p b{display:block;font:400 1.02rem/1.1 Hand,sans-serif}
.t-ch{font:400 1.3rem/1.1 Hand,sans-serif!important;margin-top:1em!important}

/* dock: the nine panels */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:4px;justify-content:center;padding:7px 8px calc(7px + env(safe-area-inset-bottom));background:var(--ink)}
.dock a{flex:1;max-width:58px;min-height:44px;display:grid;place-items:center;background:#fff;border-radius:7px;text-decoration:none;color:var(--ink);font:400 1.3rem/1 Hand,sans-serif}
.dock a.on{background:var(--gold)}
.dock a.done{background:var(--mint)}.dock a.on.done{background:var(--gold)}

/* the talking bubble, on air while narration runs */
#onair{position:fixed;z-index:48;left:9px;right:9px;bottom:calc(var(--dock) + 118px + env(safe-area-inset-bottom));max-width:620px;margin:0 auto;display:flex;gap:7px;align-items:flex-end;pointer-events:none}
#onair[hidden]{display:none}
#onair.r{flex-direction:row-reverse}
#onair svg{flex:none;width:50px;height:50px;background:#fff;border:2.5px solid var(--ink);border-radius:50%}
#onair p{margin:0;background:#fff;border:3px solid var(--ink);border-radius:15px 18px 14px 19px/17px 14px 19px 15px;padding:5px 10px;font:400 1.08rem/1.13 Hand,sans-serif;box-shadow:3px 3px 0 var(--ink)}
#onair p b{display:block;font-size:.87rem;color:var(--red);line-height:1}

/* sheets */
dialog.sheet{border:3.5px solid var(--ink);border-radius:var(--wob);padding:13px;width:min(96vw,560px);max-height:88dvh;overflow:auto;background:#fff}
dialog.sheet::backdrop{background:rgba(0,0,0,.65)}
.sheet-x{float:right}
.sh-card{width:min(100%,290px);margin:0 auto 8px;border:2.5px solid var(--ink);border-radius:8px}
.sh-post{font-size:.98rem}
.sh-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sh-acts .btn{font-size:1.08rem}
.sh-acts .ghost{background:#fff}
.sh-masto{grid-column:1/-1;display:none;gap:6px}.sh-masto.on{display:flex}
.sh-masto input{flex:1;min-width:0;border:2.5px solid var(--ink);border-radius:8px;padding:8px}
.sh-small{font-size:.84rem;color:var(--soft)}
#zoomSheet{padding:6px;width:98vw;max-width:none}
#zoomScroll{overflow:auto;max-height:80dvh}
#zoomImg{width:max(100%,760px);max-width:none}
.toast{position:fixed;z-index:80;left:50%;bottom:calc(var(--dock) + 64px);transform:translateX(-50%);background:var(--ink);color:#fff;padding:7px 14px;border-radius:9px;font:400 1.1rem/1.1 Hand,sans-serif;white-space:nowrap}

/* card page */
.card-body{padding-bottom:30px}
.card-main{max-width:560px;margin:0 auto;padding:12px}
.card-others{display:grid;gap:2px;margin-top:12px;font-size:.95rem}

/* the house player, drawn in ink */
body .narr{--panel:#fff;--bg:#fff;--dim:#222;--faint:#555;--rule:#111;--accent:var(--red);--mono:Hand,sans-serif;bottom:calc(var(--dock) + env(safe-area-inset-bottom));z-index:49}
body .narr-bar{border-top:3.5px solid var(--ink)}
body .narr-pill{border:3px solid var(--ink);border-radius:var(--wob2);font-size:1.1rem;letter-spacing:0;text-transform:none;box-shadow:3px 3px 0 var(--ink);background:var(--gold)}
body .narr-pill .ico{color:var(--ink)}body .narr-pill .meta{color:#333}
body .narr-label{font-size:1.1rem;letter-spacing:0}body .narr-sub{font-size:.9rem;letter-spacing:0}
body .narr-btn{font-size:1rem;letter-spacing:0;text-transform:none;border:2.5px solid var(--ink);border-radius:8px;color:var(--ink);min-height:38px}
body .narr-play{border:2.5px solid var(--ink)}
body .narr-controls{padding:.45rem .7rem;gap:.5rem}
body .narr-mark{background:#fff;border-color:var(--ink)}
body.at-listen .narr[data-state="collapsed"]{display:none}
@media (min-width:700px){body{font-size:1.1rem}.tiles{grid-template-columns:repeat(3,1fr)}#onair{bottom:calc(var(--dock) + 84px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}