/* TONEHOLD, the look of 9 October (Martial, on a product page he showed: "something interesting into the card and the
   button", "we might miss some basic banner", "sometimes it's too white, it misses some volume … it misses some
   rationality per moment"). A page loads this sheet to stand in that look; the landing page does not yet, and keeps
   its own.
   ONE MOMENT, ONE JOB, ONE SURFACE. Volume comes from the two planes the house already has, paper and ink (#0E0F11),
   and from objects that have a body and a shadow. No grey fills, no glow.
   BLUE is what a hand plays (Play it). INK is the commitment (License). RUST is what is happening now.
   A producer's name is a small rounded tag that leads to their house, wherever it stands.
   Every word is a draft for Martial's. */
/* THE TWO GROUNDS. The page's own (tonehold.css: --bg, --plate, --fg, --fg2, --fg3, --line, --ink, --rust) and the
   second one, on which a card or a device stands: --dk its ground, --dk2 a raised part of it, --dkl its hairline,
   --pa --pa2 --pa3 what is written on it, --ink-d and --rust-d the blue and the rust as they read there. Every
   colour of the look is one of these names. So a NIGHT MODE is the same pages with the two grounds exchanged, and
   nothing else (Martial, 9 October, on the Player: "everything is too white a bit"): the block under
   html[data-night], below. Nothing sets that attribute yet: it is his to ask for. */
:root{--blue:#1F3BE2;--dk:#0E0F11;--dk2:#1A1B1F;--dkl:#303238;--pa:#F3F2EE;--pa2:#BFBDB7;--pa3:#8F8D88;--ink-d:#8496FF;--rust-d:#E2682B;
  --disc:radial-gradient(circle at 31% 25%,#fff 0,#F7F6F3 44%,#E8E6E1 100%);--soft:cubic-bezier(.3,1.16,.4,1)}
html[data-night]{--bg:#0E0F11;--plate:#1A1B1F;--fg:#F3F2EE;--fg2:#BFBDB7;--fg3:#8F8D88;--line:#303238;--ink:#8496FF;--rust:#E2682B;
  --dk:#F3F2EE;--dk2:#FAFAF8;--dkl:#D8D6D0;--pa:#0E0F11;--pa2:#3B3E44;--pa3:#63666C;--ink-d:#1F3BE2;--rust-d:#B5420F;
  --disc:radial-gradient(circle at 31% 25%,#34363c 0,#232429 44%,#16171a 100%);color-scheme:dark}
/* what the base sheet wrote in a colour of its own takes its name here, so that the exchange holds */
.b.k,.way[aria-selected="true"],.th-tp,.pill[aria-checked="true"]{color:var(--bg)}
.plate,.od-plate{background:var(--disc)}
.pay input,.dk-dr input{background:var(--plate)}

/* an ink plane: a card or a device with a body, set on the paper. Inside it the same parts read in negative */
.th-dk{--fg:var(--pa);--fg2:var(--pa2);--fg3:var(--pa3);--line:var(--dkl);--plate:var(--dk2);--bg:var(--dk);--ink:var(--ink-d);--rust:var(--rust-d);background:var(--dk);color:var(--pa)}
.th-dk :focus-visible{outline-color:var(--pa)}

/* ---------- the acts: two of equal size, side by side. Blue plays; ink commits (on ink, in paper) ---------- */
.b{min-height:52px;padding:0 22px;border-radius:26px}
.b.p{background:var(--blue);color:#fff}
.th-dk .b.k{background:var(--pa);color:var(--dk)}
.th-dk .b.o{box-shadow:inset 0 0 0 1px var(--pa2)}
.th-acts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.th-acts .b{padding:0 14px}

/* ---------- small rounded tags: what a producer shops by ---------- */
.th-tags{display:flex;flex-wrap:wrap;gap:6px}
.th-tag{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:13px;box-shadow:inset 0 0 0 1px var(--line);font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg2);white-space:nowrap}
.th-tag.b{min-height:26px;padding:0 10px;border-radius:13px;color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 60%,transparent);transform:none}
/* a producer's name: a tag with a small disc before it, their house. Drawn small, a finger's 44 around it */
.th-who{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:26px;padding:0 11px 0 9px;border-radius:13px;box-shadow:inset 0 0 0 1px var(--fg);font:600 12.5px/1 var(--f);letter-spacing:.005em;text-transform:none;text-decoration:none;color:var(--fg);white-space:nowrap;transition:background .2s,color .2s}
.th-who::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor}
.th-who::after{content:"";position:absolute;inset:-9px -3px}
a.th-who:hover{background:var(--fg);color:var(--bg)}

/* ---------- above the page: one banner for now, and the nav's nouns ---------- */
.th-now{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 14px;min-height:40px;padding:8px 48px;border-bottom:1px solid var(--rust);font:400 13.5px/1.35 var(--f);text-align:center}
.th-now span::before{content:"";display:inline-block;width:6px;height:6px;margin:0 9px 1px 0;border-radius:50%;background:var(--rust)}
.th-now a{font-weight:600;text-underline-offset:4px;white-space:nowrap}
.th-now button{position:absolute;right:2px;top:50%;width:44px;height:40px;margin-top:-20px;font:300 21px/1 var(--f);color:var(--fg2)}
.top nav a[aria-current="page"]{background-size:100% 1px}
/* the top strip keeps its veil from edge to edge, so that it never stands as a box over a production's colour */
.top{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.top::before{content:"";position:absolute;left:50%;top:0;z-index:-1;width:100vw;height:100%;transform:translateX(-50%);background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.th-sub{display:none}

/* ---------- the head of a house: the producer's own card ----------
   The first thing of the house, on ink until the producer's own image comes (then: their sleeve, and one colour taken
   from it). Their name, large. What a buyer shops by, as tags. What is counted, as figures that turn. Two acts. Behind
   the words, their catalogue as a disc at rest: one ring for each production, blue where it has parts to play. */
.th-head{padding-block:8px 0!important}
.th-hc{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:28px 64px;align-items:end;min-height:clamp(360px,44svh,470px);padding:44px 48px 40px;border-radius:24px;overflow:hidden;box-shadow:0 44px 60px -44px rgba(14,15,17,.6)}
.th-hd{position:absolute;right:-12%;top:-58%;width:min(66%,720px);aspect-ratio:1;pointer-events:none;opacity:.8}
.th-hd circle{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.th-hd circle.b{stroke:var(--ink);opacity:.75}
.th-hd circle.r{stroke:var(--rust)}
.th-hw,.th-hn{position:relative;min-width:0}
.th-hw{display:flex;flex-direction:column;gap:16px}
.th-hw>.ml{display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--fg3)}
.th-hw>.ml b{font-weight:500;color:var(--fg2)}
.th-hc .th-nm{font:440 clamp(48px,8.4vw,128px)/.9 var(--f);letter-spacing:-.048em;text-wrap:balance}
.th-hv{max-width:36ch;font:400 clamp(18px,1.6vw,22px)/1.36 var(--serif);color:var(--fg2)}
.th-hn{display:flex;flex-direction:column;gap:24px}
.th-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding-top:18px;border-top:1px solid var(--line)}
.th-figs dd{font:300 clamp(36px,3.9vw,58px)/1 var(--f);letter-spacing:-.04em}
.th-figs dt{margin-top:8px;font:500 10px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg3)}
/* their sleeve, once it is theirs: a band of their own image */
.th-hi{position:absolute;inset:0 0 0 auto;width:44%}
.th-hi img{width:100%;height:100%;object-fit:cover}
.th-hi::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--dk),transparent 46%)}

