/* Build 4: only the four session labels and separated details/contact layout. */
.session .session-label {
  display: inline-block; width: max-content; max-width: 100%; white-space: nowrap;
  font-family: Impact, 'Arial Narrow', 'Roboto Condensed', 'Helvetica Neue', sans-serif;
  font-weight: 900; font-stretch: condensed; font-size: 2.8rem; line-height: 1.1;
  color: #151712; background: var(--paper); padding: 8px 12px; cursor: default;
  --lego-ul-color: var(--workshop-accent); --lego-ul-thickness: 3px;
  transition: color .3s;
}
/* Tombolo rising-fill choreography, isolated to an edge highlight for contrast. */
.session .session-label::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 6px; height: 0;
  background: var(--workshop-accent); pointer-events: none;
  transition: height .7s cubic-bezier(.625,.05,0,1);
}
.session .session-label.is-touch-in { color: var(--workshop-accent); }
.session .session-label.is-touch-in::after { height: 100%; }
.session:focus-visible .session-label { color: var(--workshop-accent); }
.session:focus-visible .session-label::after { height: 100%; }
.session:focus-visible .session-label::before { transform-origin: left; transform: scaleX(1) rotate(.001deg); }
@media (hover: hover) and (pointer: fine) {
  .session:hover .session-label { color: var(--workshop-accent); }
  .session:hover .session-label::after { height: 100%; }
  .session:hover .session-label::before { transform-origin: left; transform: scaleX(1) rotate(.001deg); }
}
@media (min-width: 768px) {
  .session .session-label { font-size: 1.68rem; }
  .practical { display: block; }
  .practical .details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 48px; }
  .practical .details > div { grid-column: 1; grid-row: 1; }
  .practical .details > ul { grid-column: 2; grid-row: 1 / span 2; }
  .practical .studio-note { grid-column: 1; grid-row: 2; max-width: 65ch; align-self: start; }
  .section.contact { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 48px; padding-left: 4.4vw !important; border-left: 0; }
}
.section.contact { border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) {
  .session .session-label, .session .session-label::after { transition-duration: .15s; }
}
