/* dialect and jobs (riemer.fyi style): two framed columns; the jobs wipe in as black boxes */
.dl { flex: 1; display: flex; flex-direction: column; gap: 2vh; min-width: 0; }
.dl-grid { flex: 1; align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.8vw; align-content: center; }
.dl-col { display: flex; flex-direction: column; min-width: 0; container-type: inline-size; border: var(--rule) solid var(--ink); }
.dl-col .rc-label { font-size: 3.4cqi; padding: 2.4cqi 4.5cqi; }
.dl-example { font-size: 5.6cqi; font-weight: 700; padding: 4cqi 4.5cqi; border-bottom: var(--rule) solid var(--ink); }
.dl-ai { padding: 3.5cqi 4.5cqi 4.5cqi; display: grid; gap: 2cqi; }
.dl-ai-label { font-size: 3.4cqi; font-weight: 700; text-transform: uppercase; }
.dl-jobs { display: grid; gap: 1.6cqi; clip-path: inset(0 100% 0 0); transition: clip-path .5s cubic-bezier(.7,0,.2,1); }
.dl-col.on .dl-jobs { clip-path: inset(0 0 0 0); }
.dl-job { display: flex; align-items: baseline; gap: 2.4cqi; }
.dl-box { font-size: 4.6cqi; font-weight: 700; background: var(--ink); color: var(--bg); padding: .05em .3em; }
.dl-times { font-size: 3.4cqi; font-weight: 700; }