/* ---------- one player: the disc. What its row carried stands on it (the rim heard in rust, the time as one figure) ---------- */
.deck,.meta,.th-hint,.note,.parts:not(.pads):not(.trk),.th-fx{display:none}
.it .n{visibility:hidden}
.who{display:flex;align-items:center;gap:8px;pointer-events:auto}
.who .th-wt{font:500 11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;text-decoration:none;color:var(--fg);padding:9px 0}
.who .th-wt:hover{text-decoration:underline;text-underline-offset:4px}
.th-clk{display:block;position:absolute;left:50%;top:calc(100% + 13px);transform:translateX(-50%);font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--fg3);pointer-events:none;transition:color .3s}
.plate.playing~.th-clk{color:var(--fg)}
/* under the disc in a house: what the production in the middle is, as tags, and the way to its licence */
.th-facts{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 16px;margin-top:6px;padding:0 var(--pad)}
.th-facts .go{min-height:44px;font-size:14px}
.th-facts b{font:560 15px/1 var(--f)}

/* ---------- a release's first screen: what this is, on the production's own colour ----------
   Behind it, its cover enlarged and softened: the page belongs to its production. The object comes first (the disc,
   playable at once), then its card: the name, large; what a producer shops by, as tags; one line in the producer's
   voice when they wrote one; two acts of equal size. */
.th-first{position:relative;max-width:1280px;margin-inline:auto;padding:4px var(--pad) 30px}
.th-band{position:absolute;left:50%;top:-110px;width:100vw;height:calc(100% + 110px);transform:translateX(-50%);z-index:-1;overflow:hidden;pointer-events:none;-webkit-mask:linear-gradient(#000 58%,transparent);mask:linear-gradient(#000 58%,transparent)}
.th-band i{position:absolute;inset:-14%;background:center/cover no-repeat;filter:blur(34px) saturate(1.3);opacity:0;transition:opacity 1.4s var(--e)}
.th-band.in i{opacity:.6}
.th-crumb{display:flex;align-items:center;gap:10px;min-height:44px;font:500 11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--fg)}
.th-crumb i{font-style:normal;color:var(--fg3)}
.th-fg{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:0 48px}
.th-fg .cat{order:2;padding:0!important}
.th-fg .th-facts{display:none}
.th-fg .room{height:calc(var(--D) + 92px);--cy:calc(40px + var(--D)/2);-webkit-mask:none;mask:none}
.th-card{display:flex;flex-direction:column;gap:18px;min-width:0}
.th-card .th-ct{font:440 clamp(46px,6.6vw,108px)/.9 var(--f);letter-spacing:-.048em;text-wrap:balance}
.th-cv{max-width:36ch;font:400 clamp(18px,1.6vw,22px)/1.36 var(--serif);color:var(--fg2)}
.th-card .th-acts{max-width:480px;margin-top:8px}
.th-more{display:flex;flex-wrap:wrap;align-items:center;gap:0 26px}
.th-more .go{min-height:44px;font-size:14.5px}
.th-mode{align-self:flex-start;min-height:44px;font:500 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--fg3)}
.th-mode b{font-weight:500;color:var(--fg)}

/* ---------- the ticket: the base he showed, and what changes on it ----------
   One frame travels between the licences (the round selectors are gone). A count is its marks: granted in ink, free in
   a hairline. Play is the blue one; Choose a licence stays in ink. The producer's name is the tag that leads to the
   house. The picture's side takes the production's own colour. */
