/* TONEHOLD: the licence card, one object (10 October). Martial, of the three tier cards: "this card is not sexy, its a
   bit crowded"; his direction: an image fading into a tinted base, a title with its price, two tags, ONE button.
   The card stands on ink: the production's cover fading into a base darkened with its tint. The title, the producer's
   tag, its tags. The tiers are PILLS in one row (a name and a price each, the chosen one filled); what the chosen tier
   gives stands under them, for that tier only, with what is left of it as one plain line; one sentence says the
   difference (counted, not capped). ONE act carries the choice, in paper on the ink; a round control beside it plays.
   The engine gives the card the ink plane (th-dk) and the class tk wherever a page stands in the look; this sheet
   loads after look.css. In the sheet a house's bar opens, the card has no picture and stands on the sheet's own ground. */
.ticket.tk{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);overflow:hidden;border-radius:28px;background:color-mix(in srgb,var(--tint,var(--dk)) 24%,var(--dk));color:var(--pa);box-shadow:0 54px 70px -54px rgba(14,15,17,.75)}
.tk .pic{position:relative;display:block;min-height:420px;padding:0;border-radius:0;background:none}
.tk .pic .fr{position:absolute;inset:0;width:auto;aspect-ratio:auto;border-radius:0;background:none;box-shadow:none}
.tk .pic::after{content:"";position:absolute;inset:0 -1px 0 0;background:linear-gradient(90deg,transparent 34%,color-mix(in srgb,color-mix(in srgb,var(--tint,var(--dk)) 24%,var(--dk)) 62%,transparent) 72%,color-mix(in srgb,var(--tint,var(--dk)) 24%,var(--dk)) 100%);pointer-events:none}
.tk .info{justify-content:center;gap:18px;padding:36px 36px 26px 22px;border-left:0}
.tk .info::before,.tk .info::after{content:none}
.tk .info h2{font:440 clamp(38px,4.6vw,66px)/.94 var(--f);letter-spacing:-.045em;text-transform:none;color:var(--pa)}
.tk .sw{gap:12px}
.tk .desc{font-size:17px;color:var(--pa2);margin-top:0}
.tk .info .th-tags{margin-top:0}
.tk .ways{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pa) 30%,transparent)}
.tk .way-say{margin:-8px 0 0}
/* the tiers: pills in one row, a name and a price each */
.tk .lc{display:flex;flex-direction:column;gap:14px;margin:0}
.tier-row{display:grid;grid-template-columns:repeat(var(--tn,3),minmax(0,1fr));gap:8px}
.tk .tier{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:4px 10px;min-height:56px;padding:0 18px;border-radius:28px;background:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pa) 36%,transparent);color:var(--pa);text-align:left;transform:none;transition:background .25s,color .25s,box-shadow .25s}
.tk .tier::before,.tk .tier::after{content:none!important}
.tk .tier .tier-n{font:600 14px/1.15 var(--f);letter-spacing:0;text-transform:none;color:inherit}
.tk .tier .tier-p{font:500 15.5px/1 var(--f);letter-spacing:-.01em;color:inherit}
.tk .tier:hover{box-shadow:inset 0 0 0 1px var(--pa)}
.tk .tier[aria-checked="true"]{background:var(--pa);color:var(--dk);box-shadow:none;transform:none}
.tk .tier[disabled]{opacity:.42;cursor:default}
.tk .tier[disabled]:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pa) 36%,transparent)}
/* what the chosen tier gives, and what is left of it */
.tier-d{display:flex;flex-direction:column;gap:10px;min-height:138px}
.tier-d .tier-l{font:500 11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--rust-d)}
.tier-d .tier-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 18px;margin:0;padding:0;list-style:none;font:400 14.5px/1.35 var(--f);color:var(--pa)}
.tier-d .tier-r li{position:relative;padding-left:16px;text-indent:0}
.tier-d .tier-r li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1.5px;background:var(--pa2)}
.lc-u{font:400 15.5px/1.4 var(--serif);color:var(--pa2);text-wrap:pretty}
.tk .lc-all{margin:-4px 0 0;color:var(--pa3)!important}
/* ONE act that carries the choice; a round control beside it plays */
.tk .acts{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;margin:2px 0 0}
.tk .acts .b{min-height:56px;border-radius:28px;font-size:15.5px}
.tk .acts #fPlay{position:relative;width:56px;padding:0;border-radius:50%;background:none;color:var(--pa);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pa) 46%,transparent)}
.tk .acts #fPlay span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.tk .acts #fBuy{background:var(--pa);color:var(--dk)}
.tk .acts #fBuy[disabled]{background:none;color:var(--pa3);box-shadow:inset 0 0 0 1px var(--dkl)}
.tk .acts [hidden]+.b{grid-column:1/-1}
.tk .lc-test{margin:-6px 0 0;color:var(--rust-d)}
.tk-given{font:400 14.5px/1.4 var(--serif);color:var(--pa2)}
.tk .pay input{background:color-mix(in srgb,var(--pa) 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pa) 34%,transparent);color:var(--pa)}
.tk .pay input::placeholder{color:var(--pa3)}
.tk .pay input:focus-visible{box-shadow:inset 0 0 0 2px var(--pa)}
.tk .pay .note{box-shadow:inset 0 0 0 1px var(--pa2);color:var(--pa)}
.tk .own input{accent-color:var(--pa)}
.tk .det summary{color:var(--pa2)}
.tk .det dt{color:var(--pa3)}
.tk .go.s{color:var(--pa)}
.tk .price{color:var(--pa)}
/* in the sheet a house's bar opens: no picture, and the sheet's own ground */
.th-sheet .ticket.tk{background:none;box-shadow:none;border-radius:0}
.th-sheet .tk .info{padding:26px 26px 18px}
@media (max-width:1000px){
  .ticket.tk{grid-template-columns:1fr;border-radius:24px}
  .tk .pic{min-height:0;height:210px;padding:0}
  .tk .pic .fr{width:auto}
  .tk .pic::after{inset:0 0 -1px 0;background:linear-gradient(180deg,transparent 20%,color-mix(in srgb,color-mix(in srgb,var(--tint,var(--dk)) 24%,var(--dk)) 60%,transparent) 66%,color-mix(in srgb,var(--tint,var(--dk)) 24%,var(--dk)) 100%)}
  .tk .info{padding:6px 18px 20px;gap:16px}
  .tk .tier{flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;min-height:60px;padding:0 14px;border-radius:20px}
  .tk .tier .tier-n{font-size:12.5px}
  .tier-d{min-height:0}
  .tier-d .tier-r{grid-template-columns:1fr}
  .th-sheet .tk .info{padding:20px 16px 16px}
}
/* two tags at most on the card; and no line where the picture meets the words */
.tk .info .th-tags .th-tag:nth-child(n+3){display:none}
.tk .info{border:0}