/* Answer blocks and the Ask home (docs/ASK_PLAN.md). HTML from festivals/blocks.py, behaviour in ask.js.
   Built on tokens.css: steel page, dot-matrix display type, mono labels. A list's two inks arrive as --kd/--kd-dark. */
.bk-scope{--k:var(--kd,var(--sp-signal));--kon:#fff}
[style*="--kd"]{--k:var(--kd)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [style*="--kd"]{--k:var(--kd-dark)}:root:not([data-theme="light"]) .bk-scope{--kon:#0b0b12}}
:root[data-theme="dark"] [style*="--kd"]{--k:var(--kd-dark)}
:root[data-theme="dark"] .bk-scope{--kon:#0b0b12}

.bk-scope,.bk-scope *,.bk-scope *::before,.bk-scope *::after{box-sizing:border-box}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bk-ic{width:15px;height:15px;flex:none}.bk-ic.sm{width:10px;height:10px;vertical-align:-1px;margin-left:3px}
.bk-scope{font-family:var(--sp-mono);font-stretch:87.5%;color:var(--sp-ink)}
.bk-scope a{color:inherit}
.bk-scope :is(a,button,input):focus-visible{outline:2px solid var(--sp-signal);outline-offset:2px}

/* ---- type ---- */
.bk-big{margin:0;font:800 clamp(36px,7vw,52px)/.86 var(--sp-dot);letter-spacing:-.02em;text-wrap:balance}
.bk-mid{margin:0;font:800 clamp(26px,5vw,34px)/.9 var(--sp-dot);letter-spacing:-.01em}
.bk-h{margin:0;font:800 24px/.95 var(--sp-dot)}
.bk-lead{margin:6px 0 0;font:400 11px/1.55 var(--sp-mono);color:var(--sp-mute);max-width:68ch}
.bk-lead.c{text-align:center;margin-inline:auto}
.bk-fine{margin:10px 0 0;font:400 10px/1.45 var(--sp-mono);color:var(--sp-mute)}
.bk-empty{margin:0;padding:12px 0;font:400 11px/1.5 var(--sp-mono);color:var(--sp-mute)}
.bk-sec{display:flex;align-items:center;gap:7px;margin:18px 0 0;padding-bottom:6px;border-bottom:1px solid var(--sp-edge);font:600 11px/1 var(--sp-mono);letter-spacing:.04em}
.bk-sec .n{margin-left:auto;font:800 15px/1 var(--sp-dot)}
.bk-sec .r{margin-left:auto;font-weight:400;color:var(--sp-mute)}

/* ---- split flap ---- */
.bk-flap{display:inline-flex;gap:2px;perspective:300px;vertical-align:middle}
.bk-flap i{font-style:normal;position:relative;display:grid;place-items:center;width:17px;height:27px;border-radius:3px;background:color-mix(in srgb,var(--sp-paper) 14%,var(--sp-ink));color:var(--sp-paper);font:600 16px/1 var(--sp-mono);font-stretch:100%;font-variant-numeric:tabular-nums;animation:bk-flip .55s cubic-bezier(.25,.8,.3,1) both}
.bk-flap i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--sp-ink);opacity:.8}
.bk-flap i.c{width:5px;background:none;color:var(--sp-ink);animation:none}.bk-flap i.c::after{display:none}
.bk-flap i:nth-child(2){animation-delay:.06s}.bk-flap i:nth-child(4){animation-delay:.12s}.bk-flap i:nth-child(5){animation-delay:.18s}
@keyframes bk-flip{0%{transform:rotateX(-90deg)}60%{transform:rotateX(12deg)}100%{transform:rotateX(0)}}

/* ---- the pack: sleeve with the record half out ---- */
.bk-pk{position:relative;display:block;flex:none;width:calc(var(--s) * 1.45);height:var(--s)}
.bk-pk .sv{position:absolute;inset:0 31% 0 0;z-index:2;background:var(--sp-sleeve,var(--sp-ink));color:var(--sp-on-sleeve,var(--sp-paper));outline:1px solid var(--sp-sleeve-edge,transparent);outline-offset:-1px;padding:calc(var(--s) * .09);display:flex;align-items:flex-end;font:900 calc(var(--s) * .14)/1.05 var(--sp-dot);overflow:hidden;text-wrap:balance;box-shadow:0 10px 18px -14px rgba(8,10,16,.65)}
.bk-pk .dk{position:absolute;top:4%;bottom:4%;right:2%;aspect-ratio:1;border-radius:50%;transition:transform .45s cubic-bezier(.2,.8,.2,1);
  background:radial-gradient(circle,var(--k) 0 15%,var(--sp-vinyl) 15.5% 17%,transparent 17.5%),repeating-radial-gradient(circle,var(--sp-vinyl) 0 2px,#2a2d33 2.5px 3px)}
:is(a,button):hover > .bk-pk .dk,:is(a,button):focus-visible > .bk-pk .dk{transform:translateX(8%) rotate(25deg)}
@media (max-width:560px){.bk-pk{--s:min(var(--s),64px)}}

/* ---- the big record, cropped, title cut in ---- */
.bk-rec{position:relative;overflow:hidden;aspect-ratio:4/3;min-height:220px;background:var(--sp-paper)}
.bk-rec .disc{position:absolute;width:118%;aspect-ratio:1;right:-38%;top:-42%;border-radius:50%;
  background:radial-gradient(circle,var(--sp-paper) 0 1.2%,var(--k) 1.4% 16%,var(--sp-vinyl) 16.5% 18%,transparent 18.5%),repeating-radial-gradient(circle,var(--sp-vinyl) 0 2px,#2a2d33 2.5px 3.2px)}
@media (prefers-reduced-motion:no-preference){.bk-rec .disc{animation:bk-turn 9s linear infinite}}
.bk-rec .cut{position:absolute;left:0;bottom:0;z-index:2;margin:0;background:var(--sp-paper);padding:10px 14px 0 0;max-width:86%;font:800 clamp(28px,4.4vw,44px)/.92 var(--sp-dot);text-wrap:balance}
.bk-rec .by{position:absolute;right:10px;top:10px;font:500 10px var(--sp-mono);background:var(--sp-paper);padding:3px 6px}
@keyframes bk-turn{to{transform:rotate(360deg)}}

/* ---- rows ---- */
.bk-strm{display:grid;min-width:0;border-top:1px solid var(--sp-edge);margin-top:12px}
.bk-row{display:grid;min-width:0;grid-template-columns:62px minmax(0,1fr) auto;gap:12px;padding:13px 0;align-items:start;border-bottom:1px solid var(--sp-rule)}
.bk-row.big{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;padding:16px 0}
.bk-row.sug{border-bottom-style:dashed}
.bk-row.sug .t{opacity:.75}
.bk-row .t{font:800 21px/.9 var(--sp-dot);font-variant-numeric:tabular-nums;color:var(--k,var(--sp-signal))}
.bk-row .ti{min-width:0;max-width:100%;margin:0;font:600 13px/1.3 var(--sp-mono);white-space:normal;word-break:break-word}
.bk-row.big .ti{font-size:14px}
.bk-row .ti a{display:block;max-width:100%;white-space:normal;overflow-wrap:anywhere;text-decoration:none}.bk-row .ti a:hover{text-decoration:underline}
.bk-row .body{min-width:0}
.bk-row .m{font:400 10.5px/1.4 var(--sp-mono);color:var(--sp-mute);margin-top:4px;overflow-wrap:anywhere}
.bk-row .why{margin:6px 0 0;font:400 11px/1.5 var(--sp-mono)}
.bk-row .from{margin:5px 0 0;font:400 10px/1.4 var(--sp-mono);color:var(--sp-mute)}
.because{font:600 10px/1.4 var(--sp-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--k,var(--sp-signal));margin-bottom:3px}
.warn,.bk-scope .warn{margin:5px 0 0;font:500 10.5px/1.4 var(--sp-mono);color:var(--sp-warn)}
.bk-add{all:unset;box-sizing:border-box;cursor:pointer;font:600 10.5px/1 var(--sp-mono);padding:9px 10px;border:1px solid var(--sp-edge);min-width:52px;text-align:center;white-space:nowrap}
.bk-add[aria-pressed="true"]{background:var(--k,var(--sp-ink));border-color:var(--k,var(--sp-ink));color:var(--kon,#fff)}
.bk-add.fresh{animation:bk-blink .45s steps(2) 2}
@keyframes bk-blink{50%{background:var(--sp-ink);border-color:var(--sp-ink)}}
@media (max-width:560px){.bk-row{grid-template-columns:50px minmax(0,1fr) auto;gap:10px}.bk-row .t{font-size:17px}.bk-row.big{grid-template-columns:minmax(0,1fr) auto}.bk-row.big .bk-pk{display:none}}
@media (max-width:560px){.bk-row:not(.big){grid-template-columns:50px minmax(0,1fr)}.bk-row:not(.big)>.body{max-width:min(280px,calc(100vw - 120px))}.bk-row:not(.big)>.bk-add{grid-column:2;justify-self:start;margin-top:6px}}

/* ---- buttons, chips ---- */
.bk-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.bk-go{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;gap:7px;align-items:center;font:600 11px/1 var(--sp-mono);background:var(--sp-ink);color:var(--sp-paper);padding:11px 13px;text-decoration:none}
.bk-scope a.bk-go{color:var(--sp-paper)}
.bk-scope a.bk-go.ghost{color:var(--sp-ink)}
.bk-go.ghost{background:none;color:var(--sp-ink);box-shadow:inset 0 0 0 1px var(--sp-edge)}
.bk-go[aria-pressed="true"]{background:var(--sp-ink);color:var(--sp-paper)}
.bk-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.bk-chip{font:500 11px/1 var(--sp-mono);padding:9px 11px;border:1px solid var(--sp-edge);text-decoration:none}
.bk-chip:hover{background:var(--sp-ink);color:var(--sp-paper)}
.bk-btn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--sp-edge);font:600 12px/1.3 var(--sp-mono);text-decoration:none;min-width:0}
.bk-btn > span:not(.bk-pk){flex:1;min-width:0}
.bk-btn small{display:block;font:400 10.5px/1.45 var(--sp-mono);color:var(--sp-mute);margin-top:4px}
.bk-btn.p{background:var(--sp-ink);color:var(--sp-paper)}.bk-btn.p small{color:var(--sp-paper);opacity:.72}
.bk-btn:hover{box-shadow:inset 0 0 0 1px var(--sp-edge)}
.bk-starts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
@media (max-width:640px){.bk-starts{grid-template-columns:1fr}}
.bk-friend{flex-wrap:wrap;cursor:default}
.bk-friend label{display:flex;gap:12px;align-items:center;flex:1 1 100%;cursor:text}
.bk-friend input{flex:1;min-width:0;font:400 11px var(--sp-mono);padding:8px;border:1px solid var(--sp-rule);background:var(--sp-card);color:var(--sp-ink)}
.bk-friend button{all:unset;cursor:pointer;font:600 10.5px var(--sp-mono);padding:8px 10px;border:1px solid var(--sp-edge)}
.bk-err{flex:1 1 100%;font:400 10.5px var(--sp-mono);color:var(--sp-warn)}
.bk-err:empty{display:none}
.bk-opts{display:grid;gap:8px;margin-top:12px}

/* ---- crate of list sleeves ---- */
.bk-crate{display:flex;gap:18px;overflow-x:auto;padding:14px 0 6px;scrollbar-width:none;overscroll-behavior-x:contain}
.bk-crate::-webkit-scrollbar{display:none}
.bk-crate-i{flex:none;width:170px;display:grid;gap:7px;align-content:start;text-decoration:none}
.bk-crate-i b{font:600 11px/1.3 var(--sp-mono)}
.bk-crate-i span{font:400 10px/1.35 var(--sp-mono);color:var(--sp-mute)}
.bk-crate-i em{font:600 10px var(--sp-mono);font-style:normal;color:var(--k)}
@media (max-width:560px){.bk-crate-i{width:130px}}

/* ---- blocks ---- */
.bk{padding:22px 0 4px}
.bk + .bk{border-top:1px solid var(--sp-rule)}
.bk.wait{opacity:.55}
.bk-wait{margin:0 0 8px;font:600 10px var(--sp-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--sp-mute)}
.bk-artist{display:flex;gap:18px;align-items:center}
.bk-artist > div{min-width:0}
.bk-big,.bk-mid,.bk-row .ti,.bk-btn,.bk-rec .cut{overflow-wrap:anywhere}
@media (max-width:560px){.bk-artist{flex-direction:column;align-items:flex-start;gap:12px}.bk-artist .bk-big{font-size:34px}}
.bk-artist.unknown .bk-pk .sv{background:var(--sp-mute)}
.bk-facts{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:6px;font:400 11px/1.5 var(--sp-mono)}
.bk-facts li{padding-left:14px;position:relative}
.bk-facts li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;background:var(--k,var(--sp-ink))}
.bk-facts .src{color:var(--sp-mute)}
.bk-cfm{display:grid;margin-top:12px;border-top:1px solid var(--sp-edge)}
.bk-cf{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--sp-rule)}
.bk-cf .k{font:500 10px/1.3 var(--sp-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--sp-mute)}
.bk-cf b{display:block;font:600 13px/1.3 var(--sp-mono)}
.bk-cf .m{display:block;font:400 10.5px/1.45 var(--sp-mono);color:var(--sp-mute);margin-top:3px}
.bk-cf .cfb{display:flex;gap:6px}
.bk-cf.done{opacity:.6}
@media (max-width:560px){.bk-cf{grid-template-columns:minmax(0,1fr)}.bk-cf .cfb{justify-content:flex-start}}
.bk-leg{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:11px 0;align-items:start}
.bk-leg .k{font:800 15px/1 var(--sp-dot);width:24px;height:24px;display:grid;place-items:center;background:var(--k,var(--sp-ink));color:var(--kon,#fff)}
.bk-leg b{display:block;font:600 12.5px/1.3 var(--sp-mono)}
.bk-leg .m{display:block;font:400 10.5px var(--sp-mono);color:var(--sp-mute);margin-top:3px}
.bk-hop{margin:0 0 0 11px;padding:6px 0 6px 22px;border-left:1px dashed var(--sp-mute);font:400 10.5px/1.4 var(--sp-mono);color:var(--sp-mute)}
.bk-note{margin:0;padding:10px 0 10px 12px;border-left:2px solid var(--sp-signal);font:400 12px/1.5 var(--sp-mono)}
.bk-note.relaxed{border-color:var(--sp-ok)}.bk-note.limit,.bk-note.error{border-color:var(--sp-warn)}.bk-note.unknown{border-color:var(--sp-mute)}
.bk-note a{margin-left:4px}
.bk-action.undone{opacity:.5}
.bk-hero{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:0 28px}
.bk-hero .l{min-width:0}.bk-hero .r{min-width:0}
.bk-hero .r .bk-sec{margin-top:0}
.bk-by{margin:10px 0 0;font:400 11px/1.5 var(--sp-mono);color:var(--sp-mute)}
@media (max-width:820px){.bk-hero{grid-template-columns:1fr}.bk-hero .r{margin-top:14px}}
.bk-pad{margin-top:20px}

/* ---- the Ask home: conversations | thread with the box docked under it | your plan ---- */
.ask{min-height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--sp-paper);overflow:hidden}
body:has(.ask){margin:0}
.ask-nav{display:flex;align-items:center;gap:20px;padding:12px 20px;border-bottom:1px solid var(--sp-edge);font:500 11px/1 var(--sp-mono);flex:none;position:relative;z-index:6}
.ask-nav .brand{font:800 20px/1 var(--sp-dot);text-decoration:none;color:var(--sp-ink)}
.ask-nav .sp{flex:1}
.ask-nav .links{display:flex;gap:18px}
.ask-nav a{text-decoration:none;color:var(--sp-mute)}
.ask-nav a[aria-current="page"]{color:var(--sp-ink);font-weight:600;box-shadow:0 2px 0 var(--sp-ink)}
.ask-nav .n,.ask-tabs .n{font-style:normal;display:inline-grid;place-items:center;min-width:15px;height:15px;margin-left:5px;padding:0 3px;background:var(--sp-ink);color:var(--sp-paper);font:600 9px/1 var(--sp-mono)}
.ask-nav .n[hidden],.ask-tabs .n[hidden]{display:none}
.trip{position:relative}
.trip summary{list-style:none;cursor:pointer;border:1px solid var(--sp-edge);padding:6px 9px;font:600 10.5px/1 var(--sp-mono);white-space:nowrap}
.trip summary::-webkit-details-marker{display:none}
.trip-menu{position:absolute;top:calc(100% + 6px);left:0;width:260px;background:var(--sp-paper);border:1px solid var(--sp-edge);display:grid;box-shadow:0 18px 30px -18px rgba(0,0,0,.5)}
.trip-menu a{display:grid;gap:3px;padding:11px 13px;border-top:1px solid var(--sp-rule);color:var(--sp-ink)!important;font:600 11px/1.3 var(--sp-mono)}
.trip-menu a:first-child{border-top:0}.trip-menu a[aria-current]{background:var(--sp-card);box-shadow:none}
.trip-menu small{font:400 9.5px var(--sp-mono);color:var(--sp-mute)}
.ask-shell{flex:1;min-height:0;display:grid;grid-template-columns:220px minmax(0,1fr) 340px}
.ask-rail{border-right:1px solid var(--sp-rule);padding:14px 12px;overflow:auto;display:grid;gap:10px;align-content:start}
.convos{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.convos button{all:unset;cursor:pointer;display:block;width:100%;box-sizing:border-box;padding:8px 9px;font:400 10.5px/1.35 var(--sp-mono);color:var(--sp-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.convos button[aria-current="true"]{background:var(--sp-card);color:var(--sp-ink);font-weight:600}
.convos button:hover{color:var(--sp-ink)}
.ask-panel{border-left:1px solid var(--sp-edge);background:var(--sp-card);overflow:auto;padding:16px;font:400 11px/1.4 var(--sp-mono)}
.pp-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:10px;border-bottom:1px solid var(--sp-edge)}
.pp-head b{font:800 22px/1 var(--sp-dot)}.pp-head span{color:var(--sp-mute)}
.ask-panel h4{display:flex;justify-content:space-between;margin:14px 0 4px;font:600 10px/1 var(--sp-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--sp-mute)}
.ask-panel ul{list-style:none;margin:0;padding:0}
.ask-panel li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px;align-items:start;padding:8px 0;border-top:1px solid var(--sp-rule)}
.ask-panel li time{font:800 15px/1 var(--sp-dot);color:var(--k,var(--sp-ink))}
.ask-panel li b{display:block;font:600 11px/1.3 var(--sp-mono);color:var(--k,var(--sp-ink))}
.ask-panel li small{display:block;color:var(--sp-mute);margin-top:2px}
.ask-panel li.fresh{animation:pp-in .8s ease-out}
@keyframes pp-in{from{background:color-mix(in srgb,var(--k,var(--sp-signal)) 22%,transparent)}}
.pp-x{all:unset;cursor:pointer;width:22px;height:22px;display:grid;place-items:center;color:var(--sp-mute)}
.pp-x:hover{color:var(--sp-warn)}
.pp-empty{color:var(--sp-mute);margin:12px 0}
.pp-acts{display:flex;gap:6px;margin-top:14px}
.pp-friend{margin-top:16px;color:var(--sp-mute)}
.pp-friend summary{cursor:pointer;font:500 10px var(--sp-mono)}
.pp-friend form{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.pp-friend input{flex:1;min-width:0;border:1px solid var(--sp-edge);background:var(--sp-paper);color:var(--sp-ink);padding:7px;font:400 10.5px var(--sp-mono)}
.pp-friend button{all:unset;cursor:pointer;border:1px solid var(--sp-edge);padding:7px 10px;font:600 10px var(--sp-mono);color:var(--sp-ink)}
.ask-main{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.ask-thread{flex:1;min-height:0;overflow:auto;padding:22px max(20px,calc((100% - 760px)/2)) 24px;display:grid;gap:26px;align-content:start}
.ask-dock{flex:none;border-top:1px solid var(--sp-edge);background:var(--sp-paper);padding:10px max(20px,calc((100% - 760px)/2)) 14px;display:grid;gap:8px}
.ask-hello{display:none;text-align:center}
.ask-main.fresh .ask-dock{order:-1;border-top:0;padding-top:min(10vh,80px);gap:12px}
.ask-main.fresh .ask-hello{display:block}
.ask-main.fresh .ask-thread{flex:1}
.ask-main:not(.fresh) .ask-starters{display:none}
.ask-box{display:flex;align-items:center;gap:6px;min-width:0}
.ask-box .bk-ask{flex:1;width:auto}
.ask-box .ib{all:unset;cursor:pointer;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--sp-rule);color:var(--sp-ink);flex:none}
.ask-box .ib[aria-pressed="true"]{background:var(--sp-ink);color:var(--sp-paper)}
.ask-box .ib.send{background:var(--sp-ink);color:var(--sp-paper);border-color:var(--sp-ink)}
.ask-box .ib:focus-visible{outline:2px solid var(--sp-signal);outline-offset:2px}
.ask-starters{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.bk-next{margin:0;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font:400 11px/1.4 var(--sp-mono);color:var(--sp-mute)}
.bk-next b{color:var(--sp-ink);font-weight:600}
.ask-main.fresh .bk-next{justify-content:center}
.bk-long{margin:0;font:400 10.5px var(--sp-mono);color:var(--sp-mute)}
.bk-ask{display:flex;align-items:center;gap:10px;border:1px solid var(--sp-edge);background:var(--sp-card);padding:11px 12px;font:400 12px/1.3 var(--sp-mono);color:var(--sp-mute)}
.bk-ask.big{padding:13px 14px}
.bk-ask input{all:unset;flex:1;min-width:0;font:500 13px/1.3 var(--sp-mono);color:var(--sp-ink)}
.bk-ask input::placeholder{color:var(--sp-mute);font-weight:400;transition:opacity .25s}
.bk-ask input.swap::placeholder{opacity:0}
.bk-ask input::-webkit-search-cancel-button{filter:grayscale(1)}
.bk-ask kbd{font:500 10px var(--sp-mono);border:1px solid var(--sp-rule);padding:3px 5px}
.bk-ask:focus-within{outline:2px solid var(--sp-signal);outline-offset:2px}
.bk-scope .bk-ask input:focus-visible{outline:none}
.bk-ask:focus-within kbd{display:none}
/* turns */
.turn{display:grid;gap:12px;min-width:0}
.turn .you{justify-self:end;max-width:80%;margin:0;background:var(--sp-ink);color:var(--sp-paper);padding:10px 13px;font:500 11.5px/1.45 var(--sp-mono)}
.turn .you.shot{display:flex;gap:10px;align-items:center}
.turn .you img{width:44px;height:60px;object-fit:cover;border:1px solid var(--sp-paper)}
.turn .ans{min-width:0}
.turn .ans[aria-busy="true"]{min-height:40px}
.turn.folded .ans{display:none}
.turn .fold{all:unset;cursor:pointer;justify-self:start;font:400 10px var(--sp-mono);color:var(--sp-mute);border-bottom:1px dashed currentColor}
.work{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;font:400 10.5px/1.45 var(--sp-mono);color:var(--sp-mute)}
.work .spin{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,var(--sp-paper) 0 9%,var(--sp-signal) 10% 32%,transparent 33%),repeating-radial-gradient(circle,var(--sp-vinyl) 0 2px,color-mix(in srgb,var(--sp-groove) 40%,var(--sp-vinyl)) 2px 2.6px);animation:spin 1.6s linear infinite}
.work.done{grid-template-columns:minmax(0,1fr)}.work.done .spin{display:none}
.work ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.work li{display:flex;justify-content:space-between;gap:10px;animation:rise .3s both}
.work li b{color:var(--sp-ink);font-weight:600}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(4px)}}
.sysline{font:400 10px/1.45 var(--sp-mono);color:var(--sp-mute);border-left:2px solid var(--sp-ink);padding:2px 0 2px 10px}
/* a reason longer than two lines folds; tap to read it all */
.turn .why{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.turn .why.open{display:block}
/* titles take their list's colour, so a list reads as one thing */
.bk-row .ti,.bk-row .ti a{color:var(--k,var(--sp-ink))}
/* the first question, asked in the thread */
.bk-tk{--kp:var(--record-techno);position:relative;display:grid;gap:8px;background:var(--kp);color:#0d0f14;padding:14px 64px 14px 16px;max-width:560px}
.bk-tk::after{content:"";position:absolute;right:46px;top:0;bottom:0;border-left:2px dashed #0d0f14}
.bk-tk .tk-no{font:500 9.5px/1.2 var(--sp-mono);letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.bk-tk .tk-title{font:800 26px/.9 var(--sp-dot);text-transform:uppercase}
.bk-tk textarea{all:unset;border:1px dashed #0d0f14;padding:9px;font:400 11px/1.5 var(--sp-mono);min-height:56px;white-space:pre-wrap}
.bk-tk .bk-go{background:#0d0f14;color:var(--kp);justify-self:start}
.ask-drop{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:color-mix(in srgb,var(--sp-paper) 84%,transparent);border:2px dashed var(--sp-ink);font:800 34px/1 var(--sp-dot);pointer-events:none}
.ask-drop[hidden]{display:none}
.ask-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:20;background:var(--sp-ink);color:var(--sp-paper);font:500 11px var(--sp-mono);padding:10px 12px;display:flex;gap:12px;align-items:center;max-width:calc(100% - 32px)}
.ask-toast button{all:unset;cursor:pointer;font-weight:700;text-decoration:underline}
.ask-toast[hidden]{display:none}
.ask-tabs{display:none}
@media (max-width:1240px){.ask-shell{grid-template-columns:minmax(0,1fr) 320px}.ask-rail{display:none}.ask-convos-btn{display:grid}
  .ask-rail.open{display:grid;position:fixed;left:0;top:0;bottom:0;width:260px;z-index:25;background:var(--sp-paper);box-shadow:20px 0 40px -20px rgba(0,0,0,.5)}}
.ask-convos-btn{all:unset;cursor:pointer;width:34px;height:34px;display:none;place-items:center;border:1px solid var(--sp-rule);font:600 14px var(--sp-mono);flex:none}
@media (max-width:1240px){.ask-convos-btn{display:grid}}
@media (max-width:900px){
  .ask-shell{grid-template-columns:minmax(0,1fr)}
  .ask-panel{display:none}
  .ask-nav{gap:10px;padding-inline:12px}
  .ask-nav .links{display:none}
  .ask-thread{padding:16px 16px 20px}
  .ask-dock{padding:8px 12px 10px}
  .ask-main.fresh .ask-dock{padding-top:28px}
  .ask-hello{font-size:34px}
  .ask-box .ib[data-loc]{display:none}
  .bk-ask kbd{display:none}
  .ask{padding-bottom:calc(48px + env(safe-area-inset-bottom))}
  .ask-tabs{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--sp-paper);border-top:1px solid var(--sp-edge);padding-bottom:env(safe-area-inset-bottom)}
  .ask-tabs a{text-align:center;padding:13px 0 15px;font:600 10.5px var(--sp-mono);color:var(--sp-mute);text-decoration:none}
  .ask-tabs a[aria-current="page"]{color:var(--sp-ink);box-shadow:inset 0 2px 0 var(--sp-ink)}
  .ask-toast{bottom:64px}
}
@media (prefers-reduced-motion:reduce){.work .spin,.work li,.ask-panel li.fresh{animation:none!important}}
@media (prefers-reduced-motion:reduce){.bk-flap i,.bk-add.fresh,.bk-rec .disc{animation:none!important}.bk-pk .dk{transition:none}}

/* /ds gallery */
.ds-grid .ds-wide{grid-column:1/-1}
.ds-theme .bk-scope{background:var(--sp-paper);color:var(--sp-ink)}
.ds-theme[data-theme="dark"] [style*="--kd"]{--k:var(--kd-dark)}.ds-theme[data-theme="dark"] .bk-scope{--kon:#0b0b12}
.ds-theme[data-theme="light"] [style*="--kd"]{--k:var(--kd)}.ds-theme[data-theme="light"] .bk-scope{--kon:#fff}

/* sleeves: printed card in the list's colour with a halftone fade; at night a dark tinted sleeve with light dots */
.bk-pk .sv{--sv-base:var(--k,var(--sp-signal));--sv-dot:rgba(255,255,255,.3);color:#fff;text-shadow:0 0 5px var(--sv-base);
  background:linear-gradient(25deg,transparent 0 30%,var(--sv-base) 78%),radial-gradient(circle,var(--sv-dot) 1px,transparent 1.7px) 0 0/6px 6px,
  linear-gradient(160deg,var(--sv-base),color-mix(in srgb,var(--sv-base) 62%,#000));box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bk-pk .sv{--sv-base:color-mix(in srgb,var(--k,var(--sp-signal)) 24%,#121419);--sv-dot:color-mix(in srgb,var(--k,var(--sp-signal)) 55%,transparent);color:var(--k,var(--sp-signal));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--k,var(--sp-signal)) 35%,transparent)}}
:root[data-theme="dark"] .bk-pk .sv{--sv-base:color-mix(in srgb,var(--k,var(--sp-signal)) 24%,#121419);--sv-dot:color-mix(in srgb,var(--k,var(--sp-signal)) 55%,transparent);color:var(--k,var(--sp-signal));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--k,var(--sp-signal)) 35%,transparent)}

/* encyclopedia answers: artist sheets and researched topics */
.bk-p{margin:8px 0 0;font:400 15px/1.6 var(--sp-sans,inherit);max-width:66ch}
.bk-p .src,.bk-quote .src{font:500 10.5px/1 var(--sp-mono);color:var(--sp-mute);white-space:nowrap}
.bk-quote{margin:16px 0 0;padding:4px 0 4px 14px;border-left:3px solid var(--k,var(--sp-ink));font:italic 400 15px/1.55 var(--sp-sans,inherit);max-width:62ch}
.bk-recs{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.bk-recs li{display:grid;gap:2px}.bk-recs span{font:400 11px/1.4 var(--sp-mono);color:var(--sp-mute)}
.bk-recs em{font-style:normal;font-size:13.5px;color:var(--sp-mute)}
.bk-listen{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.bk-listen a{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--sp-edge);font:500 11px/1 var(--sp-mono);text-decoration:none}
.bk-listen a:hover{background:var(--sp-ink);color:var(--sp-paper)}
.bk-chips.tight{margin-top:8px}
.bk-fine{margin:16px 0 0;font:400 10.5px/1.5 var(--sp-mono);color:var(--sp-mute)}

/* the work ticket: optional, only under talks and meet-ups */
.bk-tk.work{--kp:var(--record-talk);padding-right:16px;max-width:640px;display:flex;flex-direction:column;align-items:stretch}
.bk-tk.work>*{width:auto}
.bk-tk.work::after{display:none}
.bk-tk .tk-opts{display:flex;flex-wrap:wrap;gap:6px}
.bk-tk .tk-pass{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bk-tk .tk-pass .tk-q{font:500 10px/1.2 var(--sp-mono);text-transform:uppercase;letter-spacing:.06em;margin-right:6px}
.bk-tk .tk-opt{position:relative;cursor:pointer}
.bk-tk .tk-opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.bk-tk .tk-opt span{display:inline-block;white-space:nowrap;border:1px solid #0d0f14;padding:5px 9px;font:500 11px/1.2 var(--sp-mono)}
.bk-tk .tk-opt input:checked+span{background:#0d0f14;color:var(--kp)}
.bk-tk .tk-opt input:focus-visible+span{outline:2px solid #0d0f14;outline-offset:2px}
.bk-tk .tk-done{font:500 11px/1.5 var(--sp-mono)}

/* empty plan: picks to start from, same rows as the plan */
.ask-panel .pp-add{all:unset;cursor:pointer;font:600 10px/1 var(--sp-mono);padding:7px 8px;border:1px solid var(--sp-ink);align-self:center}
.ask-panel .pp-add[aria-pressed="true"]{background:var(--k,var(--sp-ink));border-color:var(--k,var(--sp-ink));color:var(--sp-paper)}
.ask-panel .pp-add:focus-visible{outline:2px solid var(--sp-signal);outline-offset:2px}
/* a city trip: Plan opens the panel in place on a phone, nothing navigates away */
@media (max-width:900px){.ask.show-plan .ask-panel{display:block;padding-bottom:90px}.ask.show-plan .ask-main{display:none}}