.ticket{border-radius:24px;box-shadow:0 44px 60px -48px rgba(14,15,17,.45)}
.pic{display:grid;place-items:center;border-radius:24px 0 0 24px;background:var(--pc,var(--plate));transition:background-color 1s var(--e)}
.pic .fr{width:100%;box-shadow:0 34px 44px -30px rgba(14,15,17,.5)}
.info{gap:24px}
.by{display:flex}
.what{display:none}
.info .th-tags{display:flex;margin-top:6px}
.desc{font-size:17px}
.lc{position:relative;margin:-4px -16px}
.lc-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 18px;padding:14px 16px;border:0!important;border-radius:16px}
.lc-row::before{content:none}
.lc-row+.lc-row::after{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;background:var(--line)}
.lc-row[aria-checked="true"]::after,.lc-row[aria-checked="true"]+.lc-row::after{content:none}
.lc-g{grid-column:1/-1;max-width:44ch}
.lc-c{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.lc-m{display:flex;align-items:flex-end;gap:5px;height:18px;margin-top:6px}
.lc-m i{flex:none;width:1px;height:62%;background:var(--fg3);transform-origin:50% 100%;animation:tick .45s var(--e) calc(var(--k)*26ms) both}
.lc-m i.h{width:2px;height:100%;background:var(--fg)}
.lc-l{display:block;justify-self:end;align-self:end;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg2)}
.lc-l b{font-weight:500;color:var(--fg)}
.lc-row[disabled] .lc-m i{background:var(--line)}.lc-row[disabled] .lc-m i.h{background:var(--fg3)}
.lc-fr{display:block;position:absolute;left:0;right:0;top:0;height:0;border-radius:16px;box-shadow:inset 0 0 0 1.5px var(--fg);pointer-events:none;opacity:0;transition:transform .5s var(--soft),height .4s var(--e),opacity .3s}
.lc-fr.on{opacity:1}
.lc-fr.set{transition:none}
.lc-shut,.lc-test{margin:12px 16px 0}
.info .acts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.info .acts .b,.info .acts .b.k{flex:none;padding:0 12px}
.info .acts .b.o{background:var(--blue);color:#fff;box-shadow:none}
.info .acts [hidden]+.b{grid-column:1/-1}

/* ---------- the geometry folds ---------- */
@media (max-width:1000px){
  .th-sub{display:flex;flex-wrap:wrap;gap:0 22px;max-width:1280px;margin:-6px auto 0;padding:0 var(--pad) 4px}
  .th-sub a{padding:15px 0;font:500 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;text-decoration:none;color:var(--fg2)}
  .th-sub a[aria-current="page"]{color:var(--fg);text-decoration:underline;text-underline-offset:5px}
  .th-now{display:block;padding:9px 46px 9px var(--pad);font-size:13px;text-align:left}
  .th-now a{margin-left:8px}
  .th-head{padding-block:4px 0!important}
  .th-hc{grid-template-columns:1fr;gap:26px;align-items:start;min-height:0;padding:26px 22px 22px;border-radius:22px}
  .th-hd{right:-52%;top:-34%;width:112%}
  .th-hi{inset:0 0 auto 0;width:100%;height:150px}.th-hi::after{background:linear-gradient(0deg,var(--dk),transparent 60%)}
  .th-hc.th-img .th-hw{padding-top:120px}
  .th-first{padding-bottom:22px}
  .th-fg{grid-template-columns:1fr;gap:6px}
  .th-fg .cat{order:0}
  .th-card{gap:16px}
  .pic{border-radius:24px 24px 0 0;padding:24px 24px 18px}
  .pic .fr{width:min(64%,300px)}
  .info{padding:28px 22px 22px;gap:22px}
  .info .acts .b{flex:none}
}
@media (max-width:520px){
  .acts .b{flex:none}
  .th-acts .b,.info .acts .b{font-size:14.5px;gap:8px}
  .lc-c{grid-column:auto}
}

/* ---------- the instrument: a device on ink, set on the paper (instrument.js) ----------
   The house's Sampler, carried over: a pad for each part (its own drawing, its level at its left edge, in rust while it
   sounds), Parts or Whole, the speed as a tape, three effects held by hand. It has no transport: the disc above it is
   its player. Blue is what the hand plays. */
.th-inst{padding-block:14px 6px!important}
.th-inst:empty{display:none}
.ti{display:flex;flex-direction:column;gap:18px;padding:26px 30px 22px;border-radius:24px;box-shadow:0 44px 60px -44px rgba(14,15,17,.6)}
.ti-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;min-height:44px}
.ti-h .ml{color:var(--fg3)}
.ti-nm{font:600 18px/1.2 var(--f);letter-spacing:-.012em;text-decoration:none;color:var(--fg);padding:10px 0}
.ti-nm:hover{text-decoration:underline;text-underline-offset:4px}
.ti-mode{display:flex;gap:2px;margin-left:auto;padding:3px;border-radius:22px;box-shadow:inset 0 0 0 1px var(--line)}
.ti-mode button{min-height:38px;padding:0 16px;border-radius:19px;font:500 13.5px/1 var(--f);color:var(--fg2);transition:background .2s,color .2s}
.ti-mode button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.ti-pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ti-pad{position:relative;display:grid;grid-template-rows:auto 1fr;gap:8px;min-height:112px;padding:14px 14px 12px 22px;border-radius:16px;background:var(--plate);box-shadow:inset 0 0 0 1px var(--ink);text-align:left;cursor:ns-resize;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overflow:hidden;transition:box-shadow .2s,background .2s,transform .4s var(--soft)}
.ti-pn{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-width:0}
.ti-pn b{font:600 16px/1.15 var(--f);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ti-pn i{flex:none;font:500 10px/1 var(--mono);font-style:normal;color:var(--fg3)}
.ti-pad canvas{display:block;width:100%;height:36px;align-self:end;pointer-events:none}
.ti-lv{position:absolute;left:9px;bottom:12px;width:3px;height:calc((100% - 24px) * var(--lvl,.8));border-radius:2px;background:var(--fg);opacity:.5}
.ti-pad.sounding{box-shadow:inset 0 0 0 1.5px var(--rust)}
.ti-pad.sounding .ti-lv{background:var(--rust);opacity:calc(.5 + var(--m,0) * .5)}
.ti-pad.off{background:none;box-shadow:inset 0 0 0 1px var(--line)}
.ti-pad.off .ti-pn b{color:var(--fg3)}
.ti-pad:active{transform:scale(.985);transition-duration:.08s}
.ti-sp{display:flex;flex-direction:column;gap:4px}
.ti-ruler{display:block;width:100%;height:44px;cursor:ew-resize;touch-action:none;border-radius:6px}
.ti-read{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg2);text-align:center}
.ti-fx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ti-hold{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:92px;padding:12px 6px 10px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--fg3);cursor:ew-resize;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overflow:hidden;transition:box-shadow .15s,background .15s}
.ti-hold svg{width:28px;height:28px;color:var(--ink)}
.ti-hold b{font:600 15px/1.1 var(--f)}
.ti-hold small{max-width:100%;font:500 10px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ti-x{position:absolute;top:0;bottom:0;left:calc(var(--x,.5) * 100%);width:2px;margin-left:-1px;background:var(--rust);opacity:0}
.ti-hold.held{box-shadow:inset 0 0 0 1.5px var(--rust);background:color-mix(in srgb,var(--rust) 16%,transparent)}
.ti-hold.held .ti-x{opacity:1}
.ti-hold.held small{color:var(--rust)}
.ti-keys{color:var(--fg3);text-align:center}
@media (hover:none){.ti-keys{display:none}}
@media (max-width:1000px){
  .th-inst{padding-block:10px 4px!important}
  .ti{gap:14px;padding:20px 16px 18px;border-radius:22px}
  .ti-pads{grid-template-columns:1fr 1fr;gap:8px}
  .ti-pad{min-height:92px;padding:12px 12px 10px 20px}
  .ti-pad canvas{height:30px}
  .ti-fx{gap:8px}
  .ti-hold{min-height:84px}
}

/* ---------- applying to release: three statements, one production on the disc, one sentence ---------- */
.ap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"why drop" "send drop";gap:38px 72px;align-items:start;max-width:1280px;margin:0 auto;padding:26px var(--pad) 80px}
.ap-why,.ap-drop,section.ap-send{margin:0;max-width:none}
.ap-why,section.ap-send{padding:0}
.ap-why{grid-area:why;display:flex;flex-direction:column;gap:16px}
.ap-3{display:flex;flex-direction:column}
.ap-3 li{padding:17px 0 19px;border-top:1px solid var(--line);font:440 clamp(27px,3.4vw,48px)/1.04 var(--f);letter-spacing:-.036em;text-wrap:balance}
.ap-3 li:last-child{border-bottom:1px solid var(--line)}
.ap-3 span{color:var(--fg3)}
/* the place the production lands: a card with a body, which answers a file held over the page */
.ap-drop{grid-area:drop;position:sticky;top:84px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:38px 28px 26px;border-radius:24px;background:var(--plate);box-shadow:0 44px 60px -48px rgba(14,15,17,.45);transition:box-shadow .2s}
.ap-drop.over{box-shadow:inset 0 0 0 2px var(--blue),0 44px 60px -48px rgba(14,15,17,.45)}
.ap-say{min-height:2.7em;margin-top:26px;max-width:26ch;font:400 clamp(19px,1.7vw,23px)/1.3 var(--serif);text-align:center}
.ap-say.bad{color:var(--rust)}
.ap-or{display:flex;flex-wrap:wrap;justify-content:center;gap:0 26px}
.ap-or .tx{align-self:auto;min-height:44px}
.ap-link{display:flex;flex-direction:column;gap:8px;width:100%;max-width:420px}
.ap-link .fld{font-size:19px}
.ap-link .ml{color:var(--fg3)}
.ap-send{grid-area:send;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.ap-line{position:relative;font:400 clamp(26px,2.9vw,40px)/1.4 var(--serif);text-wrap:pretty}
.ap-line>span{display:block}
.ap-line input{display:inline-block;width:8ch;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)}
.ap-line input::placeholder{color:var(--fg3);opacity:.75}
.ap-line input:focus-visible{outline:none;border-bottom-color:var(--ink);box-shadow:0 1.5px 0 var(--ink)}
.ap-ruler{position:absolute;left:0;top:0;visibility:hidden;white-space:pre;pointer-events:none}
.ap-send .b{min-width:220px}
.ap-foot{max-width:52ch;font:400 15px/1.5 var(--f);color:var(--fg2)}
.ap-foot b{font-weight:600;color:var(--fg)}
.ap-send .nav{margin-top:4px}
#doneSub a{font-weight:600;text-underline-offset:4px}
@media (max-width:1000px){
  .ap{grid-template-columns:1fr;grid-template-areas:"why" "drop" "send";gap:26px;padding:8px var(--pad) 60px}
  .ap-drop{position:static;padding:28px 18px 18px;border-radius:22px}
  .od{--D:min(78vw,300px)}
  .ap-say{margin-top:24px}
  .ap-send .b{align-self:stretch}
}

/* ---------- the Booth: a voice, tried on the production (booth.js). A device on ink, under the instrument ---------- */
.th-booth{padding-block:6px 6px!important}
.tb{display:flex;flex-direction:column;gap:16px;padding:24px 30px 20px;border-radius:24px;box-shadow:0 44px 60px -44px rgba(14,15,17,.6)}
.tb-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;min-height:44px}
.tb-h .ml{color:var(--fg3)}
.tb-t{font:600 18px/1.2 var(--f);letter-spacing:-.012em}
.tb-h .th-tag{margin-left:auto}
.tb-lane{display:block;width:100%;height:64px;border-radius:12px;background:var(--plate)}
.tb-acts{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:center}
.tb-acts .b{padding:0 14px}
.tb-acts .b[disabled]{color:var(--fg3);box-shadow:inset 0 0 0 1px var(--line)}
/* Record is rust: it is now */
.tb-rec{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px 0 16px;border-radius:26px;box-shadow:inset 0 0 0 1.5px var(--rust);font:600 15px/1 var(--f);color:var(--fg);transition:background .2s}
.tb-rec i{width:16px;height:16px;border-radius:50%;background:var(--rust);transition:border-radius .2s,transform .2s}
.tb-rec[aria-pressed="true"]{background:color-mix(in srgb,var(--rust) 22%,transparent)}
.tb-rec[aria-pressed="true"] i{border-radius:3px;transform:scale(.82)}
.tb-rec[disabled]{opacity:.5}
.tb-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.tb-line .ml{color:var(--fg3)}
.tb-line input[type=range]{flex:1 1 180px;min-width:120px;height:44px;accent-color:var(--pa);background:none}
.tb-line input[disabled]{opacity:.4}
.tb-line #tbMs{min-width:64px;color:var(--fg)}
.tb-line .tx{align-self:auto;min-height:44px;color:var(--fg2)}
.tb-line .tx[disabled]{opacity:.45}
.tb-say{min-height:1.4em;font:400 16px/1.4 var(--serif);color:var(--fg2)}
.tb-say.bad{color:var(--rust)}
@media (max-width:1000px){
  .tb{gap:14px;padding:20px 16px 16px;border-radius:22px}
  .tb-acts{grid-template-columns:1fr 1fr}
  .tb-rec{grid-column:1/-1;justify-content:center}
  .tb-h .th-tag{margin-left:0}
}

