/* The Lanes. Mobile first: every rule below is the phone layout, and the two
   media queries at the end only widen it. Paper, ink and one red, from the
   drawing itself. */
@font-face{font-family:Display;src:url(/assets/display.560297e4bc.ttf) format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Mono;src:url(/assets/mono.48715a42ec.ttf) format('truetype');font-display:swap}
:root{
  --paper:#f4ecdc; --paper2:#fbf7ee; --ink:#161412; --dim:#5c554b; --red:#cc2b24; --red2:#f2c9c2;
  --metal:#e3dccd; --rule:#cfc5b2; --bar:56px;
  --SOFA:#3e5f8a; --NEIGHBOUR:#7a4e8c; --COURIER:#b5481f; --PARENT:#2f7a5a;
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--bar) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.5 ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;padding-bottom:96px}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration-color:var(--red);text-underline-offset:3px}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:99}
.skip:focus{left:8px}

/* ---- the bar: wordmark, the four live dials, share ---------------------- */
.bar{position:sticky;top:0;z-index:50;height:var(--bar);display:flex;align-items:center;gap:8px;padding:0 10px;
  background:rgba(244,236,220,.94);border-bottom:3px solid var(--ink);backdrop-filter:blur(6px)}
.bar-mark{font:700 20px/1 Display,sans-serif;letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.bar-dials{display:flex;gap:4px;margin-left:auto}
.mini{display:block;width:38px;height:38px;border-radius:8px}
.mini .gauge{width:38px;height:38px}
.mini.active{background:var(--red2)}
.bar-share{min-height:40px;padding:0 12px;border:2px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--paper);font:700 16px/1 Display,sans-serif;letter-spacing:.04em;cursor:pointer}

/* ---- hero ---------------------------------------------------------------- */
.hero{padding:14px 14px 8px}
.hero-art{margin:0}
.hero-art img{width:100%}
.hero-sub{font:700 22px/1.15 Display,sans-serif;margin:14px 0 12px;text-transform:uppercase}
.listen-btn{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:3px solid var(--ink);border-radius:16px;
  background:var(--red);color:#fff;text-align:left;cursor:pointer;box-shadow:4px 4px 0 var(--ink)}
.listen-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.listen-btn .ico{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--red);font-size:20px}
.listen-btn b{display:block;font:700 24px/1.05 Display,sans-serif;text-transform:uppercase}
.listen-btn small{display:block;font-size:14px;opacity:.95;margin-top:3px}
.cast{margin:18px 0 6px;padding:12px 14px;border:2px solid var(--ink);border-radius:12px;background:var(--paper2)}
.cast h2{font:700 18px/1 Display,sans-serif;text-transform:uppercase;margin:0 0 8px}
.cast ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:15px}
.cast li b{font-family:Display,sans-serif;font-size:17px;text-transform:uppercase}
.cast li.sp-SOFA b{color:var(--SOFA)} .cast li.sp-NEIGHBOUR b{color:var(--NEIGHBOUR)}
.cast li.sp-COURIER b{color:var(--COURIER)} .cast li.sp-PARENT b{color:var(--PARENT)}
.cast-note{font-size:13px;color:var(--dim);margin:8px 0 0}
.scenes ol{list-style:none;display:flex;gap:8px;overflow-x:auto;padding:10px 0 6px;margin:0;scrollbar-width:none}
.scenes a{display:flex;align-items:center;gap:6px;white-space:nowrap;padding:8px 12px;border:2px solid var(--ink);border-radius:999px;
  text-decoration:none;font:700 16px/1 Display,sans-serif;text-transform:uppercase;background:var(--paper2)}
.scenes a span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:12px}

/* ---- lanes: each scene is a lane, split by a painted divider ------------- */
.lane{position:relative;padding:22px 14px 26px;border-top:6px dashed var(--ink)}
.lane-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:8px}
.sign{display:inline-block;padding:6px 10px 5px;border:3px solid var(--red);border-radius:6px;background:#fff;
  font:700 18px/1 Display,sans-serif;text-transform:uppercase;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px var(--red2)}
