/* TONEHOLD: a producer's desk (/tonehold/desk/<producer>). The same paper as the rest: ink for what is counted, mono
   for what is measured, serif for what is said; blue is the one act of the page (Start a release), rust is what is
   sealed and what is now.
   RE-SAID ON 11 OCTOBER (the review brief Martial pasted; his words: the desk "with the number is a bit vulgar and
   busy"): the head is the house's name; no large figure of money stands anywhere; the page reads top to bottom as
   three calm parts on hairlines: FROM THE HOUSE (who played what, then the artists who fit, as cards), THE RELEASES
   (only what moved; rows with one count, one bar, one act; a closed edition sealed), THE LEDGER (three small
   figures, then the latest licences).
   FRAMING (9 October, on a reference he sent): the page stands inside the house (its nav, whose desk it is); the head
   has a second mass (Share your house); the gate is a framed object that shows what it opens.
   The tint: one colour taken from a cover (--tint, the gate's; --rt, a row's own under the hand), as a soft core
   fading to the paper. No glow, no badge that says nothing. Everything stands still under prefers-reduced-motion
   (tonehold.css stops every animation there). Every class here begins with dk-. */
:root{--tint:#9a9a96}
.dk{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- above the page: the house's nav, and whose desk this is ---------- */
body[data-page="desk"] .top{position:relative;top:auto;z-index:auto}
body[data-page="desk"] .top::before{content:none}
.dk-me{display:flex;align-items:center;gap:10px;min-height:44px}
.dk-av{position:relative;flex:none;width:38px;height:38px;border-radius:50%;background:var(--disc);box-shadow:0 10px 16px -10px rgba(26,23,18,.55),inset 0 0 0 1px rgba(14,15,17,.06)}
.dk-av img{position:absolute;inset:15%;width:70%;height:70%;border-radius:50%;object-fit:cover;background:#ddd;box-shadow:0 0 0 1px rgba(14,15,17,.4)}
.dk-av::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 1px rgba(14,15,17,.3)}
.dk-mn{font:600 14px/1 var(--f);letter-spacing:-.005em;white-space:nowrap}
.dk-mn[hidden],.dk-in[hidden]{display:none}
.dk-in{display:inline-flex;align-items:center;gap:14px;white-space:nowrap}
.dk-in .tx{align-self:auto;min-height:44px}

/* ---------- the head: whose desk, the house's name; beside it, the house's link to give, and the one act ---------- */
.dk>section.dk-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);gap:24px 48px;align-items:end;padding-block:clamp(22px,4.4svh,48px) 14px}
.dk-hw{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
.dk-hw>*{animation:dk-up 1s var(--e) both}
.dk-hw>:nth-child(2){animation-delay:80ms}.dk-hw>:nth-child(3){animation-delay:170ms}
.dk-head h1{font:440 clamp(38px,5.6vw,84px)/.95 var(--f);letter-spacing:-.05em;text-wrap:balance}
.dk-lede{max-width:46ch;font:400 clamp(18px,1.6vw,23px)/1.3 var(--serif);color:var(--fg2)}
.dk-side{display:flex;flex-direction:column;gap:12px;min-width:0;animation:dk-up 1s var(--e) .2s both}
/* Share your house: the lead cover, what it is for, and one touch that copies the house's address */
.dk-share{position:relative;display:grid;grid-template-columns:68px minmax(0,1fr) 40px;align-items:center;gap:14px;width:100%;padding:12px 14px 12px 12px;border-radius:22px;background:var(--plate);box-shadow:inset 0 0 0 1px var(--line),0 30px 44px -36px rgba(14,15,17,.5);text-align:left;transition:transform .5s var(--soft),box-shadow .3s}
.dk-share img{width:68px;height:68px;border-radius:14px;object-fit:cover;background:#ddd;box-shadow:0 12px 18px -14px rgba(14,15,17,.6)}
.dk-sh{display:flex;flex-direction:column;gap:5px;min-width:0}
.dk-sh b{font:600 16px/1.15 var(--f);letter-spacing:-.012em}
.dk-sh span{font:400 13.5px/1.35 var(--f);color:var(--fg2)}
.dk-sg{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);color:var(--fg);transition:background .2s,color .2s,box-shadow .2s,transform .5s var(--spring)}
.dk-share:active{transform:scale(.985);transition-duration:.08s}
.dk-share.on .dk-sg{background:var(--fg);color:var(--bg);box-shadow:none}
@media (hover:hover){
  .dk-share:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--fg3),0 34px 46px -34px rgba(14,15,17,.55)}
  .dk-share:hover .dk-sg{background:var(--fg);color:var(--bg);box-shadow:none;transform:rotate(-12deg)}
}
.dk-ha{display:flex;align-items:center;gap:20px}
.dk-ha[hidden]{display:none}
.dk-ha .b{flex:1}
/* the cover of the production licensed last, on a small disc: it stands with the act at a phone's size only */
.dk-disc{display:none;position:relative;flex:none;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 31% 25%,#fff 0,#F7F6F3 44%,#E8E6E1 100%);box-shadow:0 14px 22px -12px rgba(26,23,18,.5),inset 0 0 0 1px rgba(14,15,17,.06)}
.dk-disc img{position:absolute;inset:18%;width:64%;height:64%;border-radius:50%;object-fit:cover;background:#ddd;box-shadow:0 0 0 1px rgba(14,15,17,.45);animation:dk-turn 90s linear infinite}
.dk-disc::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 1px rgba(14,15,17,.3)}
#dkStart{white-space:nowrap}
@keyframes dk-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes dk-turn{to{transform:rotate(1turn)}}

/* ---------- the gate: a framed object. One field and one act; beside them, what opens ---------- */
.dk>section.dk-gate{padding-block:22px 28px}
.dk-gc{position:relative;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);border-radius:26px;overflow:hidden;isolation:isolate;
  background:radial-gradient(64% 170% at 100% 0%,color-mix(in srgb,var(--tint) 34%,#fff) 0,color-mix(in srgb,var(--tint) 10%,var(--plate)) 48%,transparent 74%),color-mix(in srgb,#fff 66%,var(--plate));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tint) 20%,var(--line)),0 44px 60px -48px color-mix(in srgb,var(--tint) 46%,rgba(14,15,17,.6));animation:dk-up 1s var(--e) .26s both}
.dk-gc::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);opacity:.2;mix-blend-mode:multiply;pointer-events:none}
.dk-door{display:flex;flex-direction:column;gap:12px;min-width:0;padding:24px 28px 20px}
.dk-dr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.dk-dr[hidden]{display:none}
.dk-dr input{height:52px;min-width:0;padding:0 18px;border:0;border-radius:26px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font:400 16px/1 var(--f)}
.dk-dr input:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--fg)}
.dk-dr #dkCode{font:500 20px/1 var(--mono);letter-spacing:.28em}
#dkAsk::after{content:"→";display:inline-block;transition:transform .5s var(--spring)}
#dkAsk:hover::after{transform:translateX(5px)}
.dk-doorsay{max-width:52ch;font:400 15px/1.45 var(--f);color:var(--fg2)}
.dk-doorsay:empty{display:none}
.dk-doorsay a{font-weight:600;text-underline-offset:4px}
/* what opens: the public count stands clear; what is the producer's own stands behind frosted glass, with no figure */
.dk-behind{display:flex;flex-direction:column;justify-content:center;gap:16px;min-width:0;padding:24px 28px 22px;border-left:1px solid color-mix(in srgb,var(--tint) 22%,var(--line))}
.dk-behind>.ml{color:var(--fg3)}
.dk-bc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:16px;margin:0}
.dk-bc div{display:flex;flex-direction:column;gap:9px;min-width:0}
.dk-bc dt{font:500 10px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg2)}
.dk-bc dd{display:flex;align-items:center;gap:6px;min-height:30px;margin:0;font:300 clamp(22px,2vw,28px)/1 var(--f);letter-spacing:-.035em;white-space:nowrap}
.dk-fr{display:block;flex:0 1 84px;min-width:0;height:26px;border-radius:9px;background:linear-gradient(100deg,color-mix(in srgb,var(--tint) 42%,#fff),color-mix(in srgb,var(--tint) 14%,#fff) 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 -8px 12px -8px color-mix(in srgb,var(--tint) 50%,transparent);opacity:.9}

/* ---------- the sheet under the head: three calm parts on hairlines, no panels ---------- */
.dk>section.dk-cell{padding-block:34px 44px;background:linear-gradient(var(--line),var(--line)) var(--pad) 0/calc(100% - var(--pad)*2) 1px no-repeat}
.dk>section.dk-cell[hidden]{display:none}
.dk-ch{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px;margin-bottom:22px}
.dk-ch h2,.dk-ch h3{display:flex;align-items:center;gap:10px;color:var(--fg)}
.dk-quiet{max-width:56ch;margin-top:16px;font:400 16px/1.42 var(--serif);color:var(--fg2)}
.dk-wait{font:400 clamp(19px,1.8vw,23px)/1.3 var(--serif);color:var(--fg2)}
.dk-wait[hidden]{display:none}
.dk-sample{color:var(--rust);box-shadow:inset 0 0 0 1px var(--rust)}

/* a. From the house: who played what. A production, what was done to it, and its plays as the row's one figure */
.dk-played{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.dk-played li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:16px;min-height:76px;padding:10px 0;border-top:1px solid var(--line)}
.dk-played li:nth-child(-n+2){border-top:0}
.dk-played img{width:56px;height:56px;border-radius:12px;object-fit:cover;background:#ddd;box-shadow:0 12px 16px -14px rgba(14,15,17,.6)}
.dk-played .dk-lt b{font:600 18px/1.15 var(--f);letter-spacing:-.018em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-played .dk-lt .ml:empty{display:none}
.dk-pn{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.dk-pn b{font:400 30px/1 var(--f);letter-spacing:-.04em}
.dk-pn .ml{font-size:10px;color:var(--fg3)}
/* the artists who fit, as cards: who, where the producer is with them, ONE line on why, the message to copy */
.dk-fit{margin-top:38px}
.dk-fit[hidden]{display:none}
.dk-fit .dk-ch{margin-bottom:14px}
.dk-mrep{margin:0 0 18px;max-width:70ch}
.dk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.dk-fc{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;padding:18px 18px 8px;border-radius:20px;background:var(--plate);box-shadow:inset 0 0 0 1px var(--line)}
.dk-fn{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%}
.dk-fn b{min-width:0;font:600 17px/1.2 var(--f);letter-spacing:-.012em}
.dk-fn b a{color:inherit;text-decoration:none}
.dk-fn b a:hover{text-decoration:underline;text-underline-offset:4px}
.dk-fn b a i{font-style:normal;font-weight:400;color:var(--fg3)}
.dk-mw{font:400 16px/1.42 var(--serif);color:var(--fg2);text-wrap:pretty}
.dk-fc .tx{align-self:flex-start;min-height:44px;margin-top:auto;color:var(--fg)}
.dk-st{display:inline-flex;flex:none;align-items:center;gap:8px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg2);white-space:nowrap}
.dk-st i{width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--fg3)}
.dk-fc[data-s="sent"] .dk-st i{background:var(--ink);box-shadow:none}.dk-fc[data-s="answered"] .dk-st i{background:var(--rust);box-shadow:none}

/* b. the releases: rows with a body, and one act that unfolds the rest */
.dk-relc .dk-ch{margin-bottom:10px}
.dk-rows{display:flex;flex-direction:column}
.dk-row{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,340px) 168px;align-items:center;gap:0 32px;margin-inline:-16px;padding:14px 16px;border-radius:24px;transition:background .3s,box-shadow .3s}
.dk-row[hidden]{display:none}
.dk-row::before{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;background:var(--line);transition:opacity .2s}
.dk-row:first-child::before{opacity:0}
.dk-cv{position:relative;display:block;width:96px;height:96px;border-radius:16px;overflow:hidden;background:#ddd;box-shadow:0 16px 22px -18px rgba(14,15,17,.6),inset 0 0 0 1px rgba(14,15,17,.05)}
.dk-cv img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--soft)}
.dk-rt{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.dk-rn{display:inline-flex;align-items:center;min-height:44px;max-width:100%;margin:-11px 0 -12px;font:600 23px/1.1 var(--f);letter-spacing:-.025em;text-decoration:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dk-rs{color:var(--fg3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.dk-rt .th-tags{margin-top:2px}
/* one count, over one bar cut in the tiers the production offers; each segment is filled by what is left of its tier */
.dk-ct{display:flex;flex-direction:column;gap:10px;min-width:0}
.dk-cn{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.dk-cn>b{font:400 27px/1 var(--f);letter-spacing:-.035em}
.dk-cn>i{font:400 17px/1 var(--f);font-style:normal;color:var(--fg3)}
.dk-cn>.ml{margin-left:4px;font-size:10.5px;color:var(--fg2)}
.dk-bars{display:flex;gap:4px;height:5px}
.dk-bar{flex:var(--w,1) 1 0;min-width:12px;height:100%;border-radius:3px;background:var(--line);overflow:hidden}
.dk-bar i{display:block;width:100%;height:100%;border-radius:3px;background:var(--fg);transform:scaleX(var(--f,0));transform-origin:0 50%;transition:transform 1s var(--e) .2s}
.dk-tk{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:10px;letter-spacing:.09em;color:var(--fg3)}
.dk-tk span{white-space:nowrap}
.dk-tk i{font-style:normal;color:var(--fg2)}
/* A CLOSED EDITION IS SEALED: an edition plate in the place of its count and its bar (how many were licensed, the day
   it closed), on ink, lined in rust: rust is what is sealed. Its cover is drawn back. No act says Closed. */
.dk-seal{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:14px 16px 13px;border-radius:14px;background:var(--dk);color:var(--pa);box-shadow:inset 0 0 0 1px var(--rust-d),0 22px 26px -22px rgba(14,15,17,.7)}
.dk-seal b{font:600 16px/1.1 var(--f);letter-spacing:-.01em}
.dk-seal b::before{content:"";display:inline-block;width:7px;height:7px;margin:0 8px 1px 0;border-radius:50%;background:var(--rust-d)}
.dk-seal span{font:500 10.5px/1.25 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--pa2)}
.dk-shut .dk-cv img{filter:saturate(.82);opacity:.62}
/* the one act of a row: its link to copy */
.dk-acts{display:flex;flex-direction:column;min-width:0}
.dk-copy{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 16px;border-radius:23px;box-shadow:inset 0 0 0 1px var(--line);font:600 14px/1 var(--f);color:var(--fg);white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
.dk-copy.on{background:var(--fg);color:var(--bg);box-shadow:none}
/* a row answers the hand, in the colour of its own cover */
@media (hover:hover){
  .dk-row:hover{background:color-mix(in srgb,var(--rt,#fff) 9%,var(--plate));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rt,var(--line)) 26%,var(--line))}
  .dk-row:hover::before,.dk-row:hover+.dk-row::before{opacity:0}
  .dk-row:hover .dk-cv img{transform:scale(1.045)}
  .dk-copy:hover{box-shadow:inset 0 0 0 1px var(--fg)}
}
/* the rest stand behind ONE act, which says how many productions there are in all */
.dk-all{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;margin-top:10px;border-radius:26px;box-shadow:inset 0 0 0 1px var(--line);font:600 15px/1 var(--f);color:var(--fg);transition:box-shadow .2s,background .2s}
.dk-all[hidden]{display:none}
.dk-all::after{content:"⌄";font:400 17px/1 var(--f);color:var(--fg3);transition:transform .4s var(--e)}
.dk-all[aria-expanded="true"]::after{transform:rotate(180deg)}
@media (hover:hover){.dk-all:hover{box-shadow:inset 0 0 0 1px var(--fg)}}

/* c. the ledger, quiet: three small figures in one row, then the latest licences */
.dk-lg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 32px;margin:0 0 26px}
.dk-lg div{display:flex;flex-direction:column;gap:7px;min-width:0}
.dk-lg dt{font:500 10px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg3)}
.dk-lg dd{margin:0}
.dk-lg dd.num{font:400 22px/1.1 var(--f);letter-spacing:-.025em;white-space:nowrap}
.dk-ls{font:400 14px/1.4 var(--serif);color:var(--fg2)}
.dk-list li{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;border-top:1px solid var(--line)}
.dk-lt{display:flex;flex-direction:column;gap:4px;min-width:0}
.dk-lt b{font:600 16px/1.2 var(--f);letter-spacing:-.01em}
.dk-lt .ml{color:var(--fg3)}
.dk-la{display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:nowrap}
.dk-la b{font:500 16px/1 var(--f)}
.dk-la .ml{color:var(--fg2)}

/* Start a release: the panel, a frosted sheet with the producer's own disc on it */
.dk>section.dk-panel{padding-block:16px 10px}
.dk-pw{position:relative;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:18px 40px;align-items:center;padding:30px 32px 26px;border-radius:24px;background:color-mix(in srgb,#fff 60%,transparent);box-shadow:inset 0 0 0 1px var(--line),0 44px 60px -48px rgba(14,15,17,.45);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);overflow:hidden;transition:box-shadow .2s}
.dk-panel.over .dk-pw{box-shadow:inset 0 0 0 2px var(--blue),0 44px 60px -48px rgba(14,15,17,.45)}
.dk-pw::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.16;mix-blend-mode:multiply;pointer-events:none}
.dk-pw>*{position:relative}
.dk-pw>.ml{grid-column:2}
.dk-ph{grid-column:2;font:440 clamp(26px,2.8vw,40px)/1.04 var(--f);letter-spacing:-.035em;text-wrap:balance}
#dkOwn{grid-column:1;grid-row:1/span 6;align-self:center;padding-bottom:30px}
#dkOwn .od{--D:min(100%,300px)}
.dk-psay{grid-column:2;max-width:44ch;font:400 17px/1.4 var(--serif);color:var(--fg2)}
.dk-psay.bad{color:var(--rust)}
.dk-por{grid-column:2}
.dk-por .tx{align-self:auto;min-height:44px}
.dk-pf{grid-column:2;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.dk-pline{font:400 clamp(20px,2vw,26px)/1.45 var(--serif)}
.dk-pline>span{display:block}
.dk-pline input{display:inline-block;width:14ch;max-width:100%;padding:0 3px;border:0;border-bottom:1.5px solid var(--fg);border-radius:0;background:none;font:inherit;line-height:1.15;color:var(--ink)}
.dk-pline input:focus-visible{outline:none;box-shadow:0 1.5px 0 var(--ink)}
.dk-pa{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.dk-pa .tx{align-self:auto;min-height:44px}
.dk-pfoot{max-width:52ch;font:400 14.5px/1.5 var(--f);color:var(--fg2)}
.dk-panel .err{font:500 15px/1.4 var(--f);color:var(--rust)}

/* the foot, and an address nobody lives at */
.dk>section.dk-foot{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-block:30px 6px}
.dk-foot .ml{max-width:78ch;line-height:1.7}
body.dk-none .dk-gate,body.dk-none .dk-cell,body.dk-none .dk-foot,body.dk-none .dk-panel,body.dk-none .dk-side,body.dk-none .dk-me,body.dk-none .th-sub{display:none}
body.dk-none .dk>section.dk-head{grid-template-columns:1fr;min-height:52svh;align-content:center;padding-bottom:40px}
body.dk-none .dk-head h1{font-size:clamp(34px,4.6vw,64px)}

@media (max-width:1180px){
  .dk-row{grid-template-columns:88px minmax(0,1fr) minmax(0,280px) 150px;gap:0 22px}
  .dk-cv{width:88px;height:88px}
  .dk-played{gap:0 28px}
}
@media (max-width:1000px){
  .dk-me .dk-in .ml{display:none}
  .dk>section.dk-head{grid-template-columns:1fr;gap:18px;padding-top:14px}
  .dk-side{animation:none}
  .dk-hw{gap:12px}
  /* the one act stays in reach: at the foot of the screen, with the small disc beside it */
  .dk-ha{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:400;width:min(560px,calc(100vw - 20px));gap:12px;padding:8px 8px 8px 10px;border-radius:40px;background:var(--dk);color:var(--pa);box-shadow:0 26px 50px -20px rgba(14,15,17,.7);transform:translateX(-50%)}
  .dk-ha .dk-disc{display:block;width:48px;height:48px;box-shadow:none}
  .dk{padding-bottom:84px}
  .dk-gc{grid-template-columns:1fr;border-radius:22px}
  .dk-door{padding:20px 18px 16px}
  .dk-behind{gap:12px;padding:16px 18px 18px;border-left:0;border-top:1px solid color-mix(in srgb,var(--tint) 22%,var(--line))}
  .dk-bc{gap:12px}
  .dk-bc dt{font-size:9.5px;letter-spacing:.09em}
  .dk-played{grid-template-columns:1fr}
  .dk-played li:nth-child(2){border-top:1px solid var(--line)}
  .dk-pn b{font-size:26px}
  .dk-cards{grid-template-columns:1fr}
  /* a row, at a phone's size: its cover and its name, its count, then its one act */
  .dk-row{grid-template-columns:76px minmax(0,1fr);grid-template-areas:"cv title" "ct ct" "acts acts";gap:14px 14px;margin-inline:0;padding:18px 0;border-radius:0}
  .dk-row::before{left:0;right:0}
  .dk-cv{grid-area:cv;width:76px;height:76px;border-radius:14px}
  .dk-rt{grid-area:title;gap:6px}
  .dk-rn{font-size:20px}
  .dk-ct{grid-area:ct}
  .dk-acts{grid-area:acts}
  .dk-copy{min-height:48px}
  .dk-lg{grid-template-columns:1fr;gap:16px}
  .dk-lg div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 16px}
  .dk-lg .dk-ls{grid-column:1/-1}
  .dk-pw{grid-template-columns:1fr;padding:22px 18px 18px}
  #dkOwn{grid-column:1;grid-row:auto;justify-self:center;width:min(70vw,260px);padding-bottom:34px}
  body.dk-sending .dk-ha{display:none}
  body.dk-sending .dk{padding-bottom:20px}
  .dk-pw>.ml,.dk-ph,.dk-psay,.dk-por,.dk-pf{grid-column:1}
  .dk-pline input{width:12ch}
  .dk-pa .b{flex:1 1 100%}
}
@media (max-width:560px){
  .dk-dr{grid-template-columns:1fr}
  /* (a long name gives way before the strip does: the name is cut, never the screen widened) */
  .dk-me{min-width:0;flex:0 1 auto}
  .dk-mn{min-width:0;max-width:34vw;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
  .dk-me:has(.dk-in:not([hidden])) .dk-mn{max-width:21vw}
  /* (10 October: the bar keeps the nav's nouns whole; the producer's name gives way to the house's face, and the
     page's first line says whose desk it is. Signed in, Sign out stands beside the face and the last noun gives way.) */
  .top .dk-mn{display:none}
  .top:has(.dk-in:not([hidden])) nav a:last-child{display:none}
}