/* ---------- the producers, each as their card (producers/) ---------- */
.th-pp{padding-block:16px 0!important}
.th-pp .th-ph{margin:12px 0 28px;font:440 clamp(34px,5vw,72px)/.98 var(--f);letter-spacing:-.042em;text-wrap:balance}
.th-pg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px}
.th-pc{position:relative;display:flex;flex-direction:column;gap:22px;min-height:360px;padding:28px 28px 20px;border-radius:24px;overflow:hidden;text-decoration:none;box-shadow:0 44px 60px -46px rgba(14,15,17,.6);transition:transform .5s var(--soft)}
.th-pc:hover{transform:translateY(-4px)}
.th-pc .th-hd{right:-32%;top:-40%;width:96%}
.th-pc .th-hi{width:100%;height:46%;inset:0 0 auto 0}.th-pc .th-hi::after{background:linear-gradient(0deg,var(--dk),transparent 70%)}
.th-pw{position:relative;display:flex;flex-direction:column;gap:12px}
.th-pw>.ml{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--fg3)}
.th-pw>.ml b{font-weight:500;color:var(--fg2)}
.th-pn{font:440 clamp(38px,4.2vw,60px)/.94 var(--f);letter-spacing:-.045em;text-wrap:balance}
.th-pf{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.th-pf>span{display:flex;flex-direction:column;gap:6px}
.th-pf b{font:300 clamp(30px,3vw,42px)/1 var(--f);letter-spacing:-.04em}
.th-pf>span>i{font:500 10px/1.4 var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--fg3)}
.th-pc .go{position:relative;min-height:44px;color:var(--fg)}

/* ---------- how it works: the instrument, then three moments that each show their thing ---------- */
.th-mo{display:flex;flex-direction:column;gap:14px;padding-block:clamp(40px,6vw,80px) 0!important}
.th-mo2{padding-bottom:0!important}
.th-mo2+.feat{padding-top:22px!important}
.th-mh{max-width:22ch;font:440 clamp(30px,4.2vw,60px)/1 var(--f);letter-spacing:-.04em;text-wrap:balance}
.th-out{display:flex;flex-direction:column;align-items:center;gap:22px;padding-block:clamp(48px,7vw,96px) 30px!important}
.th-out .th-acts{width:min(100%,520px)}
/* the licences of a production, as marks to take by hand */
.th-mk{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px 44px;margin-top:14px;padding:30px 30px 24px;border-radius:24px;background:var(--plate);box-shadow:0 44px 60px -48px rgba(14,15,17,.4)}
.th-mkm{display:flex;align-items:flex-end;gap:7px;height:72px}
.th-mki{position:relative;width:14px;height:100%;cursor:pointer}
.th-mki::before{content:"";position:absolute;left:50%;bottom:0;width:1px;height:60%;margin-left:-.5px;background:var(--fg3);transform-origin:50% 100%;transition:height .35s var(--soft),width .2s,background-color .2s,margin .2s}
.th-mki:hover::before{height:76%;background:var(--fg)}
.th-mki.h::before{width:2px;height:100%;margin-left:-1px;background:var(--fg)}
.th-mki.y::before{width:3px;height:112%;margin-left:-1.5px;background:var(--rust)}
.th-mki.x::before{height:34%;background:var(--line)}
.th-mki[disabled]{cursor:default}
.th-mkn{display:flex;align-items:baseline;gap:10px;margin-top:12px;font:600 14px/1.2 var(--f);letter-spacing:.07em;text-transform:uppercase}
.th-mkn span{font:400 14px/1 var(--f);letter-spacing:0;color:var(--fg2)}
.th-mks{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;min-height:44px;margin-top:14px;font:400 clamp(20px,2vw,26px)/1.2 var(--serif)}
.th-mks b{font-weight:400}
.th-mks .ml{color:var(--fg2)}
.th-mks .tx{align-self:auto;min-height:44px}
@media (max-width:1000px){
  .th-mk{gap:14px 26px;padding:22px 18px 18px;border-radius:22px}
  .th-mkm{gap:4px;height:60px}
  .th-mki{width:12px}
}

/* ---------- the catalogue as rows: what is the same on every row is said once, at the head ---------- */
.th-lst{padding-block:clamp(28px,4vw,52px) 0!important}
.th-same{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 24px;margin:12px 0 14px;font:400 14.5px/1.3 var(--f);color:var(--fg2)}
.th-same>span:not(.ml){display:inline-flex;align-items:baseline;gap:7px}
.th-same em{font-style:normal;font-weight:600;color:var(--fg)}
.th-same b{font-weight:500;color:var(--fg)}
.th-same i{font:500 10.5px/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3)}
.th-rw{grid-template-columns:44px 48px minmax(0,1fr) auto auto;gap:16px}
.th-tt .ml{display:flex;align-items:center;gap:8px;overflow:visible}
.th-rw .th-tag{min-height:20px;padding:0 7px;border-radius:10px;font-size:9.5px;letter-spacing:.09em}
/* a row's licences, as marks: one for each that exists, kind by kind; granted in ink, free in a hairline */
.th-tm{display:flex;align-items:flex-end;gap:10px;height:16px}
.th-tm span{display:flex;align-items:flex-end;gap:3px;height:100%}
.th-tm i{width:1px;height:60%;background:var(--fg3)}
.th-tm i.h{width:2px;height:100%;background:var(--fg)}
.th-tm.shut i,.th-tm.shut i.h{width:2px;height:100%;background:var(--rust)}
.th-tz:empty{display:none}