.time{font:12px/1 Mono,monospace;color:var(--dim)}
.lane-h h2,.lane-h h1{flex-basis:100%;margin:4px 0 0;font:700 40px/1 Display,sans-serif;text-transform:uppercase}
.lead{margin:0 0 14px;color:var(--dim)}
.art{margin:0 0 14px}
.art-zoom{all:unset;display:block;cursor:zoom-in;border:3px solid var(--ink);border-radius:8px;overflow:hidden;background:#fff}
.art-zoom:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.voice{margin:18px 0 0;padding:14px 16px;background:var(--ink);color:var(--paper);border-radius:4px;transform:rotate(-.6deg)}
.voice p{margin:0;font:700 26px/1.1 Display,sans-serif;text-transform:uppercase}
.lane-acts{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.lane-listen,.row-share,.act{min-height:44px;padding:0 16px;border:2px solid var(--ink);border-radius:999px;background:var(--paper2);
  font:700 17px/1 Display,sans-serif;text-transform:uppercase;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.act{background:var(--ink);color:var(--paper)}
.act.ghost{background:transparent;color:var(--ink)}
.act:disabled{opacity:.45;cursor:default}

/* ---- the conversation: bubbles sit where the voice sits in the stereo field */
.talk{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.b{max-width:86%;padding:8px 12px;border:2px solid var(--ink);border-radius:14px;background:var(--paper2);transition:background .2s,box-shadow .2s}
.b .who{display:block;font:700 13px/1.2 Display,sans-serif;text-transform:uppercase;letter-spacing:.04em}
.b .say{display:block}
.b.sp-SOFA{justify-self:start;border-bottom-left-radius:2px}
.b.sp-NEIGHBOUR{justify-self:start;margin-left:7%;border-bottom-left-radius:2px}
.b.sp-COURIER{justify-self:end;margin-right:7%;border-bottom-right-radius:2px}
.b.sp-PARENT{justify-self:end;border-bottom-right-radius:2px}
.b.sp-SOFA .who{color:var(--SOFA)} .b.sp-NEIGHBOUR .who{color:var(--NEIGHBOUR)}
.b.sp-COURIER .who{color:var(--COURIER)} .b.sp-PARENT .who{color:var(--PARENT)}
.b.now{background:#fff;box-shadow:4px 4px 0 var(--red);border-color:var(--red)}
.b.coda{opacity:.8;font-size:15px}

/* ---- the instrument: a dial the machine set, and you can try to turn ------ */
.instrument{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;align-items:start;padding:12px;border:3px solid var(--ink);border-radius:14px;background:var(--metal)}
.gauge-wrap{position:relative}
.gauge{display:block}
.gauge.big{width:118px;height:118px}
.gauge svg{width:100%;height:100%;display:block;overflow:visible}
.g-plate{fill:#d6cfbf;stroke:var(--ink);stroke-width:3}
.g-face{fill:#fbf7ee;stroke:var(--ink);stroke-width:3}
.g-red{fill:none;stroke:var(--red);stroke-width:9}
.g-tick{stroke:var(--ink);stroke-width:2}
.g-needle{stroke:var(--ink);stroke-width:4;stroke-linecap:round}
.g-hub{fill:var(--ink)}
.g-lab{font:700 15px Display,sans-serif;fill:var(--ink);text-anchor:middle;text-transform:uppercase}
.small .g-lab,.small .g-tick{display:none}
.small .g-needle{stroke-width:7}
.dial-read{position:absolute;right:2px;bottom:2px;font:12px/1 Mono,monospace;background:var(--ink);color:var(--paper);padding:3px 5px;border-radius:4px}
.dial-l{display:block;font:700 16px/1.1 Display,sans-serif;text-transform:uppercase;margin-bottom:6px}
.dial{width:100%;height:44px;margin:0;accent-color:var(--red);cursor:grab}
.chips{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chips li{padding:4px 9px;border:2px dashed var(--rule);border-radius:999px;font-size:14px;color:#9b9384;transition:all .25s}
.chips li.on{border:2px solid var(--ink);background:#fff;color:var(--ink)}
.chips li.on:last-child{background:var(--red);border-color:var(--red);color:#fff}
.dial-msg{margin:8px 0 0;font-size:15px;font-weight:600;min-height:2.6em}
.instrument.free{background:#d8ead9}

/* ---- opening: the dropped bag ------------------------------------------- */
.help{border:3px solid var(--ink);border-radius:14px;background:#fff;padding:10px 12px 14px}
.help-svg{width:100%;height:auto;display:block}
.help-svg path,.help-svg circle{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.help-svg .road{stroke:var(--rule)}
.help-svg .divider{stroke:var(--red);stroke-dasharray:12 10;stroke-width:5}
.help-svg .arm circle{fill:var(--paper)}
.help-svg .bag path{fill:var(--paper2)}
.help-svg .o{fill:#f0a23a;stroke-width:3}
.arm,.bag,.o{transition:transform .9s cubic-bezier(.3,1.3,.5,1)}
.bag{transform-origin:214px 150px;transform:rotate(-24deg)}
.help.done .arm-l{transform:translateX(30px)}
.help.done .arm-r{transform:translateX(-30px)}
.help.done .bag{transform:rotate(0)}
.help.done .o1{transform:translate(52px,-26px)}
.help.done .o2{transform:translate(90px,-30px)}
.help.done .o3{transform:translate(118px,-24px)}
.help-msg{margin:8px 0 10px;font-weight:600}

/* ---- reveal: the machine ------------------------------------------------- */
.machine{display:grid;grid-template-columns:42% minmax(0,1fr);gap:12px;align-items:start}
.art-col{margin:0}
.pipes p{margin:0 0 8px;font-weight:600}
.pipe-list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.pipe-list li{position:relative;padding:8px 10px;border:2px solid var(--ink);border-radius:10px;background:var(--paper2);transition:all .35s}
.pipe-list b{display:block;font:700 18px/1 Display,sans-serif;text-transform:uppercase}
.pipe-list span{font-size:14px;color:var(--dim)}
.pipe-list li.lit{background:var(--red);color:#fff;border-color:var(--red)}
.pipe-list li.lit span{color:#fff}
.pipe-msg{font:700 22px/1.1 Display,sans-serif;text-transform:uppercase;margin:10px 0 0}
.art-reveal{margin-top:16px}
.art-reveal img{border:3px solid var(--ink);border-radius:8px}

/* ---- finale: lift the dividers ------------------------------------------ */
.lift{border:3px solid var(--ink);border-radius:14px;background:#fff;padding:12px}
.lift-stage{display:grid;grid-template-columns:minmax(0,1fr) 64px;gap:10px;align-items:center}
.lift-lanes{list-style:none;margin:0;padding:0}
.fl{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 6px}
.fl-sign{font:700 17px/1 Display,sans-serif;text-transform:uppercase}
.fig{width:48px;height:48px;flex:none}
.fig circle,.fig path{fill:none;stroke:var(--ink);stroke-width:3.5;stroke-linecap:round}
.fig circle{fill:var(--paper)}
.fig .arm{transform-box:view-box;transform-origin:24px 21px;transition:transform .6s cubic-bezier(.3,1.4,.5,1),stroke .3s}
.fl.reach-up .arm.up{transform:rotate(50deg);stroke:var(--red)}
.fl.reach-down .arm.down{transform:rotate(50deg);stroke:var(--red)}
.div-row{padding:2px 0}
.divider-btn{all:unset;box-sizing:border-box;display:block;width:100%;min-height:44px;padding:10px 12px;border-radius:6px;cursor:pointer;
  background:repeating-linear-gradient(90deg,var(--ink) 0 18px,transparent 18px 30px) center/100% 6px no-repeat;
  font:700 0/0 Display,sans-serif;color:transparent;position:relative;transition:transform .7s cubic-bezier(.3,1.4,.5,1),opacity .7s}
.divider-btn::after{content:'Lift';position:absolute;right:8px;top:50%;transform:translateY(-50%);padding:6px 12px;border:2px solid var(--ink);
  border-radius:999px;background:var(--paper2);font:700 15px/1 Display,sans-serif;color:var(--ink);text-transform:uppercase}
.divider-btn:focus-visible{outline:3px solid var(--red)}
.divider-btn[aria-pressed=true]{transform:translateY(-14px);opacity:.25;pointer-events:none}
.gears{position:relative;height:150px}
.gear{position:absolute;display:block;transform-origin:50% 50%}
.gear .cog{fill:#d9d2c4;stroke:var(--ink);stroke-width:4;stroke-linejoin:round}
.gear .hole{fill:var(--red);stroke:var(--ink);stroke-width:4}
.g1{width:60px;height:60px;left:2px;top:0}
.g2{width:46px;height:46px;left:14px;top:52px}
.g3{width:58px;height:58px;left:0;top:92px}
#liftAll{margin-top:12px}
.lift-msg{font-weight:600;margin:10px 0 0}
.cta{margin-top:14px;padding:16px;background:var(--red);color:#fff;border-radius:10px;text-align:center}
.cta p{margin:0}
.cta-1,.cta-2{font:700 40px/1 Display,sans-serif;text-transform:uppercase}
.cta-2{color:var(--ink);background:#fff;display:inline-block;padding:2px 10px;margin-top:6px !important}
.cta-acts{margin-top:14px !important}
.cta .act{background:#fff;color:var(--ink)}

@media (prefers-reduced-motion:no-preference){
  .gear{animation:spin 3s linear infinite}
  .g2{animation-direction:reverse;animation-duration:2.2s}
  .lift[data-lifted="1"] .gear{animation-duration:6s}
  .lift[data-lifted="2"] .gear{animation-duration:12s}
  .lift.stalled .gear{animation-play-state:paused}
  html{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- share shelf, sheet, zoom -------------------------------------------- */
.circulate p{margin:0 0 12px}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile-pick{all:unset;box-sizing:border-box;cursor:pointer;display:block;border:2px solid var(--ink);border-radius:10px;overflow:hidden;background:#fff}
.tile-pick:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.tile-pick img{width:100%;aspect-ratio:1}
.tile-pick span{display:block;padding:7px 9px;font:700 15px/1.1 Display,sans-serif;text-transform:uppercase}
.foot{border-top:3px solid var(--ink)}
.fine{font-size:14px;color:var(--dim);margin:4px 0}
.linkish{all:unset;cursor:pointer;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
.linkish:focus-visible{outline:2px solid var(--red)}

dialog{color:var(--ink)}
.sheet{width:min(560px,100vw);max-width:100vw;max-height:92vh;margin:auto auto 0;padding:0;border:3px solid var(--ink);border-bottom:0;border-radius:16px 16px 0 0;background:var(--paper)}
.sheet::backdrop,.zoom::backdrop{background:rgba(22,20,18,.6)}
.sheet-in{padding:0 14px 18px;max-height:92vh;overflow:auto}
.sheet-bar{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:12px 0 8px;background:var(--paper)}
.sheet-bar h2{margin:0;font:700 24px/1 Display,sans-serif;text-transform:uppercase}
.sheet-x,.zoom-x{width:44px;height:44px;border:2px solid var(--ink);border-radius:50%;background:var(--paper2);cursor:pointer;font-size:18px}
.sh-card{width:100%;height:auto;border:2px solid var(--ink);border-radius:8px}
.sh-post{font-weight:600}
.sh-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sh-acts .btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border:2px solid var(--ink);border-radius:10px;background:var(--ink);color:var(--paper);
  font:700 16px/1 Display,sans-serif;text-transform:uppercase;text-decoration:none;cursor:pointer}
.sh-acts .btn.ghost{background:var(--paper2);color:var(--ink)}
.sh-acts .btn.wide{grid-column:1/-1;background:var(--red);border-color:var(--red);color:#fff}
.sh-acts .btn svg{width:16px;height:16px}
.sh-masto{grid-column:1/-1;display:none;gap:8px}
.sh-masto.on{display:flex}
.sh-masto input{flex:1;min-height:44px;padding:0 10px;border:2px solid var(--ink);border-radius:10px;font:inherit}
.sh-small{font-size:13px;color:var(--dim)}
.sh-back{margin:4px 0 10px}
.sh-pick{margin-top:8px}
.zoom{width:100vw;height:100vh;max-width:100vw;max-height:100vh;margin:0;padding:0;border:0;background:var(--paper)}
.zoom-x{position:fixed;top:10px;right:10px;z-index:2}
.zoom-in{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;display:flex;align-items:center}
.zoom-in img{max-width:none;width:auto;margin:auto;height:min(86vh,720px)}
.zoom-in img.wide{height:min(86vh,62vw)}

/* ---- card pages ---------------------------------------------------------- */
.card-main{max-width:640px;margin:0 auto}
.card-page img{border:3px solid var(--ink);border-radius:8px}
.card-go{display:flex;flex-wrap:wrap;gap:8px}
.card-others{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.card-others a{font-size:14px;padding:6px 10px;border:2px solid var(--ink);border-radius:999px;text-decoration:none;background:var(--paper2)}

/* ---- the house player, in the drawing's colours -------------------------- */
#narrator.np{--np-bg:#161412;--np-panel:#24211d;--np-ink:#fbf7ee;--np-dim:#d9d2c4;--np-faint:#aaa294;--np-rule:#3d3833;--np-accent:#ff6b5e}

/* ---- wider screens only widen it ----------------------------------------- */
@media (min-width:720px){
  .hero,.lane{max-width:860px;margin:0 auto}
  .lane{padding:30px 24px 34px}
  .lane-h h2{font-size:56px}
  .voice p{font-size:34px}
  .instrument{grid-template-columns:170px minmax(0,1fr)}
  .gauge.big{width:170px;height:170px}
  .tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
  .machine{grid-template-columns:260px minmax(0,1fr)}
  .bar-mark{font-size:24px}
  .bar{padding:0 max(14px,calc((100vw - 860px)/2))}
}