/* ---------- the bar at the foot: the ticket, folded. On ink, with a body ---------- */
.th-bar{bottom:calc(12px + env(safe-area-inset-bottom,0px));gap:8px;width:min(680px,calc(100vw - 16px));min-height:64px;padding:8px 10px 8px 8px;border-radius:32px;background:var(--dk);color:var(--pa);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 26px 50px -20px rgba(14,15,17,.72),0 6px 14px -8px rgba(14,15,17,.5);touch-action:pan-y;transition:transform .5s var(--e),border-radius .3s}
.th-bar .th-bd{width:48px;height:48px;border-radius:50%;box-shadow:0 8px 14px -8px rgba(0,0,0,.85)}
.th-bd canvas{display:block;width:48px;height:48px}
.th-bn{gap:5px;align-items:flex-start}
.th-bar #bTi{display:block;width:auto;height:auto;max-width:100%;padding:3px 0;border-radius:4px;overflow:hidden;font:600 15px/1.25 var(--f);color:var(--pa);text-align:left;white-space:nowrap;text-overflow:ellipsis}
.th-bn.th-sw{animation:th-sw .42s var(--e)}
@keyframes th-sw{from{opacity:0;filter:blur(6px);transform:translateY(3px)}to{opacity:1;filter:none;transform:none}}
#bBy{font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--pa3);white-space:nowrap}
.th-bar #bBy .th-who{min-height:22px;padding:0 9px 0 7px;border-radius:11px;background:none;color:var(--pa);font:600 11.5px/1 var(--f);letter-spacing:0;text-transform:none}
.th-bar #bBy a.th-who:hover{background:var(--pa);color:var(--dk)}
.th-bk{flex:none;padding:0 4px;font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--pa2)}
.th-bar .th-bb{color:var(--pa)}
.th-bar #bT{background:var(--pa);color:var(--dk)}
.th-bar .th-ba{padding:0 18px;border-radius:22px;background:var(--pa);color:var(--dk);font:600 14px/44px var(--f)}
.th-bar .th-ba.p{background:var(--blue);color:#fff}
.th-bar.th-open{border-radius:16px 16px 32px 32px}
/* pressed, it opens upward into the ticket; the ticket closed folds back into it */
.th-sheet{position:fixed;left:50%;bottom:calc(82px + env(safe-area-inset-bottom,0px));z-index:399;width:min(680px,calc(100vw - 16px));max-height:calc(100svh - 170px);overflow-y:auto;overscroll-behavior:contain;border-radius:24px 24px 16px 16px;background:var(--plate);box-shadow:0 0 0 1px var(--line),0 -30px 60px -34px rgba(14,15,17,.5);transform:translateX(-50%);clip-path:inset(100% 0 0 0 round 24px);transition:clip-path .42s var(--e)}
.th-sheet.on{clip-path:inset(0 0 0 0 round 24px 24px 16px 16px)}
.th-sheet .ticket{grid-template-columns:1fr;border-radius:0;background:none;box-shadow:none;opacity:1!important;transform:none!important}
.th-sheet .pic{display:none}
.th-sheet .info{border:0;padding:26px 26px 18px;gap:20px}
.th-sheet .info::before,.th-sheet .info::after{content:none}
.th-sheet .info h2{font-size:clamp(26px,3vw,38px)}
/* a row's cover, on its way down into the bar */
.th-fly{position:fixed;z-index:450;object-fit:cover;border-radius:6px;pointer-events:none;transition:transform .56s var(--e),border-radius .56s,opacity .2s .42s;will-change:transform}
@media (max-width:760px){
  .th-rw{grid-template-columns:44px 40px minmax(0,1fr) auto;gap:10px}
  .th-rw img{display:block;width:40px;height:40px}
  .th-rw .th-tz{display:none}
  .th-tm{gap:6px}.th-tm span{gap:2px}
  .th-bk,.th-bar #bP,.th-bar #bN{display:none}
  .th-bar .th-ba{padding:0 16px}
  .th-sheet .info{padding:22px 18px 16px}
}

/* ====================================================================================================================
   THE LAST-LEG PASS (9 October, Martial's review of the build): hierarchy, order and clarity. One primary action per
   viewport; three levels of emphasis at most; the order of a visitor's head: hear it, want it, see the price, buy.
   The references: a dark core fading into the paper with a light grain; a cover fading into a tinted base; frosted
   tiles. No new colours: a production's own tint, taken from its cover, in three places. */

/* the top strip is part of the page, no longer fixed to the screen: one primary action per viewport, and no strip
   lying across a page in a capture. The bar at the foot is the one thing that follows. */
.th-look .top{position:relative;top:auto;z-index:auto}
.th-look .top::before{content:none}

/* the halo behind the disc: a dark, saturated core in the production's own tint, fading into the paper, with grain */
:root{--halo:0}
.room::before,.room::after{content:"";position:absolute;left:50%;top:var(--cy);width:calc(var(--D) * 2.15);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:var(--halo);transition:opacity 1.2s var(--e)}
.room::before{z-index:0;background:radial-gradient(circle,color-mix(in srgb,var(--tint,var(--dk)) 72%,#000) 0%,color-mix(in srgb,var(--tint,var(--dk)) 60%,var(--bg)) 30%,color-mix(in srgb,var(--tint,var(--dk)) 18%,var(--bg)) 56%,transparent 72%)}
.room::after{z-index:1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/160px 160px;mix-blend-mode:soft-light;-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%);opacity:calc(var(--halo) * .7)}
.room .world,.room .stage{z-index:2}
.room .stage{z-index:200}

/* the disc invites: a pill that says Play on its centre, a lift under the pointer; it breathes and turns at rest */
.plate{transition:transform .55s var(--spring),box-shadow .5s}
.plate:hover{box-shadow:0 64px 80px -38px rgba(26,23,18,.5),0 16px 30px -14px rgba(26,23,18,.22),inset 0 1px 0 #fff,inset 0 0 0 1px rgba(14,15,17,.07)}
.pm{width:auto;height:auto;margin:0;padding:0 18px 0 14px;transform:translate(-50%,-50%);border-radius:24px;gap:9px;min-height:44px;font:600 15px/1 var(--f);letter-spacing:0;color:var(--fg)}
.pm i{font-style:normal;font-size:12px}
.pm em{font-style:normal}
.plate:hover .pm{transform:translate(-50%,-50%) scale(1.06)}
.plate.playing .pm{opacity:0;transform:translate(-50%,-50%) scale(.6)}

/* beside the disc: the production in the middle, its price, the primary act. A row changes all of it */
.th-side{display:flex;flex-direction:column;gap:12px;max-width:380px;margin:0 auto;padding:0 var(--pad)}
.th-side .th-st{font:600 22px/1.15 var(--f);letter-spacing:-.02em;text-decoration:none;color:var(--fg)}
.th-side .th-st:hover{text-decoration:underline;text-underline-offset:4px}
.th-sp{display:flex;align-items:baseline;gap:12px;margin-top:2px}
.th-sp b{font:300 clamp(30px,3vw,42px)/1 var(--f);letter-spacing:-.04em}
.th-sp .ml{color:var(--fg2)}
.th-side .th-acts{margin-top:4px}
.th-side .th-acts .b{padding:0 12px;white-space:nowrap}
.th-side .b[disabled]{background:none;color:var(--fg3);box-shadow:inset 0 0 0 1px var(--line)}
body[data-page="artist"] #releases{display:grid;grid-template-columns:minmax(0,1fr) 360px;align-items:center;gap:0 24px;max-width:1280px!important;margin-inline:auto;padding:0 var(--pad) 24px!important}
body[data-page="artist"] #releases .room{grid-row:1/span 3;min-width:0}
body[data-page="artist"] #releases .th-side{grid-column:2;margin:0;padding:0}
body[data-page="artist"] #releases .parts{grid-column:1}

/* ---------- the chooser: three tier cards; the one chosen stands raised and filled ---------- */
.lc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;position:static}
.tier{position:relative;display:flex;flex-direction:column;gap:12px;min-height:220px;padding:18px 16px 16px;border-radius:18px;background:var(--plate);box-shadow:inset 0 0 0 1px var(--line);text-align:left;color:var(--fg2);overflow:hidden;transition:transform .5s var(--soft),box-shadow .3s,background-color .3s,color .3s}
.tier:hover{box-shadow:inset 0 0 0 1px var(--fg3)}
.tier-h{display:flex;flex-direction:column;gap:6px}
.tier-n{font:600 12px/1.3 var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--fg)}
.tier-p{font:300 clamp(30px,3vw,40px)/1 var(--f);letter-spacing:-.04em;color:var(--fg)}
.tier-r{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none;font:400 13.5px/1.35 var(--f)}
.tier-r li{padding-left:12px;text-indent:-12px}
.tier-r li::before{content:"·";display:inline-block;width:12px;text-indent:0;color:var(--fg3)}
.ph{font:500 11px/1 var(--mono);font-style:normal;letter-spacing:.04em;color:var(--rust)}
.tier-s{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px}
.tier-m{display:flex;align-items:flex-end;gap:3px;height:14px}
.tier-m i{width:1px;height:60%;background:var(--fg3)}
.tier-m i.h{width:2px;height:100%;background:var(--fg)}
.tier-l{font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg)}
.tier[aria-checked="true"]{z-index:1;transform:translateY(-4px);background:var(--dk);color:var(--pa2);box-shadow:0 30px 44px -26px rgba(14,15,17,.7),inset 0 0 0 1px rgba(255,255,255,.08)}
.tier[aria-checked="true"] .tier-n,.tier[aria-checked="true"] .tier-p,.tier[aria-checked="true"] .tier-l{color:var(--pa)}
.tier[aria-checked="true"] .tier-m i{background:var(--pa3)}.tier[aria-checked="true"] .tier-m i.h{background:var(--pa)}
.tier[aria-checked="true"] .tier-r li::before{color:var(--pa3)}
.tier[aria-checked="true"] .ph{color:var(--rust-d)}
/* its production, in its lower half: the cover fading into a base darkened with its tint */
.tier[aria-checked="true"]::before{content:"";position:absolute;inset:auto 0 0 0;height:62%;background:var(--cover) center 70%/cover no-repeat;opacity:.28;-webkit-mask:linear-gradient(transparent,#000);mask:linear-gradient(transparent,#000);pointer-events:none}
.tier[aria-checked="true"]::after{content:"";position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(transparent,color-mix(in srgb,var(--pc,var(--dk)) 30%,var(--dk)));pointer-events:none}
.tier>*{position:relative;z-index:1}
.tier[disabled]{cursor:default;opacity:.55}
.tier[disabled]:hover{box-shadow:inset 0 0 0 1px var(--line)}
.lc-shut{grid-column:1/-1;margin:4px 0 0}
.lc-all{grid-column:1/-1;margin:2px 0 0;font-size:10px!important;line-height:1.7;color:var(--fg3)!important}
.lc-test{font-size:10px;margin:-8px 0 0}
.info .lc-test{display:block}
.way-say{display:flex;flex-direction:column;gap:3px;margin:-14px 0 0;font:400 13.5px/1.4 var(--f);color:var(--fg2)}
.way-say b{font-weight:600;color:var(--fg)}
.info .acts .b{white-space:nowrap;font-size:14.5px}
.info .acts .b.k{flex:none}
@media (max-width:1000px){
  body[data-page="artist"] #releases{grid-template-columns:1fr;gap:6px;padding:0 0 18px!important}
  body[data-page="artist"] #releases .room{grid-row:auto}
  body[data-page="artist"] #releases .th-side{grid-column:1;margin:6px auto 0;padding:0 var(--pad)}
  .th-side{max-width:none}
  .lc{grid-template-columns:1fr;gap:8px}
  .tier{min-height:0;gap:10px;padding:16px 16px 14px}
  .tier-r{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
  .tier[aria-checked="true"]{transform:none}
}
@media (max-width:520px){.tier-r{grid-template-columns:1fr}}

/* ---------- the rows: what is left, and the price as the action ---------- */
.th-rw{grid-template-columns:44px 48px minmax(0,1fr) auto auto;gap:14px}
.th-av{white-space:nowrap;color:var(--fg2)}
.th-av.shut{color:var(--rust)}
.th-tt{cursor:pointer;text-align:left}
button.th-tt:hover b{text-decoration:underline;text-underline-offset:4px}
.th-tz{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 4px 0 12px;border-radius:20px;font:600 15px/1 var(--f);text-decoration:none;color:var(--fg);white-space:nowrap;transition:background .2s,color .2s}
.th-tz i{font-style:normal;transition:transform .5s var(--spring)}
a.th-tz:hover,button.th-tz:hover{background:var(--fg);color:var(--bg)}
.th-tz:hover i{transform:translateX(4px)}
.th-tz[disabled]{color:var(--fg3);cursor:default}
.th-tz[disabled]:hover{background:none;color:var(--fg3)}
.th-same{display:none}
.th-rw .th-tag{display:none}
@media (max-width:760px){
  .th-rw{grid-template-columns:44px 40px minmax(0,1fr) auto;gap:10px}
  .th-rw .th-av{display:none}
  .th-rw .th-tz{display:inline-flex;padding:0 2px 0 10px}
}

/* ---------- the instrument and the booth: the tint mixed into the near-black ---------- */
.ti,.tb{background:color-mix(in srgb,var(--tint,var(--dk)) 14%,var(--dk))}

/* ---------- the head of a house, and a producer's card: the lead cover fading into the tinted dark base ---------- */
.th-hc .th-hi,.th-pc .th-hi{inset:0 0 auto 0;width:100%;height:58%}
.th-hc .th-hi img,.th-pc .th-hi img{opacity:.92}
.th-hc .th-hi::after,.th-pc .th-hi::after{background:linear-gradient(0deg,color-mix(in srgb,var(--tint,var(--dk)) 26%,var(--dk)) 0%,color-mix(in srgb,var(--tint,var(--dk)) 26%,var(--dk)) 14%,color-mix(in srgb,color-mix(in srgb,var(--tint,var(--dk)) 26%,var(--dk)) 55%,transparent) 48%,transparent 88%)}
.th-hc,.th-pc{background:color-mix(in srgb,var(--tint,var(--dk)) 26%,var(--dk))}
.th-hc.th-img{min-height:clamp(420px,52svh,560px)}
.th-hc.th-img .th-hw,.th-hc.th-img .th-hn{align-self:end}
.th-pc.th-img{min-height:420px}
.th-pc.th-img .th-pw{margin-top:34%}
.th-pc .th-hd,.th-hc .th-hd{display:none}
@media (max-width:1000px){
  .th-hc.th-img{min-height:0}
  .th-hc.th-img .th-hw{padding-top:150px}
  .th-hc .th-hi,.th-pc .th-hi{height:220px}
}

/* the side block stands in a house only: on a production's page and on How it works the card carries its acts */
body[data-page="release"] .th-side,body[data-page="how"] .th-side{display:none}
.pm{display:inline-flex;align-items:center;flex-direction:row}
/* the room keeps its covers inside the disc's own column in a house */
body[data-page="artist"] #releases .room{-webkit-mask:linear-gradient(90deg,#0000,#000 8%,#000 92%,#0000);mask:linear-gradient(90deg,#0000,#000 8%,#000 92%,#0000)}

/* ---------- how it works: three numbered steps, then the two ways to have a house ---------- */
.th-step{margin:0}
.th-step b{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--fg);color:var(--bg);font:500 15px/1 var(--mono)}
.th-card .th-step{margin-bottom:-6px}
.th-mo .th-cv{max-width:40ch}
.th-deals{gap:18px}
.th-dg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:8px}
.th-deal{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px 28px 24px;border-radius:22px;box-shadow:0 36px 50px -40px rgba(14,15,17,.6)}
.th-deal .ml{color:var(--fg3)}
.th-deal h3{font:440 clamp(30px,3.4vw,46px)/1 var(--f);letter-spacing:-.04em}
.th-dk-keep{display:flex;align-items:baseline;gap:10px;margin-top:-4px}
.th-dk-keep b{font:300 clamp(44px,5vw,72px)/1 var(--f);letter-spacing:-.045em}
.th-deal ul{display:flex;flex-direction:column;gap:7px;margin:0;padding:0;list-style:none;font:400 16px/1.4 var(--f);color:var(--fg2)}
.th-deal li{padding-left:14px;text-indent:-14px}
.th-deal li::before{content:"·";display:inline-block;width:14px;text-indent:0;color:var(--fg3)}
.th-deal-act{margin-top:auto;padding-top:8px}
.th-deal-act .b{width:100%}
.th-deal .th-tag{min-height:32px;padding:0 14px;font-size:11px}
@media (max-width:1000px){.th-dg{grid-template-columns:1fr}.th-deal{padding:22px 20px 20px}}

/* ---------- the producers: a few sentences under the headline ---------- */
.th-pi{max-width:52ch;margin:-12px 0 26px;font:400 clamp(17px,1.5vw,20px)/1.45 var(--serif);color:var(--fg2)}

/* ====================================================================================================================
   THE FRONT OF HOUSES (/tonehold/producers; Martial, 9 October, night, on a reference: "this intention is more
   ritualistic … the card of house in itself are fine, it's just the global feeling"; and of the ground: "not these
   background btw, slight gradient background from our image gives some juice to almost every image").
   A rite has an order: the head in the middle (a kicker, two lines, a lede, one act), then the houses as one row,
   a stage, the one nearest the middle raised. The ground is a slight gradient made from our own images: each soft
   shape is a house's lead cover, blurred, fading into the paper (producers.js lays them). No other image, no glow. */
.th-fbg{position:absolute;left:0;top:0;z-index:-1;width:100%;height:min(980px,118svh);overflow:hidden;pointer-events:none;-webkit-mask:linear-gradient(#000 0,#000 38%,transparent 94%);mask:linear-gradient(#000 0,#000 38%,transparent 94%)}
.th-fbg i{position:absolute;top:-10%;width:52%;height:96%;background:center/cover no-repeat;filter:blur(72px) saturate(1.3);opacity:0;transform:scale(1.12);transition:opacity 1.6s var(--e)}
.th-fbg.in i{opacity:.66}
.th-fbg i:nth-child(1){left:-16%}
.th-fbg i:nth-child(2){right:-16%}
.th-fbg.in i:nth-child(n+3){left:24%;top:46%;width:52%;height:66%;opacity:.3}
/* the paper holds the middle, where the words stand; a light grain over all of it */
.th-fbg::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(46% 62% at 50% 30%,var(--bg) 0,color-mix(in srgb,var(--bg) 78%,transparent) 54%,transparent 100%)}
.th-fbg::after{content:"";position:absolute;inset:0;z-index:2;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/160px 160px;mix-blend-mode:soft-light;opacity:.6}
.th-front{padding-block:clamp(18px,4.6svh,54px) 0!important}
.th-fh{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.th-fh>*{animation:th-rise 1.1s var(--e) both}
.th-fh>:nth-child(2){animation-delay:90ms}.th-fh>:nth-child(3){animation-delay:190ms}.th-fh>:nth-child(4){animation-delay:290ms}
/* (the arrival moves `translate`, never `transform`: a card's raise is its transform, and an arrival that ended must not hold it) */
@keyframes th-rise{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
.th-fh .ml{color:var(--fg3);letter-spacing:.26em}
.th-fh1{margin-top:4px;font:440 clamp(44px,6.9vw,104px)/.95 var(--f)!important;letter-spacing:-.05em;text-wrap:balance}
.th-fh1 span{display:block;color:var(--fg3)}
.th-front .th-pi{max-width:50ch;margin:2px 0 0;font:400 clamp(17px,1.55vw,21px)/1.45 var(--serif);color:var(--fg2);text-wrap:pretty}
#pGo{margin-top:8px;min-width:210px;box-shadow:0 22px 30px -20px rgba(14,15,17,.7)}
/* the stage: one row; the house nearest the middle stands raised; under a hand, the house under it does */
.th-front .th-pg{position:relative;display:flex;align-items:stretch;gap:18px;margin:clamp(30px,5svh,56px) calc(var(--pad)*-1) 0;padding:30px var(--pad) 76px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-margin-block:20svh}
.th-front .th-pg::-webkit-scrollbar{display:none}
.th-front .th-pc{flex:0 0 min(82vw,380px);scroll-snap-align:center;transform-origin:50% 60%;transition:transform .8s var(--soft),box-shadow .6s,filter .6s;animation:th-rise 1.1s var(--e) calc(380ms + var(--i)*90ms) both}
.th-front .th-pc:first-child{margin-left:auto}.th-front .th-pc:last-child{margin-right:auto}
.th-front .th-pc:hover{transform:none}
.th-front .th-pc.mid{z-index:2;transform:translateY(-14px) scale(1.045);box-shadow:0 70px 80px -52px rgba(14,15,17,.75)}
@media (hover:hover){
  .th-front .th-pg:hover .th-pc.mid:not(:hover){z-index:auto;transform:none;box-shadow:0 44px 60px -46px rgba(14,15,17,.6)}
  .th-front .th-pg .th-pc:hover{z-index:2;transform:translateY(-14px) scale(1.045);box-shadow:0 70px 80px -52px rgba(14,15,17,.75)}
}
/* under the stage, for producers */
/* (the veil over a card's image reaches a little under it: no seam where the image ends, when the card is raised) */
.th-front .th-pc .th-hi::after{inset:0 0 -2px 0}
/* who they are, on their card: the sentence the house gave */
.th-pv{max-width:34ch;font:400 15.5px/1.4 var(--serif);color:var(--fg2);text-wrap:pretty}
/* the houses the house represents stand apart: larger, on the stage, with a quiet mark that says nothing of money */
.th-mark{position:absolute;left:16px;top:16px;z-index:1;display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:0 12px 0 10px;border-radius:14px;background:rgba(14,15,17,.44);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#fff;white-space:nowrap}
.th-mark::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--rust-d)}
.th-hw .th-mark{position:static;align-self:flex-start}
.th-hw>.ml{align-items:center}
.th-front .th-pc.th-rep{flex-basis:min(84vw,470px);min-height:500px}
.th-front .th-pc.th-rep .th-pn{font-size:clamp(34px,3.4vw,52px)}
.th-pm{display:flex;flex-direction:column;gap:16px;margin-top:-34px;padding-bottom:44px}
.th-pm>.ml{color:var(--fg3);letter-spacing:.2em}
.th-pg2{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.th-pg2 .th-pc.th-img{min-height:380px}
.th-pg2 .th-pc.th-img .th-pw{margin-top:30%}
@media (max-width:1000px){.th-pm{margin-top:-18px}.th-pg2{grid-template-columns:minmax(0,78vw)}}
.th-fmore{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 40px;padding-block:26px 34px!important;background:linear-gradient(var(--line),var(--line)) var(--pad) 0/calc(100% - var(--pad)*2) 1px no-repeat}
.th-fmore>div{display:flex;flex-direction:column;gap:8px;min-width:0}
.th-fmore .ml{color:var(--fg3)}
.th-fms{max-width:54ch;font:400 clamp(17px,1.5vw,20px)/1.4 var(--serif);color:var(--fg2)}
body[data-page="producers"] .tail{padding-top:8px}
@media (max-width:1000px){
  .th-fh{gap:16px}
  .th-front .th-pg{gap:12px;padding-inline:calc(50% - min(82vw,380px)/2 + var(--pad));padding-block:26px 60px}
  .th-front .th-pc:first-child,.th-front .th-pc:last-child{margin-inline:0}
  .th-front .th-pc.mid{transform:translateY(-8px) scale(1.02)}
  .th-fmore .b{flex:1 1 100%}
  .th-fbg i{filter:blur(48px) saturate(1.3);width:70%}
  .th-fbg i:nth-child(1){left:-36%}.th-fbg i:nth-child(2){right:-36%}
}
@media (prefers-reduced-motion:reduce){.th-fh>*,.th-front .th-pc{animation:none}.th-fbg i{transition:none}}

/* ====================================================================================================================
   INSIDE A HOUSE (Martial's brief of 9 October, night, on a mock-up): the catalogue is the page, with clear prices and
   ONE act on each production (Choose licence); listening is compact, so that there is room to browse and to buy.
   No disc stands in a house, and no instrument stands open: "Play my sound" is the house's one act of listening (in
   its head, for its featured production), and it unfolds the sampler, which folds again without stopping. A cover
   carries a minimal play control, on a translucent backing so that it reads over any artwork; played, the cover
   reveals the player (where the excerpt is, and its time), and the bar at the foot carries it while one browses. */
body[data-page="artist"] #releases,body[data-page="artist"] #release{display:none!important}
body[data-page="artist"] .th-lst{padding-block:clamp(22px,3.4vw,44px) 26px!important}
.th-lh{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 32px;margin-bottom:24px}
.th-lh>div{display:flex;flex-direction:column;gap:12px;min-width:0}
.th-lh h2{font:440 clamp(32px,4.8vw,68px)/.98 var(--f);letter-spacing:-.045em;text-wrap:balance}
.th-ls{font:italic 400 clamp(16px,1.4vw,19px)/1.4 var(--serif);color:var(--fg2)}
body[data-page="artist"] .th-trs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;border-top:0}
.th-rw.th-cd{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:10px;min-height:0;padding:14px 14px 16px;border:0;border-radius:24px;background:var(--plate);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s,transform .6s var(--soft)}
.th-cc{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#ddd}
.th-rw.th-cd .th-cc img{display:block;width:100%;height:100%;border-radius:0;object-fit:cover;transition:transform .9s var(--soft)}
.th-rw.th-cd .th-tp{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(14,15,17,.34);color:#fff;font-size:16px;-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);transition:transform .5s var(--spring),background .25s}
.th-rw.th-cd.th-live .th-tp{background:rgba(14,15,17,.52)}
.th-cp{position:absolute;left:10px;right:10px;bottom:10px;height:4px;border-radius:2px;background:rgba(255,255,255,.42);overflow:hidden;opacity:0;transition:opacity .3s}
.th-cp::after{content:"";position:absolute;inset:0;border-radius:2px;background:var(--rust-d);transform:scaleX(var(--p,0));transform-origin:0 50%}
.th-ck{position:absolute;left:10px;bottom:22px;padding:4px 7px;border-radius:8px;background:rgba(14,15,17,.46);color:#fff!important;font-size:10px!important;letter-spacing:.08em;opacity:0;transition:opacity .3s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* (a card is the player only once it has been played: at rest the first production is no more "now" than another) */
.th-cd.th-live .th-cp,.th-cd.th-live .th-ck{opacity:1}
.th-rw.th-cd.th-cur .th-tt b{color:inherit}.th-rw.th-cd.th-live .th-tt b{color:var(--rust)}
.th-rw.th-cd .th-tt{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;min-height:44px;margin:-2px 0 -8px;text-align:left}
.th-rw.th-cd .th-tt b{display:block;font:600 21px/1.15 var(--f);letter-spacing:-.02em;white-space:normal;overflow:visible}
.th-rw.th-cd .th-tag{display:inline-flex;min-height:24px;padding:0 9px;border-radius:12px;font-size:10px;letter-spacing:.1em}
.th-cv2{font:400 15px/1.4 var(--serif);color:var(--fg2)}
.th-pl{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:auto;padding-top:8px}
.th-pr{font:440 26px/1 var(--f);letter-spacing:-.03em;white-space:nowrap}
.th-pr i{margin-right:1px;font:400 15px/1 var(--f);font-style:normal;letter-spacing:0;color:var(--fg2)}
.th-rw.th-cd .th-av{display:inline;color:var(--fg2);white-space:nowrap}
.th-kn{font-size:10px!important;color:var(--fg3)!important}
/* (11 October) each licence with its own price: the lowest still available leads the card ("€79 · use"), the others
   stand apart under it ("€450 · exclusive"). Never "from €79" beside "exclusive". */
.th-pr i{margin:0;font:400 15px/1 var(--f);font-style:normal;letter-spacing:0;color:var(--fg2)}
.th-px{display:flex;flex-wrap:wrap;gap:3px 12px}
.th-px span{white-space:nowrap}
/* A CLOSED EDITION IS SEALED (11 October: "an edition plate, number sold, date closed, not a grey Closed button"): a
   plate over its cover, on ink, lined in rust (rust is what is sealed), the cover drawn back; no act under it. */
.th-cd.th-sealed .th-cc img{filter:saturate(.82);opacity:.62}
.th-seal{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 14px 13px;border-radius:12px;background:color-mix(in srgb,var(--dk) 90%,transparent);color:var(--pa);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px var(--rust-d)}
.th-seal b{font:600 16px/1.1 var(--f);letter-spacing:-.01em}
.th-seal b::before{content:"";display:inline-block;width:7px;height:7px;margin:0 8px 1px 0;border-radius:50%;background:var(--rust-d)}
.th-seal span{font:500 10.5px/1.25 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--pa2)}
.th-smp{position:absolute;right:10px;top:10px;display:inline-flex;align-items:center;min-height:22px;padding:0 9px;border-radius:11px;box-shadow:inset 0 0 0 1px var(--rust-d);font:500 9.5px/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--rust-d)}
.th-cd.th-sealed .th-av{color:var(--rust)}
.th-rw.th-cd .th-tz{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;margin-top:6px;padding:0 14px;border-radius:24px;background:var(--fg);color:var(--bg);font:600 15px/1 var(--f)}
.th-rw.th-cd .th-tz i{font-style:normal;transition:transform .5s var(--spring)}
.th-rw.th-cd .th-tz[disabled]{background:none;color:var(--fg3);box-shadow:inset 0 0 0 1px var(--line);cursor:default}
@media (hover:hover){
  .th-rw.th-cd:hover{box-shadow:inset 0 0 0 1px var(--fg3);transform:translateY(-3px)}
  .th-cd:hover .th-cc img{transform:scale(1.04)}
  .th-rw.th-cd .th-tp:hover{transform:scale(1.08)}
  .th-rw.th-cd .th-tt:hover b{text-decoration:underline;text-underline-offset:4px}
  .th-rw.th-cd .th-tz:not([disabled]):hover{background:var(--fg);color:var(--bg)}
  .th-rw.th-cd .th-tz:not([disabled]):hover i{transform:translate(3px,-3px)}
}
/* the sampler: folded until the house's sound is played; it folds again without stopping */
body[data-page="artist"] #instrument{padding-block:0!important}
#instBox{max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .7s var(--e),opacity .45s var(--e),visibility 0s .7s}
#instrument.open #instBox{max-height:1400px;padding-top:14px;opacity:1;visibility:visible;transition:max-height .9s var(--e),opacity .6s var(--e) .1s,visibility 0s}
#instT{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:44px;font:500 11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--fg2)}
#instT[hidden]{display:none}
#instT i{font-style:normal;transition:transform .5s var(--soft)}
#instrument.open #instT i{transform:rotate(180deg)}
@media (max-width:1000px){
  body[data-page="artist"] .th-trs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .th-rw.th-cd{gap:8px;padding:8px 8px 10px;border-radius:18px}
  .th-cc{border-radius:12px}
  .th-rw.th-cd .th-tp{width:52px;height:52px;margin:-26px 0 0 -26px;font-size:14px}
  .th-rw.th-cd .th-tt b{font-size:17px}
  .th-pl{flex-direction:column;align-items:flex-start;gap:5px}
  .th-pr{font-size:22px}
  .th-rw.th-cd .th-tz{min-height:46px;padding:0 8px;font-size:14px}
  .th-lh{margin-bottom:16px}
}
/* in a house the head is shorter than on the front: the catalogue is the page, and comes sooner */
body[data-page="artist"] .th-hc.th-img{min-height:clamp(320px,40svh,420px)}
@media (max-width:1000px){body[data-page="artist"] .th-hc.th-img{min-height:0}}